#rem_plugin { }
#rem_plugin.projects-container,
.projects-container {
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
} #rem_plugin .projects-grid,
.rem_plugin .projects-grid,
.properties-container .properties-grid,
.properties-container .projects-grid,
.projects-container .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
padding: 20px;
max-width: 1400px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: visible;
width: 100%;
box-sizing: border-box;
} .side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid,
#rem_plugin.side-map-layout .split-left .projects-grid {
max-width: 100% !important;
margin: 0 !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid,
#rem_plugin.top-map-layout .projects-grid {
max-width: 1400px !important;
margin: 0 auto !important;
} .side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
max-width: 100% !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid {
max-width: 1400px !important;
margin: 0 auto !important;
} #rem_plugin .project-item,
.rem_plugin .project-item,
.properties-container .property-item,
.properties-container .project-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding:0 !important;
}
#rem_plugin .project-item:hover,
.rem_plugin .project-item:hover,
.properties-container .property-item:hover,
.properties-container .project-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
} #rem_plugin .project-image,
.rem_plugin .project-image,
.properties-container .project-image {
position: relative;
padding-top: 66%; overflow: hidden;
}
#rem_plugin .project-image img,
.rem_plugin .project-image img,
.properties-container .project-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 10px 0 0;
} #rem_plugin .project-badge,
.rem_plugin .project-badge,
.properties-container .project-badge {
position: absolute;
top: 12px;
left: 12px;
background: #fff;
color: #000;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
z-index: 1;
} #rem_plugin .project-info,
.rem_plugin .project-info,
.properties-container .project-info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
#rem_plugin .project-list-title,
.rem_plugin .project-list-title,
.properties-container .project-list-title {
font-size: 20px;
font-weight: 600;
color: #333 !important;
margin: 0;
line-height: 1.3;
}
#rem_plugin .project-location,
.rem_plugin .project-location,
.properties-container .project-location {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
}
#rem_plugin .project-meta,
.rem_plugin .project-meta,
.properties-container .project-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: auto;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
#rem_plugin .meta-item,
.rem_plugin .meta-item,
.properties-container .meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
#rem_plugin .meta-label,
.rem_plugin .meta-label,
.properties-container .meta-label {
color: #666;
font-size: 12px;
}
#rem_plugin .meta-value,
.rem_plugin .meta-value,
.properties-container .meta-value {
color: #333;
font-weight: 500;
font-size: 14px;
} #rem_plugin .developer-info,
.rem_plugin .developer-info,
.properties-container .developer-info {
margin-top: 12px;
font-size: 14px;
color: #666;
}
#rem_plugin .meta-item:nth-of-type(2),
.rem_plugin .meta-item:nth-of-type(2),
.properties-container .meta-item:nth-of-type(2) {
text-align: end;
}
#rem_plugin .view-all-wrapper {
grid-column: 1 / -1;
text-align: center;
margin-top: 2rem;
}
#rem_plugin .view-all-button {
display: inline-block;
padding: 12px 30px;
background-color: var(--rem-primary, #4CAF50);
color: var(--rem-primary-text, white) !important;
text-decoration: none !important;
border-radius: var(--rem-view-all-radius, 6px);
font-weight: 500;
transition: background-color 0.3s ease;
}
#rem_plugin .view-all-button:hover {
background-color: var(--rem-primary-hover, #45a049);
color: var(--rem-primary-text, #fff) !important;
} #rem_plugin .projects-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 2rem;
padding: 1rem;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
box-sizing: border-box;
}
#rem_plugin .projects-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 2rem;
padding: 1rem;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
box-sizing: border-box;
}
#rem_plugin .pagination-link {
padding: 8px 15px;
background-color: #fff;
color: #28a745;
text-decoration: none;
border-radius: 4px;
border: 1px solid #28a745;
transition: background-color 0.2s, color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
#rem_plugin .pagination-link:hover {
background-color: #28a745;
color: #fff;
}
#rem_plugin .pagination-link.active {
background-color: #28a745;
color: #fff;
border-color: #28a745;
font-weight: bold;
} #project_pagination a.pagination-link,
#project_pagination .pagination-link,
#rem_plugin #project_pagination a,
#rem_plugin #project_pagination .pagination-link {
background-color: #fff;
color: var(--primary-color, #28a745);
border: 1px solid var(--primary-color, #28a745);
}
#project_pagination a.pagination-link.active,
#project_pagination .pagination-link.active,
#rem_plugin #project_pagination a.active,
#rem_plugin #project_pagination .pagination-link.active {
background-color: var(--primary-color, #28a745);
color: #fff;
border-color: var(--primary-color, #28a745);
} #rem_plugin .custom-pagination-link {
padding: 8px 15px;
background-color: #fff;
color: #28a745;
text-decoration: none;
border-radius: 4px;
border: 1px solid #28a745;
transition: background-color 0.2s, color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
#rem_plugin .custom-pagination-link:hover {
background-color: #28a745;
color: #fff;
}
#rem_plugin .custom-pagination-link.active {
background-color: #28a745;
color: #fff;
border-color: #28a745;
font-weight: bold;
}
#rem_plugin .page-numbers {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: #333;
display: flex;
gap: 10px;
}
#rem_plugin .page-numbers.current {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
#rem_plugin .page-numbers:hover:not(.current) {
background-color: #f5f5f5;
} @media (max-width: 1400px) {
.side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
}
@media (max-width: 1200px) {
.side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
}
@media (max-width: 768px) {
.side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid {
grid-template-columns: repeat(2, 1fr) !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px;
padding: 16px;
}
}
@media (max-width: 480px) {
.side-map-layout .split-left .projects-grid,
#layout-container.side-map-layout .split-left .projects-grid {
grid-template-columns: 1fr !important;
} .top-map-layout .projects-grid,
#layout-container.top-map-layout .projects-grid {
grid-template-columns: 1fr !important;
}
} .project-detail-wrapper { margin: 0 auto; }
.project-hero-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.project-title {
font-size: 64px;
text-transform: uppercase;
margin: 0;
font-weight: bold;
letter-spacing: 10.67px;
line-height: 84px;
-webkit-text-stroke-width: 2px;
-webkit-text-fill-color: transparent;
transition: transform 1s cubic-bezier(.165,.84,.44,1);
-webkit-text-stroke-color: currentColor;
color: white !important;
}
@media (max-width: 1199px) {
.project-title {
font-size: 50px;
letter-spacing: 8px;
line-height: 70px;
}
}
@media (max-width: 767px) {
.project-title {
font-size: 30px;
}
}
.property_location svg{
height: 50px;
margin-left: -6px;
min-width: 50px;
width: 50px;
}
.property_location span{
color: #fff;
font-size: 26px;
}
@media (max-width: 767px) {
.property_location span {
font-size: 20px;
}
}
.property_price_completion {
display: flex;
gap: 10px;
justify-content: space-between;
}
.property_price_completion>div{
display: flex;
flex-direction: column;
}
.property_price_completion > div > span:first-child {
color: #fff;
font-size: 30px;
font-weight: 500;
}
@media (max-width: 767px) {
.property_price_completion > div > span:first-child {
font-size: 25px;
}
}
@media (max-width: 767px) {
.property_price_completion>div>span:last-child, .property_updated_at span {
font-size: 16px;
}
}
.property_price_completion > div > span:last-child {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.property_updated_at {
margin-top: 20px;
}
.property_updated_at span {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.property_developer {
align-items: center;
border-radius: 5px;
display: flex;
gap: 15px;
padding: 20px 0;
}
.property_developer img {
border: 1px solid #052844;
height: 80px;
-o-object-fit: contain;
object-fit: contain;
width: 80px;
}
@media (max-width: 767px) {
.property_developer img {
height: 50px;
width: 50px;
}
}
@media (max-width: 767px) {
.property_developer span {
font-size: 20px;
}
}
.property_developer span {
color: #fff;
font-size: 25px;
font-weight: 500;
}
.project_detail-type {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 5px 15px;
border-radius: 20px;
margin-bottom: 20px;
}
.project-detail-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px; }
.project-detail-meta > div {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
}
.project-hero-image {
position: relative;
}
.project-hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 10px;
}        .project-navigation {
background: white;
padding: 15px 0; border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.project-navigation nav {
display: flex;
gap: 35px;
overflow-x: auto;
padding: 0 20px;
}
.project-navigation a {
color: #666;
text-decoration: none;
padding: 10px 0;
position: relative;
white-space: nowrap;
}
.project-navigation a.active {
color: #1a365d;
font-weight: bold;
}
.project-navigation a.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #1a365d;
}
.project-section { }
.section-content {
max-width: 1200px;
margin: 0 auto; }
.section-title {
font-size: 1.8rem;
color: #052844;
margin-bottom: 30px;
font-weight: 600;
}
.project-facts {
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.project-facts h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
font-weight: 500;
}
.project-description {
color: #4a5568;
line-height: 1.6;
}
.description-content {
margin-bottom: 20px;
}
.description-content.truncated {
max-height: 120px;
overflow: hidden;
position: relative;
}
.description-content.truncated:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(transparent, #fff);
}
.read-more-btn {
background: none;
border: none;
color: #2b6cb0;
cursor: pointer;
font-weight: 500;
padding: 0;
font-size: 0.9rem;
}
.read-more-btn:hover {
text-decoration: underline;
}
.project-contact {
background: #fff;
border-radius: 10px;
padding: 20px 30px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-icon {
font-size: 1.2rem;
}
.contact-label {
color: #718096;
font-size: 0.9rem;
min-width: 60px;
}
.contact-value {
color: #2b6cb0;
text-decoration: none;
}
.contact-value:hover {
text-decoration: underline;
}
.general-plan {
margin-top: 40px;
}
.general-plan h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
}
.plan-image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}
.project-facts,
.project-contact {
padding: 20px;
}
} .filter-drawer-container {
position: relative;
max-width: 1400px;
margin: 0 auto;
} .modern-filter-layout {
position: relative !important;
}
.filter-button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.filter-button i {
margin-right: 8px; font-size: 16px;
} .close-drawer-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
} .apply-filters-button-drawer {
background-color: #28a745; color: white;
border: none;
padding: 10px 15px;
margin-top: 10px;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 5px;
justify-content: center;
width: 100%;
}
.clear-filters-button {
background-color: #f44336; color: white;
border: none;
padding: 10px 15px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.clear-filters-button i {
margin-right: 8px; font-size: 16px;
}
.clear-filters-button:hover {
background-color: #d32f2f; } .filter-drawer {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: #f8f9fa;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
transition: right 0.3s ease-in-out;
z-index: 9999;
overflow-y: auto;
padding: 20px;
} .filter-drawer.open {
right: 0;
} .filter-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
margin-top: 35px;
}  .filter-drawer-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-drawer-content input,
.filter-drawer-content select {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
} .apply-filters-button {
background-color: #28a745;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
} .project-detail-wrapper { margin: 0 auto; }
.project-hero-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.project_detail-type {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 5px 15px;
border-radius: 20px;
margin-bottom: 20px;
}
.project-detail-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px; }
.project-detail-meta > div {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
}
.project-hero-image {
position: relative;
}
.project-hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 10px;
}        .project-navigation a {
color: #666;
text-decoration: none;
padding: 10px 0;
position: relative;
white-space: nowrap;
}
.project-navigation a.active {
color: #1a365d;
font-weight: bold;
}
.project-navigation a.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #1a365d;
}
.project-navigation a:hover {
color:#052844
}
.project-facts {
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.project-facts h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
font-weight: 500;
}
.project-description {
color: #4a5568;
line-height: 1.6;
}
.description-content {
margin-bottom: 20px;
}
.description-content.truncated {
max-height: 120px;
overflow: hidden;
position: relative;
}
.description-content.truncated:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(transparent, #fff);
}
.read-more-btn {
background: none;
border: none;
color: #2b6cb0;
cursor: pointer;
font-weight: 500;
padding: 0;
font-size: 0.9rem;
}
.read-more-btn:hover {
text-decoration: underline;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-icon {
font-size: 1.2rem;
}
.contact-label {
color: #718096;
font-size: 0.9rem;
min-width: 60px;
}
.contact-value {
color: #2b6cb0;
text-decoration: none;
}
.contact-value:hover {
text-decoration: underline;
}
.general-plan {
margin-top: 40px;
}
.general-plan h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
}
.plan-image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}
.project-facts,
.project-contact {
padding: 20px;
}
}/*/*/.project-hero-swiper {
position: relative;
width: 55%;
height: 400px;
}
@media (max-width: 991px) {
.project-hero-swiper {
width: 100%;
}
}
.project-hero-swiper .swiper {
width: 100%;
height: 100%;
}
.project-hero-swiper .swiper-slide {
position: relative;
}
.project-hero-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.project-hero-swiper .swiper-pagination {
position: absolute;
bottom: 20px;
z-index: 10;
}
.project-hero-swiper .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.9);
opacity: 0.5;
}
.project-hero-swiper .swiper-pagination-bullet-active {
opacity: 1;
}/**/         .property-type{ border-radius: 5px;
color: #fff;
display: inline-flex;
font-weight: 500;
padding: 6px;
}
.units-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1rem;
}
.units-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.unit-card {
background: white;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.unit-card:hover {
transform: translateY(-4px);
}
.unit-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.unit-details {
padding: 1.5rem;
}
.unit-type {
font-size: 1.25rem;
font-weight: 600;
color: #052844;
margin-bottom: 1rem;
}
.unit-price {
font-size: 1.125rem;
font-weight: 600;
color: #052844;
margin-bottom: 0.5rem;
}
.unit-area {
color: #6b7280;
font-size: 0.875rem;
}
.location-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1rem;
}
.map-container {
width: 100%;
margin-top: 1.5rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.location-name {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: #4b5563;
font-size: 1rem;
}
.map-pin-icon {
width: 20px;
height: 20px; background-size: contain;
background-repeat: no-repeat;
}
.no-location {
padding: 2rem;
text-align: center;
background-color: #f3f4f6;
border-radius: 8px;
color: #6b7280;
} @media (max-width: 768px) {
.map-container iframe {
height: 350px;
}
}
.project-hero {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, #0b2b45, #fff 135.22%);
padding: 30px 70px;
color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
gap: 30px;
}
@media (max-width: 1199px) {
.project-hero{
padding: 30px 30px;
}
}
@media (max-width: 991px) {
.project-hero{
flex-direction: column;
padding: 30px 20px;
align-items: unset !important;
}
}
.project-hero-content {
flex: 1;
margin-right: 20px;
}
.property-type span,
.project_detail-type,
.project-detail-meta div {
margin: 10px 0;
font-size: 1.1em;
}
.project-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.location img {
width: 20px;
height: 20px;
margin-right: 8px;
}
.detail_price,
.detail_completion {
font-size: 1.2em;
background: rgba(0, 0, 0, 0.2);
padding: 5px 10px;
border-radius: 5px;
}         .image-count {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 1em;
} .nearby-places-section {
margin-top: 2rem;
margin-bottom: 40px;
padding: 1.5rem;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.nearby-places-section .section-title {
font-size: 1.75rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
text-align: left;
}
.nearby-places-list {
list-style: none;
padding: 0;
margin: 0;
}
.nearby-place-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid #ddd;
}
.nearby-place-item:last-child {
border-bottom: none;
}
.place-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
color: #333;
}
.place-icon {
width: 16px;
height: 16px;
}
.place-distance {
font-size: 1rem;
color: #666;
}
@media (max-width: 768px) {
.nearby-place-item {
flex-direction: column;
align-items: flex-start;
}
.place-name {
margin-bottom: 0.5rem;
}
.place-distance {
font-size: 0.9rem;
color: #666;
}
} .buildings-section { font-family: Arial, sans-serif;
}
.section-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.buildings-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
}
.building-card {
width: 250px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
.building-image img {
width: 100%;
height: 150px;
object-fit: cover;
background-color: #f9f9f9;
}
.building-info {
padding: 15px;
}
.building-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.building-description {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.building-properties {
font-size: 14px;
font-weight: bold;
color: #333;
}
.facilities-section {
padding: 40px;
background-color: #f9f9f9;
text-align: center;
}
.facilities-section h2 {
font-size: 28px;
margin-bottom: 20px;
color: #052844;
}
.facilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
justify-items: center;
align-items: start;
}
.facility-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.facility-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.facility-image { width: 245px;
height: 200px;
object-fit: cover;
}
@media (max-width: 920px) {
.facility-image{
width:320px;
}
}
@media (max-width: 750px) {
.facility-image{
width:260px;
}
}
@media (max-width: 650px) {
.facility-image{
width:320px;
}
}
@media (max-width: 350px) {
.facility-image{
width:250px;
}
}
.facility-name {
font-size: 18px;
font-weight: bold;
margin: 15px 0 5px;
color: #052844;
}
.facility-description {
font-size: 14px;
color: #555;
margin-bottom: 15px;
}
.features-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.feature-pill {
display: inline-block;
background-color: #f0f0f0;
color: #333;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.feature-pill:hover {
background-color: #e0e0e0;
cursor: pointer;
}                                                         .payment-plans-section {
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width : 1160px !important;
margin: 0 auto;
}
.payment-plans-section h2 {
color: #003047;
margin-bottom: 30px;
font-weight: 600;
}                            .payment-plan-tabs-container {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
overflow: hidden; }
.payment-tabs-swiper {
width: 100%;
overflow: visible; }
.payment-tabs-swiper .swiper-slide {
width: auto; }
.payment-plan-tab {
padding: 10px 20px;
cursor: pointer;
color: #666;
position: relative;
font-weight: 500;
white-space: nowrap; }
.payment-plan-tab.active {
color: #003047;
font-weight: 600;
}
.payment-plan-tab.active:after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #003047;
}
.original_payment_plane_section{
max-width: 1200px;
margin: 0 auto !important;
padding: 20px;
} @media (max-width: 768px) {
.payment-plan-tab {
padding: 10px 15px;
font-size: 14px;
}
} .payment-plan-content {
display: none;
padding: 20px 0;
}
.payment-plan-content.active {
display: block;
} .payment-timeline {
position: relative;
height: 120px;
margin: 30px 0 50px;
padding: 0 20px; } .timeline-wrapper {
display: flex;
width: 100%;
margin: 40px 0;
position: relative;
}
.timeline-line {
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 4px;
background-color: #e0e0e0;
z-index: 1;
} .timeline-wrapper .timeline-step {
flex: 1;
text-align: center;
padding: 0 4px;
position: relative;
z-index: 2;
} .timeline-step::before {
content: '';
display: block;
height: 40px;  border-radius: 4px;
margin-bottom: 15px;
} .timeline-step .dot {
width: 16px;
height: 16px;
background-color: #cfd8dc; border-radius: 50%;
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
} .timeline-step .label .percent {
font-weight: 600;
font-size: 18px;
color: #263238;
margin-bottom: 4px;
} .timeline-step .label .text {
font-size: 14px;
} .milestone-group {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 15px;
}
.milestone-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
cursor: pointer;
}
.milestone-header .info {
flex: 1;
}
.milestone-header .info strong {
display: block;
color: #263238;
font-size: 16px;
margin-bottom: 4px;
}
.milestone-header .info small {
color: #607D8B;
font-size: 12px;
}
.milestone-header .info .count {
color: #607D8B;
font-size: 14px;
margin-top: 4px;
}
.milestone-header .right {
display: flex;
align-items: center;
}
.milestone-header .right span {
font-weight: 600;
color: #263238;
margin-right: 10px;
}
.toggle-icon {
width: 18px;
height: 18px;
transition: transform 0.3s;
}
.milestone-header.active .toggle-icon {
transform: rotate(180deg);
}
.milestone-body {
padding: 0 0 15px;
}
.milestone-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed #e5e5e5;
}
.milestone-item:last-child {
border-bottom: none;
}
.milestone-item .title {
font-weight: 500;
color: #263238;
}
.milestone-item .date {
color: #607D8B;
font-size: 12px;
margin-top: 4px;
}
.fee-badge {
display: inline-block;
background-color: #F5F5F5;
color: #607D8B;
border-radius: 3px;
padding: 2px 6px;
font-size: 11px;
font-weight: 500;
}
@media (max-width: 768px) {
.timeline-step .label .text {
font-size: 12px;
white-space: normal;
word-break: break-word;
}
} .payment-details {
margin-top: 30px;
}
.payment-stage {
border-bottom: 1px solid #eeee;
padding: 15px 0;
}
.stage-header {
display: flex;
justify-content: space-between;
align-items: center; cursor: pointer;
}
.stage-header h4 {
flex: 1;
margin: 0;
color: #003047;
font-weight: 500;
}
.stage-payments {
margin-right: 20px;
color: #666;
font-size: 14px;
}
.stage-percentage {
font-weight: 600;
color: #003047;
font-size: 16px;
width: 80px;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
}
.stage-details {
padding: 15px 0;
display: none;
}
.stage-header.active + .stage-details {
display: block;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #eeee;
border-top: 1px dashed #eeee;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-row.fee-item {
color: #666;
}
.detail-label {
flex: 1;
font-weight: 600;
}
.detail-value {
font-weight: 500;
text-align: right;
padding-left: 15px;
} .payment-conditions {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
}
.payment-conditions h4 {
margin-top: 0;
margin-bottom: 15px;
color: #003047;
}
.condition-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.condition-label {
color: #666;
flex: 1;
}
.condition-value {
font-weight: 500;
text-align: right;
padding-left: 15px;
}
@media (max-width: 768px) {
.payment-timeline {
margin: 30px 0;
height: 150px;
} .timeline-label {
font-size: 12px;
max-width: 80px;
}
.stage-header {
flex-wrap: wrap;
}
.stage-payments {
order: 3;
width: 100%;
margin-top: 5px;
margin-right: 0;
}
.stage-percentage {
order: 2;
width: auto;
}
.detail-row, .condition-row {
flex-direction: column;
}
.detail-value, .condition-value {
text-align: left;
padding-left: 0;
padding-top: 5px;
}
}
.sales-executive-section {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
}
.sale_card {
flex: 1 1 calc(33.333% - 20px);
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 10px;
width: 300px;
max-width: 300px;
padding: 20px;
text-align: center;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.sale_card:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.profile-pic {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
}
.designation {
font-size: 14px;
color: #777;
margin-bottom: 10px;
}
.email {
font-size: 14px;
color: #007BFF;
text-decoration: none;
}
.email:hover {
text-decoration: underline;
}
.buttons {
display: flex;
justify-content: space-around;
margin: 15px 0;
}
.sale_btn {
border: none !important;
border-radius: 5px !important;
padding: 10px 20px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background-color 0.3s ease, color 0.3s ease !important;
}
.whatsapp {
background-color: #25D366 !important;
color: #fff !important;
}
.whatsapp:hover {
background-color: #1aa552 !important;
}
.call {
background-color: #DC3545 !important;
color: #fff !important;
}
.call:hover {
background-color: #b72b37 !important;
}
.languages {
display: flex;
justify-content: space-around;
}
.lang-btn {
border: 1px solid #ccc;
background-color: #f8f9fa;
border-radius: 5px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-btn:hover {
background-color: #007BFF;
color: #fff;
}
.form-container { margin: 40px auto;
padding: 20px;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-family: Arial, sans-serif;
}
.form-container h2 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-size: 14px;
margin-bottom: 5px;
color: #555;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
background-color: #f9f9f9;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: #888;
background-color: #fff;
}
.form-group textarea {
height: 100px;
resize: vertical;
}
.submit-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #0f172a;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
}
.submit-btn:hover {
background-color: #0d4672;
} .attachments-section {
margin: 40px 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.attachments-section h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.attachments-container {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.attachment-item {
display: flex;
align-items: center;
background: #f9f9f9;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.attachment-icon img {
width: 32px;
height: 32px;
margin-right: 10px;
}
.attachment-details {
display: flex;
align-items: center;
gap: 50px;
}
.attachment-title {
font-size: 16px;
color: #333;
}
.attachment-download img {
width: 24px;
height: 24px;
cursor: pointer;
}
.attachment-download:hover img {
opacity: 0.8;
}
.form-section{
padding: 20px;
}
.about-section{
margin-bottom: 45px;
}
.submit-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.7;
}
#form_alert {
display: none;
margin-top: 15px;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
color: #fff;
background-color: #28a745; text-align: center;
}
#form_alert.error {
background-color: #dc3545; }
@media (max-width: 768px) {
.project-hero {
flex-direction: column;
}
.project-hero-swiper{
width: 100%;
}
}
.last_updated{
padding-top: 10px;
padding-bottom: 10px;
}
.image-count-label {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
z-index: 10;
text-align: center;
}
.contact-item{
word-break: break-word;
}
.max-wdh{
max-width: 1200px !important;
margin: 0 auto !important;
}
.projects-archive-wrapper{
max-width: 1400px;
margin: 0 auto;
width: 100%;
} .side-map-layout .split-left .projects-archive-wrapper,
#layout-container.side-map-layout .split-left .projects-archive-wrapper {
max-width: 100% !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
} .top-map-layout .projects-archive-wrapper,
#layout-container.top-map-layout .projects-archive-wrapper {
max-width: 1400px !important;
margin: 0 auto !important;
} .top-map-layout .top-map-wrapper {
max-width: 1400px;
margin: 40px auto 0;
width: 100%;
} #rem_plugin .no-projects-found {
grid-column: 1 / -1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.main-projects-header {
text-align: center;
margin-bottom: 20px;
}
.project-filters {
display: flex;
justify-content: center;
margin-bottom: 10px;
gap: 10px;
flex-wrap: wrap;
padding: 0px 35px 0px 35px;
row-gap: 25px;
}
.main-filter-button {
padding: 10px 20px;
background-color: #f5f5f5;
border: 1px solid #e2e8f0;
border-radius: var(--rem-filter-radius, 20px);
cursor: pointer;
transition: all 0.3s ease;
}
.main-filter-button.active {
background-color: var(--rem-primary, #28a745);
color: var(--rem-primary-text, #fff);
border-color: var(--rem-primary, #28a745);
font-weight: bold;
}
.main-filter-button:hover {
background-color: var(--rem-primary-hover, var(--rem-primary, #28a745));
color: var(--rem-primary-text, #fff);
border-color: var(--rem-primary-hover, var(--rem-primary, #28a745));
}
.projects-header p{
font-weight: 600;
}
.load_project{
text-align: center;
padding: 20px;
}
.projects-filter-form{
padding: 0 36px 0 36px;
}
.map-top-enabled{
margin-top: -34px;
position: relative;
z-index: 2;
}
.filter-div{
display: flex;
gap: 5px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
} .modern-filter-layout .properties-filter-form {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
margin-bottom: 30px;
}
.modern-filter-layout .filter-div {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: end;
margin-bottom: 20px;
}
.modern-filter-layout .search_filter_input {
flex: 2;
min-width: 250px;
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.modern-filter-layout .search_filter_input:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .category_filter_select {
flex: 1;
min-width: 180px;
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
background: #f8f9fa;
transition: all 0.3s ease;
cursor: pointer;
}
.modern-filter-layout .category_filter_select:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .filter_adv_btn {
flex: 0 0 auto;
padding: 12px 24px;
background: var(--rem-primary, #ce853b);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.modern-filter-layout .filter_adv_btn:hover {
background: var(--rem-primary-dark, #b8732e);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--rem-primary-shadow, rgba(206, 133, 59, 0.3));
}
.modern-filter-layout .filter_adv_btn img {
width: 18px;
height: 18px;
} .modern-filter-layout .filter-drawer-header,
.modern-filter-layout .mobile-filter-header {
background: linear-gradient(135deg, var(--rem-primary, #ce853b) 0%, var(--rem-primary-dark, #b8732e) 100%) !important;
color: white !important;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modern-filter-layout .filter-drawer-header h2 {
margin: 0;
font-size: 24px;
font-weight: 700;
}
.modern-filter-layout .close-drawer-button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modern-filter-layout .close-drawer-button:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.modern-filter-layout .filter-drawer-content {
padding: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.modern-filter-layout .filter-drawer-content .filters_fields {
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
background: #f8f9fa;
transition: all 0.3s ease;
width: 100%;
}
.modern-filter-layout .filter-drawer-content .filters_fields:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .clear-filters-button {
grid-column: 1 / -1;
padding: 12px 24px;
background: #dc3545;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
justify-self: center;
min-width: 200px;
}
.modern-filter-layout .clear-filters-button:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
} .modern-filter-layout .filter-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modern-filter-layout .filter-backdrop.active {
opacity: 1;
visibility: visible;
} @media (max-width: 768px) {
.modern-filter-layout .filter-drawer {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
z-index: 9999;
margin-top: 0;
border-radius: 0;
max-height: none;
opacity: 1;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-filter-layout .filter-drawer.active {
right: 0;
transform: translateX(0);
}
.modern-filter-layout .filter-drawer-header {
padding: 20px;
position: sticky;
top: 0;
z-index: 1;
}
.modern-filter-layout .filter-drawer-content {
padding: 20px;
height: auto;
overflow-y: auto;
}
} @media (max-width: 768px) {
.modern-filter-layout .filter-div {
flex-direction: column;
align-items: stretch;
}
.modern-filter-layout .search_filter_input,
.modern-filter-layout .category_filter_select {
flex: none;
width: 100%;
min-width: auto;
}
.modern-filter-layout .filter_adv_btn {
width: 100%;
justify-content: center;
}
.modern-filter-layout .filter-drawer-content {
grid-template-columns: 1fr;
padding: 15px;
gap: 4px;
flex: 1;
overflow-y: auto;
height: calc(100vh - 60px);
}
.modern-filter-layout .filter-drawer-header {
padding: 15px 20px;
}
.modern-filter-layout .filter-drawer-header h2 {
font-size: 20px;
} .modern-filter-layout .filter-drawer-content .filters_fields {
padding: 8px 12px !important;
font-size: 14px !important;
border-radius: 4px !important;
margin: 6px 0px !important;
height: 36px !important;
min-height: 36px !important;
line-height: 1.2 !important;
} .modern-filter-layout .filter-drawer-content label {
font-size: 13px !important;
font-weight: 500 !important;
margin-bottom: 4px !important;
color: #495057 !important;
} .modern-filter-layout .filter-drawer-content .filter-section {
background: #f8f9fa !important;
border: 1px solid #e9ecef !important;
border-radius: 6px !important;
padding: 6px !important;
margin-bottom: 2px !important;
} .modern-filter-layout .filter-drawer-content .filter-section-title {
font-size: 14px !important;
font-weight: 600 !important;
color: #495057 !important;
margin-bottom: 8px !important;
padding-bottom: 4px !important;
border-bottom: 1px solid #dee2e6 !important;
} .modern-filter-layout .filter-drawer-content .apply-filters-button,
.modern-filter-layout .filter-drawer-content .clear-filters-button {
padding: 8px 16px !important;
font-size: 14px !important;
border-radius: 4px !important;
margin: 4px 0 !important;
height: 36px !important;
min-height: 36px !important;
line-height: 1.2 !important;
} .modern-filter-layout .filter-drawer-content .filters_fields::placeholder {
font-size: 13px !important;
color: #6c757d !important;
} .modern-filter-layout .filter-drawer-content .filters_fields option {
font-size: 14px !important;
padding: 4px !important;
}
} @media (max-width: 480px) {
.modern-filter-layout .modern-filter-drawer {
width: 95% !important;
max-width: 320px !important;
}
.modern-filter-layout .filter-drawer-content {
padding: 8px !important;
gap: 1px !important;
}
.modern-filter-layout .filter-drawer-content .filters_fields {
padding: 4px 8px !important;
font-size: 13px !important;
height: 48px !important;
min-height: 48px !important;
line-height: 1.2 !important;
}
.modern-filter-layout .filter-drawer-content .apply-filters-button,
.modern-filter-layout .filter-drawer-content .clear-filters-button {
padding: 6px 12px !important;
font-size: 13px !important;
height: 32px !important;
min-height: 32px !important;
line-height: 1.2 !important;
}
.modern-filter-layout .mobile-filter-header {
padding: 12px 15px !important;
}
.modern-filter-layout .mobile-filter-header h2 {
font-size: 16px !important;
}
} .classic-filter-layout .search_filter_input{
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.classic-filter-layout .category_filter_select{
width: 30%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.classic-filter-layout .filter_adv_btn{
width: 15%;
padding: 10px;
} .modern-filter-layout .filter-drawer {
display: block;
}
.dark-theme #rem_plugin .project-item{
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark-theme #rem_plugin .project-info{
background: #111010 !important;
}
.dark-theme #rem_plugin .project-list-title{
color: #fff !important;
}
.dark-theme #rem_plugin .project-location{
color: #fff !important;
}
.dark-theme #rem_plugin .meta-label{
color: #fff !important;
}
.dark-theme #rem_plugin .meta-value{
color:#fff !important;
}
.dark-theme #rem_plugin .developer-info{
color:#fff !important;
}
.developer-description {
color: #4b5563;
margin-bottom: 1rem;
line-height: 1.5;
overflow: hidden;
}
.developer-description p {
margin: 0;
}
.developers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.developer-card {
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.2s;
overflow: hidden;
}
.developer-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.developer-image {
width: 100%;
height: 200px;
overflow: hidden;
background-color: #f5f5f5;
}
.developer-logo {
width: 100%;
height: 100%;
object-fit: cover;
}
.developer-logo-placeholder {
width: 100%;
height: 100%;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.developer-list-info {
padding: 20px;
}
.developer-name {
margin: 0 0 15px 0;
font-size: 1.5em;
color: #333;
}
.developer-description {
color: #666;
margin-bottom: 20px;
line-height: 1.5;
font-size: 0.9em;
}
.view-projects-btn {
display: inline-block;
padding: 12px 24px;
background-color: #007bff;
color: white !important;
text-decoration: none !important;
border-radius: 6px;
transition: all 0.2s;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.view-projects-btn:hover {
background-color: #0056b3;
color: white;
transform: translateY(-2px);
}
.developers-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 2rem;
list-style: none; padding: 0; }
.developers-pagination li {
display: inline-flex; }
.developers-pagination a,
.developers-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;  border: 1px solid #ddd;
border-radius: 6px;
background-color: #f1f1f1;
font-size: 16px;
color: #333 !important;
text-decoration: none !important;
transition: background-color 0.2s, color 0.2s;
}
.developers-pagination .current {
background-color: #007bff;
color: #fff !important;
border-color: #007bff;
font-weight: bold;
}
.developers-pagination a:hover {
background-color: #007bff;
color: #333 !important;
}
#rem_plugin .page-numbers{
border: unset;
}
.initial-loading {
text-align: center;
padding: 40px;
font-size: 24px;
color: #333;
font-weight: 500;
} .loading-dots {
display: inline-block;
animation: loadingDots 1.5s infinite;
width: 24px;
} .error-message {
text-align: center;
padding: 20px;
color: #721c24;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
margin: 20px 0;
} @keyframes loadingDots {
0% { content: '.'; }
33% { content: '..'; }
66% { content: '...'; }
100% { content: '.'; }
} .developers-content.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.developers-content.loading:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .developers-search {
position: relative;
max-width: 600px;
margin: 0 auto 40px;
} .search-input {
width: 100%;
padding: 15px 45px 15px 20px;
font-size: 16px;
border: 1px solid #e0e0e0;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
outline: none;
}
.search-input:focus {
border-color: #4a90e2;
box-shadow: 0 3px 8px rgba(74, 144, 226, 0.1);
}
.search-input::placeholder {
color: #999;
} .search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #757575;
pointer-events: none;
} @media (max-width: 768px) {
.developers-search {
max-width: 100%;
padding: 0 15px;
}
.search-input {
padding: 12px 40px 12px 15px;
font-size: 15px;
}
}
@media (max-width: 768px) {
.filter-div{
flex-direction: column;
}
.search_filter_input{
width: 100%;
}
.category_filter_select{
width: 100%;
}
.filter_adv_btn{
width: 100%;
}
.projects-filter-form{
padding: 0 16px 0 16px;
}
}
.developers-archive-wrapper{
max-width: 1400px;
} .modern-filter-layout .properties-filter-form {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
margin-bottom: 30px;
}
.modern-filter-layout .filter-div {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: end;
margin-bottom: 20px;
}
.modern-filter-layout .search_filter_input {
flex: 2;
min-width: 250px;
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.modern-filter-layout .search_filter_input:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .category_filter_select {
flex: 1;
min-width: 180px;
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
background: #f8f9fa;
transition: all 0.3s ease;
cursor: pointer;
}
.modern-filter-layout .category_filter_select:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .filter_adv_btn {
flex: 0 0 auto;
padding: 12px 24px;
background: var(--rem-primary, #ce853b);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.modern-filter-layout .filter_adv_btn:hover {
background: var(--rem-primary-dark, #b8732e);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--rem-primary-shadow, rgba(206, 133, 59, 0.3));
}
.modern-filter-layout .filter_adv_btn img {
width: 18px;
height: 18px;
} .modern-filter-layout .modern-filter-drawer {
background: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #e1e5e9 !important;
margin-top: 15px !important;
padding: 12px !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important; top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
z-index: 1000 !important; overflow: visible !important;
transition: none !important;
} @media (max-width: 1024px) {
.modern-filter-layout .modern-filter-drawer {
position: fixed !important;
top: 0 !important;
right: -100% !important;
left: auto !important;
width: 88% !important;
max-width: 360px !important;
height: 100vh !important;
margin-top: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: -4px 0 25px rgba(0, 0, 0, 0.25) !important;
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow-y: auto !important;
z-index: 999999 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
}
.modern-filter-layout .modern-filter-drawer:not(.active) {
right: -100% !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.modern-filter-layout .modern-filter-drawer.active {
right: 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
animation: none !important;
}
}
@media (min-width: 1025px) {
.modern-filter-layout .modern-filter-drawer.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
animation: modernSlideDown 0.3s ease !important;
}
} @media (max-width: 1024px) {
.modern-filter-layout .filter-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 999998 !important;
display: none !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
.modern-filter-layout .filter-backdrop.active {
display: block !important;
opacity: 1 !important;
}
} .modern-filter-layout .mobile-filter-header {
display: none;
}
@media (max-width: 1024px) {
.modern-filter-layout .mobile-filter-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background: var(--rem-primary, #007bff) !important;
color: white !important;
padding: 16px 20px !important;
margin: 0 !important;
border-radius: 0 !important;
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
flex-shrink: 0 !important;
}
.modern-filter-layout .mobile-filter-header h2 {
margin: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #ffffff !important;
}
.modern-filter-layout .mobile-filter-close {
background: rgba(255, 255, 255, 0.2) !important;
border: none !important;
color: white !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
font-size: 20px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 1000 !important;
position: relative !important;
flex-shrink: 0 !important;
outline: none !important;
}
.modern-filter-layout .mobile-filter-close:hover {
background: rgba(255, 255, 255, 0.35) !important;
transform: scale(1.08) !important;
}
.modern-filter-layout .mobile-filter-close:active {
background: rgba(255, 255, 255, 0.4) !important;
transform: scale(0.95) !important;
}
} .modern-filter-layout .properties-filter-form,
.modern-filter-layout .projects-filter-form {
position: relative !important;
} @media (max-width: 1024px) {
.modern-filter-layout .properties-filter-form,
.modern-filter-layout .projects-filter-form {
margin-bottom: 15px !important;
}
.modern-filter-layout .filter-div {
flex-direction: column !important;
gap: 3px !important;
}
.modern-filter-layout .search_filter_input,
.modern-filter-layout .category_filter_select {
width: 100% !important;
padding: 8px 12px !important;
font-size: 14px !important;
border-radius: 6px !important;
height: 36px !important;
min-height: 36px !important;
line-height: 1.2 !important;
}
.modern-filter-layout .filter_adv_btn {
width: 100% !important;
padding: 8px 12px !important;
font-size: 14px !important;
border-radius: 6px !important;
height: 36px !important;
min-height: 36px !important;
line-height: 1.2 !important;
}
}
.modern-filter-layout .modern-close-btn {
background: #f8f9fa;
border: 1px solid #e9ecef;
color: #6c757d;
width: 28px;
height: 28px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.modern-filter-layout .modern-close-btn:hover {
background: #e9ecef;
color: #495057;
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
@keyframes modernSlideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .modern-filter-layout .filter-actions {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
width: 100%;
} .modern-filter-layout .filter-actions .clear-filters-button {
margin-left: auto;
} .modern-filter-layout .clear-filters-button {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
min-width: 80px !important;
position: relative !important;
overflow: hidden !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
.modern-filter-layout .clear-filters-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.modern-filter-layout .clear-filters-button:hover::before {
left: 100%;
}
.modern-filter-layout .clear-filters-button:hover {
background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}
.modern-filter-layout .clear-filters-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modern-filter-layout .filter-drawer-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modern-filter-layout .filter-drawer-header h2 {
margin: 0;
font-size: 24px;
font-weight: 700;
}
.modern-filter-layout .close-drawer-button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modern-filter-layout .close-drawer-button:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.modern-filter-layout .filter-drawer-content {
padding: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.modern-filter-layout .filter-drawer-content .filters_fields {
padding: 10px 14px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
background: #f8f9fa;
transition: all 0.3s ease;
width: 100%;
}
.modern-filter-layout .filter-drawer-content .filters_fields:focus {
border-color: #007bff;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
outline: none;
}
.modern-filter-layout .clear-filters-button {
grid-column: 1 / -1;
padding: 12px 24px;
background: #dc3545;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
justify-self: center;
min-width: 200px;
}
.modern-filter-layout .clear-filters-button:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
} .modern-filter-layout .filter-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modern-filter-layout .filter-backdrop.active {
opacity: 1;
visibility: visible;
} @media (max-width: 768px) {
.modern-filter-layout .filter-drawer {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
z-index: 9999;
margin-top: 0;
border-radius: 0;
max-height: none;
opacity: 1;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-filter-layout .filter-drawer.active {
right: 0;
transform: translateX(0);
}
.modern-filter-layout .filter-drawer-header {
padding: 20px;
position: sticky;
top: 0;
z-index: 1;
}
.modern-filter-layout .filter-drawer-content {
padding: 20px;
height: auto;
overflow-y: auto;
}
} .classic-filter-layout .search_filter_input{
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.classic-filter-layout .category_filter_select{
width: 30%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.classic-filter-layout .filter_adv_btn{
width: 15%;
padding: 10px;
} #rem_plugin #properties-list.projects-list-layout,
#rem_plugin .properties-grid.projects-list-layout,
#rem_plugin .projects-grid.projects-list-layout,
.rem_plugin .projects-grid.projects-list-layout,
#layout-container.filter-style-list #properties-list,
#layout-container.filter-style-list .properties-grid,
#layout-container.filter-style-list .projects-grid,
#rem_plugin.filter-style-list #properties-list,
#rem_plugin.filter-style-list .properties-grid,
#rem_plugin.filter-style-list .projects-grid,
.side-map-layout .split-left #properties-list.projects-list-layout,
.side-map-layout.filter-style-list .split-left #properties-list,
.top-map-layout #properties-list.projects-list-layout,
.top-map-layout.filter-style-list #properties-list,
.top-map-layout.filter-style-list .projects-grid,
.properties-grid.projects-list-layout,
#properties-list.projects-list-layout,
.projects-grid.projects-list-layout {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
grid-template-columns: none !important;
padding: 10px 0 30px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
} .rem-luxury-list-card {
background: #ffffff !important;
border: 1px solid #E2E8F0 !important;
border-radius: 16px !important;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
display: flex !important;
flex-direction: row !important;
overflow: hidden !important;
position: relative !important;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
text-decoration: none !important;
color: #0F172A !important;
width: 100% !important;
box-sizing: border-box !important;
}
.rem-luxury-list-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 35px -6px rgba(15, 23, 42, 0.12), 0 8px 16px -4px var(--rem-primary-alpha-20, rgba(197, 160, 89, 0.18)) !important;
border-color: var(--rem-primary-alpha-50, rgba(197, 160, 89, 0.5)) !important;
} .rem-luxury-list-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(135deg, var(--rem-primary-light, #DFBA73) 0%, var(--rem-primary, #C5A059) 50%, var(--rem-primary-dark, #9E7B35) 100%);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 10;
}
.rem-luxury-list-card:hover::before {
opacity: 1;
} .rem-luxury-list-card .card-media-box {
position: relative !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
align-self: stretch !important;
overflow: hidden !important;
background: #0F172A !important;
flex-shrink: 0 !important;
border-radius: 16px 0 0 16px !important;
}
.rem-luxury-list-card .card-media-box .media-link {
display: block !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
}
.rem-luxury-list-card .card-media-box img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
border-radius: 0 !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rem-luxury-list-card:hover .card-media-box img {
transform: scale(1.06) !important;
}
.rem-luxury-list-card .card-media-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.65) 100%) !important;
pointer-events: none !important;
} .rem-luxury-list-card .badge-status {
position: absolute !important;
top: 14px !important;
left: 14px !important;
z-index: 5 !important;
background: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
color: #FFFFFF !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 5px 12px !important;
border-radius: 9999px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
line-height: 1.2 !important;
}
.rem-luxury-list-card .status-dot {
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #10B981 !important;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
display: inline-block !important;
}
.rem-luxury-list-card .status-dot.gold {
background: #D4AF37 !important;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4) !important;
}
.rem-luxury-list-card .badge-handover-pill {
position: absolute !important;
bottom: 14px !important;
left: 14px !important;
z-index: 5 !important;
background: rgba(15, 23, 42, 0.82) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
color: #F1F5F9 !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 4px 10px !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
line-height: 1.2 !important;
}
.rem-luxury-list-card .badge-distress-pill {
position: absolute !important;
bottom: 14px !important;
left: 14px !important;
z-index: 5 !important;
background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
color: #FFFFFF !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
padding: 5px 12px !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
line-height: 1.2 !important;
}
.rem-luxury-list-card .badge-status.rent_out .status-dot,
.rem-luxury-list-card .badge-status.rental .status-dot {
background: #38BDF8 !important;
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
} .rem-luxury-list-card .card-info-box {
flex: 1 !important;
padding: 22px 26px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-width: 0 !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
.rem-luxury-list-card .info-top-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 8px !important;
gap: 12px !important;
}
.rem-luxury-list-card .developer-badge-wrap {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.rem-luxury-list-card .developer-name {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--rem-primary, #C5A059) !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.rem-luxury-list-card .property-category-tag {
font-size: 12px !important;
font-weight: 600 !important;
color: #64748B !important;
background: #F8FAFC !important;
border: 1px solid #E2E8F0 !important;
padding: 3px 10px !important;
border-radius: 9999px !important;
white-space: nowrap !important;
}
.rem-luxury-list-card .info-title-row {
margin-bottom: 12px !important;
}
.rem-luxury-list-card .project-headline-title {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
color: #0F172A !important;
line-height: 1.3 !important;
margin: 0 0 6px 0 !important;
transition: color 0.2s ease !important;
}
.rem-luxury-list-card:hover .project-headline-title {
color: var(--rem-primary, #C5A059) !important;
}
.rem-luxury-list-card .project-location-link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: #64748B !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
.rem-luxury-list-card .project-location-link img {
flex-shrink: 0 !important;
width: 15px !important;
height: 15px !important;
} .rem-luxury-list-card .info-specs-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
padding: 12px 14px !important;
background: #F8FAFC !important;
border: 1px solid #E2E8F0 !important;
border-radius: 12px !important;
margin-bottom: 16px !important;
box-sizing: border-box !important;
}
.rem-luxury-list-card .spec-item {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.rem-luxury-list-card .spec-label {
font-size: 10.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: #94A3B8 !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.rem-luxury-list-card .spec-value {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #0F172A !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
} .rem-luxury-list-card .info-footer-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-top: 14px !important;
border-top: 1px solid #F1F5F9 !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
.rem-luxury-list-card .price-section {
display: flex !important;
flex-direction: column !important;
}
.rem-luxury-list-card .price-label {
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: #94A3B8 !important;
margin-bottom: 2px !important;
}
.rem-luxury-list-card .price-value {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
color: #0F172A !important;
line-height: 1 !important;
}
.rem-luxury-list-card .actions-dock {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.rem-luxury-list-card .action-circle-icon {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: #F8FAFC !important;
border: 1px solid #E2E8F0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #0F172A !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
}
.rem-luxury-list-card .action-circle-icon:hover {
background: #ffffff !important;
border-color: var(--rem-primary, #C5A059) !important;
color: var(--rem-primary, #C5A059) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
.rem-luxury-list-card .action-circle-icon.whatsapp {
color: #25D366 !important;
}
.rem-luxury-list-card .action-circle-icon.whatsapp:hover {
background: #25D366 !important;
border-color: #25D366 !important;
color: #FFFFFF !important;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
}
.rem-luxury-list-card .btn-view-project {
background: var(--rem-primary, #0F172A) !important;
color: #FFFFFF !important;
padding: 9px 18px !important;
border-radius: 9999px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
border: 1px solid transparent !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.rem-luxury-list-card .btn-view-project svg {
transition: transform 0.25s ease !important;
}
.rem-luxury-list-card:hover .btn-view-project {
background: var(--rem-primary-dark, #C5A059) !important;
color: #FFFFFF !important;
box-shadow: 0 4px 14px var(--rem-primary-shadow, rgba(197, 160, 89, 0.4)) !important;
}
.rem-luxury-list-card:hover .btn-view-project svg {
transform: translateX(3px) !important;
} .side-map-layout .rem-luxury-list-card .card-media-box {
width: 290px !important;
min-width: 290px !important;
max-width: 290px !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
align-self: stretch !important;
}
@media (max-width: 850px) {
.rem-luxury-list-card {
flex-direction: column !important;
}
.rem-luxury-list-card .card-media-box,
.side-map-layout .rem-luxury-list-card .card-media-box {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 240px !important;
min-height: 240px !important;
max-height: 240px !important;
align-self: auto !important;
border-radius: 16px 16px 0 0 !important;
position: relative !important;
}
.rem-luxury-list-card .card-info-box {
padding: 18px !important;
}
.rem-luxury-list-card .project-headline-title {
font-size: 19px !important;
}
} @media only screen and (max-width: 1024px) {
.projects-list-layout,
.filter-style-list .split-left,
.filter-style-list .projects-archive-wrapper,
.filter-style-list .properties-archive-wrapper,
.filter-style-list #projects-list,
.filter-style-list #properties-list,
#projects-list.projects-list-layout,
#properties-list.projects-list-layout,
#custom-projects-container.projects-list-layout,
#layout-container.filter-style-list {
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
width: 100% !important;
}
.projects-list-layout .rem-luxury-list-card,
.filter-style-list .rem-luxury-list-card {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
} .offplan-listing-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding: 12px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
flex-wrap: wrap;
gap: 14px;
box-sizing: border-box;
width: 100%;
}
.offplan-toolbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.offplan-count-badge {
font-size: 14px;
font-weight: 600;
color: #475569;
letter-spacing: -0.1px;
}
.offplan-toolbar-right {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.offplan-per-page-wrap {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: #64748b;
}
.offplan-per-page-wrap label {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #475569;
}
.offplan-per-page-select {
padding: 7px 12px;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #ffffff;
font-size: 13px;
font-weight: 600;
color: #1e293b;
cursor: pointer;
outline: none;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.offplan-per-page-select:hover,
.offplan-per-page-select:focus {
border-color: var(--rem-primary, #28a745);
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}
.offplan-view-switch-group {
display: inline-flex;
background: #f1f5f9;
padding: 4px;
border-radius: 10px;
gap: 4px;
border: 1px solid #e2e8f0;
}
.offplan-view-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: none;
background: transparent;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.offplan-view-btn svg {
flex-shrink: 0;
stroke: currentColor;
}
.offplan-view-btn:hover {
color: #0f172a;
background: rgba(255, 255, 255, 0.7);
}
.offplan-view-btn.active {
background: #ffffff !important;
color: var(--rem-primary, #28a745) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} .projects-cards-layout {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 22px !important;
width: 100% !important;
margin: 0 0 28px 0 !important;
box-sizing: border-box !important;
} .side-map-layout .split-left .projects-cards-layout {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
@media (min-width: 1400px) {
.hide-map-layout .projects-cards-layout,
.top-map-layout .projects-cards-layout {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 1280px) and (min-width: 992px) {
.projects-cards-layout {
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
}
}
@media (max-width: 991px) and (min-width: 640px) {
.projects-cards-layout {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
}
@media (max-width: 639px) {
.projects-cards-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.offplan-listing-toolbar {
flex-direction: column;
align-items: stretch;
}
.offplan-toolbar-right {
justify-content: space-between;
}
} .projects-cards-layout .luxury-project-card {
position: relative;
width: 100%;
min-height: 520px;
height: 520px;
border-radius: 16px;
overflow: hidden;
background: #0F172A;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.projects-cards-layout .luxury-project-card:hover {
transform: translateY(-8px);
border-color: var(--offplan-cards-accent-gold, #C5A059);
box-shadow: 0 22px 45px -8px rgba(15, 23, 42, 0.18), 0 0 20px rgba(197, 160, 89, 0.25);
}
.projects-cards-layout .card-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 1;
}
.projects-cards-layout .luxury-project-card:hover .card-bg-img {
transform: scale(1.06);
}
.projects-cards-layout .card-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, 
rgba(0, 0, 0, 0.35) 0%, 
rgba(0, 0, 0, 0.05) 28%, 
rgba(15, 23, 42, 0.55) 52%, 
rgba(10, 16, 30, 0.90) 78%, 
rgba(5, 8, 18, 0.98) 100%
);
z-index: 2;
pointer-events: none;
}
.projects-cards-layout .card-sheen {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 10;
transition: background 0.3s ease;
}
.projects-cards-layout .luxury-project-card:hover .card-sheen {
background: linear-gradient(135deg, var(--offplan-cards-gradient-start, #E2C792) 0%, var(--offplan-cards-accent-gold, #C5A059) 50%, var(--offplan-cards-gradient-end, #9E7D3B) 100%);
}
.projects-cards-layout .card-top-dock {
position: relative;
z-index: 9;
padding: 16px 16px 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.projects-cards-layout .badges-left {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.projects-cards-layout .badge-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.projects-cards-layout .badge-status {
background: var(--offplan-cards-badge-status-bg, #C5A059);
color: var(--offplan-cards-badge-status-text, #FFFFFF);
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.35);
}
.projects-cards-layout .badge-delivery {
background: var(--offplan-cards-badge-delivery-bg, #FFFFFF);
color: var(--offplan-cards-badge-delivery-text, #0F172A);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.projects-cards-layout .card-bottom-dock {
position: relative;
z-index: 9;
padding: 16px 18px 18px 18px;
box-sizing: border-box;
}
.projects-cards-layout .card-project-title {
font-family: inherit;
font-size: 19px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.2px;
margin: 0 0 8px 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.projects-cards-layout .card-project-title a {
color: var(--offplan-cards-title-color, #FFFFFF) !important;
text-decoration: none !important;
transition: color 0.25s ease;
}
.projects-cards-layout .card-project-title a:hover {
color: var(--offplan-cards-accent-gold, #DFC287) !important;
}
.projects-cards-layout .meta-row {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 500;
color: var(--offplan-cards-meta-color, #E2E8F0);
margin-bottom: 5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.projects-cards-layout .meta-row svg {
flex-shrink: 0;
color: var(--offplan-cards-accent-gold, #DFC287);
}
.projects-cards-layout .price-section {
margin-top: 10px;
margin-bottom: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.projects-cards-layout .price-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--offplan-cards-price-label-color, #DFC287);
}
.projects-cards-layout .price-value {
font-family: inherit;
font-size: 20px;
font-weight: 800;
color: var(--offplan-cards-price-val-color, #FFFFFF);
letter-spacing: -0.2px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.projects-cards-layout .card-actions-dock {
display: flex;
align-items: center;
gap: 8px;
}
.projects-cards-layout .action-circle-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--offplan-cards-action-circle-bg, rgba(255, 255, 255, 0.15));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--offplan-cards-action-circle-color, #FFFFFF) !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
flex-shrink: 0;
}
.projects-cards-layout .action-circle-btn:hover {
background: #FFFFFF;
color: #0F172A !important;
border-color: #FFFFFF;
transform: translateY(-2px) scale(1.08);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.projects-cards-layout .action-circle-btn.phone-btn:hover {
background: #10B981 !important;
color: #FFFFFF !important;
border-color: #10B981 !important;
}
.projects-cards-layout .action-circle-btn.whatsapp-btn:hover {
background: #25D366 !important;
color: #FFFFFF !important;
border-color: #25D366 !important;
}
.projects-cards-layout .action-circle-btn.email-btn:hover {
background: #0284C7 !important;
color: #FFFFFF !important;
border-color: #0284C7 !important;
}
.projects-cards-layout .btn-view-details {
flex: 1;
background: var(--rem-primary, #28a745);
color: #FFFFFF !important;
border: none;
padding: 10px 14px;
border-radius: 30px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
text-decoration: none !important;
}
.projects-cards-layout .btn-view-details:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
filter: brightness(1.1);
}