/* ------------------------------------------------Login-CSS Start------------------------------------- */
@import url('style.css');
.slogan-container {
display: flex;
justify-content: center;
align-items: center;
}
.mobile-bottom-banner {
z-index: 1050; /* above most elements but below modals */
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.d-none-mobile {
display: none !important;
}
}
#dynamicHeader {
transition: transform 0.8s ease, opacity 0.8s ease;
white-space: nowrap;
font-weight: 700; /* optional: bolder */
color: white; /* ensure text is white */
font-size: 2.5rem; /* adjust size */
}
.slide-out {
transform: translateX(-100%);
opacity: 0;
}
.slide-in {
transform: translateX(0);
opacity: 1;
}
.off-right {
transform: translateX(100%);
opacity: 0;
}
/* ---------------------- Google button styling -------------------- */
.gsi-material-button {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-appearance: none;
background-color: WHITE;
background-image: none;
border: 1px solid #747775;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #1f1f1f;
cursor: pointer;
font-family: 'Roboto', arial, sans-serif;
font-size: 14px;
height: 40px;
letter-spacing: 0.25px;
outline: none;
overflow: hidden;
padding: 0 12px;
position: relative;
text-align: center;
-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
transition: background-color .218s, border-color .218s, box-shadow .218s;
vertical-align: middle;
white-space: nowrap;
width: auto;
max-width: 400px;
min-width: min-content;
}
.gsi-material-button .gsi-material-button-icon {
height: 20px;
margin-right: 12px;
min-width: 20px;
width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
-webkit-align-items: center;
align-items: center;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
justify-content: space-between;
position: relative;
width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
-webkit-flex-grow: 1;
flex-grow: 1;
font-family: 'Roboto', arial, sans-serif;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
-webkit-transition: opacity .218s;
transition: opacity .218s;
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.gsi-material-button:disabled {
cursor: default;
background-color: #ffffff61;
border-color: #1f1f1f1f;
}
.gsi-material-button:disabled .gsi-material-button-contents {
opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
background-color: #303030;
opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
background-color: #303030;
opacity: 8%;
}
.map-action-btn {
background: #fff;
color: #333;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease-in-out;
}
.map-action-btn:hover {
background: #f4f4f4;
}
.map-action-btn i {
font-size: 14px;
}
/********** FB Button ***********/
.facebook-button {
background-color: #1877F2;
border: none;
border-radius: 4px;
color: white;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
padding: 10px 16px;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.facebook-button-icon {
margin-right: 12px;
}
.facebook-button:hover {
background-color: #166fe5;
}
.facebook-style {
color: #000; /* makes icon black */
background-color: white;
border: 1px solid #747775;
}
.facebook-style:hover .gsi-material-button-state {
background-color: #ffffff;
opacity: 8%;
}
.facebook-style:disabled {
background-color: #1877f261;
border-color: #ffffff1f;
}
/***************Apple Btn *************/
.apple-style {
background-color: #ffffff; /* white button */
border: 1px solid #747775;
color: #000000; /* makes logo black via `currentColor` */
}
.apple-style:hover .gsi-material-button-state {
background-color: #000000;
opacity: 8%;
}
.apple-style:disabled {
background-color: #ffffff61;
border-color: #1f1f1f1f;
}
.apple-style:disabled .gsi-material-button-contents,
.apple-style:disabled .gsi-material-button-icon {
opacity: 38%;
}
.social-login-buttons form {
margin-bottom: 12px; /* space between buttons */
}
.social-btn {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.login-left {
background-color: var(--bg-surface);
}
#userProfileDrop::after {
display: none !important; /* Hide the pseudo-element */
content: none; /* Ensure no content is added */
}
.crmls-banner {
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
padding: 10px;
font-size: 14px;
font-family: Arial, sans-serif;
color: #333;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.crmls-banner img {
max-width: 200px;
height: auto;
}
.crmls-banner p {
margin: 0;
font-size: 14px;
color: #666;
}
.crmls-banner a {
color: #0077cc;
text-decoration: none;
}
.crmls-banner a:hover {
text-decoration: underline;
}
.spireex-logo {
font-family: 'Arial', sans-serif;
font-size: 2.5rem; /* Adjust size as needed */
font-weight: bold;
margin: 0; /* Ensure no extra margin */
}
.spireex-text-orange {
color: orange;
}
.spireex-text-black {
color: black;
}
.spireex-header {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 10vh; /* Adjust height as needed */
background-color: #f8f9fa; /* Optional background */
}
/* Make the logo link a button, remove default styles */
.spireex-logo-button {
text-decoration: none; /* Remove underline */
color: inherit; /* Use inherited text color */
display: inline-block;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
grid-auto-flow: column;
}
.header-left,
.header-right {
display: flex;
align-items: center;
}
/* General button styles */
.navbar-nav .nav-link,
.sign-in-link {
font-size: 18px; /* Increased font size */
font-weight: 500;
color: #333 !important; /* Dark color for main buttons */
padding: 8px 15px;
border-radius: 5px;
margin-right: 10px;
transition: background-color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.sign-in-link:hover {
background-color: #f0f0f0; /* Light hover effect */
color: #333 !important; /* Keeps text color dark on hover */
}
/* Dropdown submenu item styling */
.navbar-nav .dropdown-menu .dropdown-item {
color: #fff !important; /* White color for dropdown items */
font-size: 16px; /* Slightly smaller font size for submenu items */
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
background-color: #007bff; /* Highlight background on hover */
color: #fff !important; /* Keep text white on hover */
}
.navbar-nav .dropdown-menu {
border-radius: 5px; /* Consistent rounded corners for dropdowns */
}
/* Custom class for Sign In button spacing */
.sign-in-link {
margin-right: 15px; /* Consistent spacing for Sign In */
color: #333; /* Same color as other links */
}
.header-right {
justify-content: flex-end; /* Aligns the right section to the end of its column */
}
.header-logo {
text-align: center;
}
.container-layout {
padding-right: 0 !important; /* Removes any default padding on the right */
margin-right: 0 !important;
}
#footer-nav .footer-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column; /* Ensures items stack vertically */
align-items: center; /* Centers items horizontally */
text-align: center;
}
#footer-nav .footer-list li {
width: 100%; /* Ensures each item takes up full width if needed */
}
#footer-nav .footer-list li a {
display: block;
padding: 8px 0;
}
/* Optional hover effect
.spireex-logo-button:hover {
background-color: #f0f0f0;
border-radius: 5px;
padding: 5px;
} */
.login-left h1 {
color: var(--primary);
}
.login-left h1 span {
color: var(--secondary);
}
.login-left p {
color: var(--secondary-50);
font-weight: 450;
}
.slogan {
margin-top: auto;
}
.form-row label {
margin-bottom: 4px;
font-size: 16px;
margin-top: 20px;
margin-left: 10px;
}
input.check-box {
width: 20px;
height: 20px;
}
/* ------------------------------------------------Privacy-page------------------------------------- */
/* Privacy Policy Page Styles */
.privacy-page-body {
background-color: #f8f9fa; /* Light grey background */
padding: 20px;
border-radius: 5px;
}
.privacy-header {
font-size: 2.5rem;
color: #343a40; /* Darker grey for text */
margin-bottom: 20px;
}
.privacy-info-paragraph {
font-size: 1rem;
color: #495057; /* Darker grey for paragraph text */
margin-bottom: 15px;
}
.privacy-info-section {
margin-bottom: 30px;
border: 1px solid #ced4da; /* Light border */
padding: 15px;
border-radius: 5px;
background-color: #ffffff; /* White background for contrast */
}
.privacy-subheading {
font-size: 1.5rem;
color: #343a40; /* Darker grey for subheading */
margin-bottom: 10px;
}
.privacy-section-heading {
font-size: 1.25rem;
color: #343a40; /* Darker grey for section headings */
margin-top: 15px;
margin-bottom: 10px;
}
.privacy-list {
list-style-type: disc;
margin-left: 20px;
}
.privacy-list-item {
margin-bottom: 10px;
color: #495057; /* Darker grey for list items */
}
/* Button Styles */
.privacy-button-primary {
background-color: #6c757d;
color: #ffffff;
}
.btn-primary:hover {
background-color: #5a6268;
}
.privacy-button-secondary {
background-color: #ced4da;
color: #343a40;
}
.privacy-button-secondary:hover {
background-color: #adb5bd;
}
/*
.privacy-banner {
background-color: #f8f9fa;
padding: 20px;
border: 1px solid #ced4da;
border-radius: 5px;
position: fixed;
bottom: 0;
width: 100%;
display: none;
} */
/* ------------------------------------------------Register-CSS Start------------------------------------- */
.Register-image {
height: 460px;
}
/* ------------------------------------------------Register-CSS End------------------------------------- */
/* Style for the main dropdown menu */
.dropdown-menu {
position: relative;
}
/* Style for the nested submenu to appear below the dropdown item */
.dropdown-item .dropdown-submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
width: 100%;
}
/* Dropdown Menu */
.dropdown-menu-sort {
background-color: #fff;
border-radius: 10px;
padding: 10px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: none;
}
/* Dropdown Items */
.dropdown-item-sort {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dropdown-item-sort:hover {
background-color: var(--primary);
color: white;
}
.dropdown-item-sort.active {
background-color: var(--primary);
color: #fff;
}
.dropdown-item-sort.active:hover {
background-color: var(--primary);
}
/* Additional Styling */
.dropdown-menu-sort li + li {
margin-top: 5px; /* Space between items */
}
/* ------------------------------------------------Forgot-Password-CSS Start------------------------------------- */
.forgot-text {
width: 60%;
font-size: 14px;
color: var(--dark);
}
.login-right h2 {
color: var(--primary);
font-weight: 700;
}
.back a {
color: var(--secondary);
}
/* ------------------------------------------------Forgot-Password-CSS End------------------------------------- */
/* ------------------------------------------------Reset-Password-CSS Start-------------------------------------- */
/* ------------------------------------------------Reset-Password-CSS End-------------------------------------- */
/* ------------------------------------------------Home-page-CSS Start------------------------------------------------------------------- */
.autocomplete-suggestions {
position: absolute;
top: 100%; /* Position the dropdown just below the input */
left: 0;
border: 0px solid #ddd; /* Slightly lighter border */
background: #fff;
z-index: 1000;
max-height: 200px;
overflow-y: auto;
width: 80%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
border-radius: 4px; /* Rounded corners */
font-family: Arial, sans-serif; /* More modern font */
font-size: 14px; /* Slightly smaller font size */
}
.autocomplete-suggestions ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.autocomplete-suggestions li {
padding: 10px;
cursor: pointer;
text-align: left; /* Align text to the left */
border-bottom: 1px solid #eee; /* Divider between items */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
.autocomplete-suggestions li:last-child {
border-bottom: none; /* Remove border from last item */
}
.autocomplete-suggestions li:hover {
background-color: #f5f5f5; /* Light grey background on hover */
}
.autocomplete-suggestions li.selected {
background-color: #e9ecef; /* Slightly darker grey for selected item */
font-weight: bold; /* Bold text for selected item */
}
.home-search-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.home-search-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
outline: none;
}
.home-button {
}
/*
.home-button {
padding: 10px 20px;
font-size: 16px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
*/
/* ---------Logo section------------------ */
.logo-section a {
text-decoration: none;
font-size: 1.4rem;
color: var(--secondary);
font-weight: 600;
}
.app-header {
padding-top: 5px; /* Adds space at the top */
padding-bottom: 5px; /* Adds space at the bottom */
min-height: 40px; /* Ensures a minimum height for the header */
}
/* .app-header .userprofile img {
height: 60px;
width: 60px;
} */
#mobileNavbar .nav-link {
color: black !important;
}
.navbar-toggler-icon {
background-color: white !important;
}
.app-header .userprofile .btn:hover {
background-color: unset;
color: var(--secondary) !important;
}
.app-header .userprofile .dropdown-item {
font-size: 18px !important;
font-weight: 500 !important;
}
.app-header .userprofile .dropdown-item:focus {
background-color: var(--secondary-50);
}
.topbar-logo {
/*
display: flex;
align-items: center;
*/
}
/* ---------Nav-menu section------------------ */
nav .nav-item .dropdown-menu {
border-top: 2px solid var(--primary);
}
nav .nav-item .dropdown-menu .dropdown-item:hover {
background: none;
color: var(--primary) !important;
cursor: pointer;
}
/* ---------Hero-section------------------ */
@media (max-width: 991px) { /* mobile and tablet */
#hero {
padding-top: 70px; /* adjust to match your mobile header height */
padding-bottom: 20px; /* optional spacing below */
}
}
/*
#hero {
background: url('https://spireexprofile.s3.us-east-005.backblazeb2.com/background-image.png');
min-height: 75vh;
display: flex;
align-items: center;
justify-content: center;
} */
#hero {
background: url("https://spireexprofile.s3.us-east-005.backblazeb2.com/background-image.png") no-repeat center center;
background-size: cover; /* Ensures the image stretches to fill the container */
min-height: 75vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero .col-md-6.m-auto {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.m-minus {
margin-left: -100px;
z-index: 4;
}
.m-plus {
margin-right: -60px;
}
#hero .container-fluid {
height: -webkit-fill-available;
background-color: rgba(0, 0, 0, 0.4);
}
#hero .search-btn {
padding: 1.1rem 2.1rem;
}
#hero .input-group-append {
right: 5px;
}
#hero .filter-search {
right: 18%;
}
#hero .input-group input:focus-visible {
outline: 0;
}
/* ---------Homes-may-like------------------ */
#maylike {
background: url('../images/homes_maylike.svg') center/cover no-repeat;
width: 100%;
}
.card-icons img {
width: 12px;
}
.card-icons {
width: 25px;
height: 25px;
background-color: #FEF6EE;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
}
#maylike .drag img {
width: 14px;
}
#maylike .card-footer {
border-top: 2px solid var(--border-light);
border-radius: 0px 0px 10px 10px;
}
#myCarousel {
padding-left: 0px;
}
#maylike .card-title {
text-align: start;
}
.left-padding {
padding-left: .5rem;
}
/* -------------------------PropertyBuy Page----------------------------------- */
/* Mobile Buttons Container */
@media (max-width: 768px) {
}
#mobile-buttons {
position: fixed;
bottom: 20px; /* Adjust the distance from the bottom */
left: 0;
width: 100%;
text-align: center; /* Center the buttons horizontally */
z-index: 1000; /* Ensure it appears above other content */
display: none; /* Hidden by default */
}
/* Buttons */
#mobile-buttons .btn {
margin: 0 5px; /* Add spacing between buttons */
padding: 10px 20px; /* Adjust padding for better touch targets */
font-size: 16px;
/* border-radius: 25px; /* Rounded corners */
/* color: white; */
/* border: none; /* Remove default border */
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}
/* Active Button */
#mobile-buttons .btn.active {
/* background-color: #0056b3; /* Darker shade for active state */
}
/* Show buttons only on mobile */
@media (max-width: 767.98px) {
#mobile-buttons {
display: block;
}
}
/* -----------------------------MyCarousel1--------------------------------------- */
#myCarousel1 .carousel-control-prev-icon {
background-color: var(--primary);
padding: 25px;
border-radius: 50%;
background-size: 50%;
display: block;
}
#myCarousel1 .carousel-control-prev {
top: -10%;
left: -8%;
}
#myCarousel1 .carousel-control-next {
top: -10%;
right: -7%;
}
#myCarousel1 .carousel-control-next-icon {
background-color: var(--primary);
padding: 25px;
border-radius: 50%;
background-size: 50%;
}
#myCarousel1 .card-group .row {
flex-wrap: nowrap;
}
#myCarousel1 .carousel-inner {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
a.dropdown-item:hover {
cursor: pointer;
}
/* ---------------------Transaction-process------------------ */
#transaction-process {
background: url('../images/bg-img_transaction.svg') center/cover no-repeat;
width: 100%;
height: auto;
}
#transaction-process .card {
background-color: var(--secondary);
}
#transaction-process .row .card .card-img-top {
opacity: 0.3;
}
#transaction-process .row .card button {
display: none;
}
#transaction-process .row .card :hover button {
display: block;
}
#transaction-process .row .card :hover h5 {
display: none;
}
#transaction-process .row .card:hover .card-img-top {
opacity: 0.1;
transition: 400ms ease-in-out;
}
/* ---------------------top-cities----------------- */
#top-cities {
background: url('../images/top-cities.svg') center/cover no-repeat;
width: 100%;
height: max-content;
}
/* General Styles for the Section */
#top-cities .container {
padding: 0 15px; /* Add padding to the container */
}
#top-cities .row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px; /* Adjust margin to align cards properly */
}
#top-cities .col-md-3 {
padding: 0 15px; /* Add padding between cards */
margin-bottom: 30px; /* Add margin at the bottom for spacing */
}
/* Card Styles */
#top-cities .card {
height: 300px; /* Set a fixed height for the cards */
border-radius: 10px; /* Rounded corners */
overflow: hidden; /* Ensure content stays within the card */
position: relative;
}
/*
#top-cities .card img {
object-fit: cover;
height: -webkit-fill-available;
} */
/* Image Styles */
#top-cities .card-img-top {
width: 100%; /* Ensure the image takes up the full width of the card */
height: 100%; /* Ensure the image takes up the full height of the card */
object-fit: cover; /* Maintain aspect ratio without stretching */
border-radius: 10px; /* Rounded corners for the image */
}
/* Card Overlay Styles */
#top-cities .card-img-overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
border-radius: 10px; /* Rounded corners for the overlay */
}
/* Title Styles */
#top-cities .card-title {
font-size: 1.5rem; /* Adjust font size */
font-weight: bold;
text-align: center;
margin-bottom: 10px; /* Add spacing below the title */
}
/* Property Count Styles */
#top-cities .font-18 {
font-size: 1.125rem; /* Adjust font size */
text-align: center;
}
#top-cities .row .card .card-img-overlay p {
color: var(--primary);
}
#top-cities .row .card:hover .card-img-top {
opacity: 0.2;
transition: 400ms ease-in-out;
}
.card:has(:hover) {
cursor: pointer;
}
#top-cities .row .card:hover .card-img-overlay h5 {
color: var(--primary);
}
/* ---------------------Search-categories----------------- */
#search-categories {
background: url('../images/search-categories.svg') center/cover no-repeat;
width: 100%;
height: max-content;
}
#search-categories .card {
height: 270px;
background-color: var(--secondary);
}
#search-categories .card {
height: 250px; /* or any height you want */
border-radius: 10px;
overflow: hidden; /* ensures the image doesn’t spill outside rounded corners */
}
/* #search-categories .card img {
object-fit: cover;
height: -webkit-fill-available;
} */
#search-categories .card img {
width: 100%;
height: 100%; /* fill the card */
object-fit: cover; /* crop image if needed */
display: block; /* removes extra spacing below images */
}
#search-categories .row .card .card-img-top {
opacity: 0.9;
object-fit: cover; /* ensures image fills container while maintaining aspect ratio */
}
#search-categories .row .card:hover .card-img-top {
opacity: 0.7;
transition: 400ms ease-in-out;
}
#search-categories .card-img-top {
object-fit: cover; /* ensures image fills container while maintaining aspect ratio */
}
/* ---------------------Footer-accord----------------- */
#footer-accord .accordion-button::after {
margin-right: auto;
margin-left: 20px;
}
#footer-accord ul li {
list-style: none;
line-height: 38px;
}
#footer-accord .accordion-button {
outline: none !important;
background-color: white !important;
border: none !important;
box-shadow: none !important;
}
#footer-accord .accordion-body a {
text-decoration: none;
color: var(--secondary-80);
cursor: pointer !important;
}
#footer-accord .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg);
}
/* ---------------------Footer-nav----------------- */
#footer-nav ul li {
list-style: none;
}
#footer-nav ul li a {
text-decoration: none;
color: var(--secondary-80);
font-size: 18px;
font-weight: 600;
}
/* ---------------------Footer-NotShare----------------- */
#NotShare {
border-bottom: 1px solid var(--primary-50);
}
#footer-slogan .social-icons img {
width: 25px;
height: 25px;
}
#footer-slogan .social-icons .circle {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
margin: 10px;
padding: 10px;
height: 45px;
width: 45px;
}
#footer-slogan .social-icons .circle:hover {
background-color: var(--primary);
transition: 200ms;
}
/* ------------------------------------------------Home-page-CSS End------------------------------------------------------------------- */
/* ------------------------------------------------Buy-page-CSS Start------------------------------------------------------------------- */
#filter-header button img {
width: 36px;
height: 36px;
padding: 2px;
}
/*#filter-header .search-btn {
margin-left: -40px;
} */
#filter-header .search-bar .search-btn {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #ff6f00, #ff8f33);
border: none;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease;
}
/*
#filter-header .search-bar {
width: 25%;
} */
#filter-header .search-bar input {
height: 45px;
font-size: 0.95rem;
border: 2px solid transparent;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
#filter-header .btn:hover {
background-color: var(--light);
border: none;
color: var(--secondary) !important;
}
#filter-header .btn:hover {
color: var(--secondary);
}
#filter-header input:focus-visible {
outline: 0;
}
#filter-header .btn:focus {
outline: 0;
box-shadow: none;
}
#filter-header .dropdown a img {
width: 18px;
}
#filter-header .button-primary:hover {
background-color: var(--primary);
color: var(--light) !important;
}
#filter-header .filter-container {
height: 60px;
}
/*
#listing .container-fluid > .row .listing-cards {
height: 72vh;
overflow-y: scroll;
} */
div#latbath ul {
padding: 0;
display: flex;
}
div#latbath ul li.nav-links {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
div#latbath ul li.nav-links button {
margin: 0;
}
div#latbath li.nav-links.active button {
background-color: var(--primary);
color: white;
}
/*-----------------listing--------------- */
#listing .container-fluid .prev {
transform: rotate(90deg);
background-color: var(--bg-ctm-light);
height: 40px;
width: 40px;
}
#listing .container-fluid .nxt {
transform: rotate(-90deg);
background-color: var(--bg-ctm-light);
height: 40px;
width: 40px;
}
#listing .container-fluid .page-item:hover {
background-color: var(--primary-50);
border-radius: 50%;
}
#listing .container-fluid .page-link:hover {
background-color: var(--primary-50);
border-radius: 50%;
}
#listing .container-fluid .num {
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#listing .sort img {
width: 30%;
}
/*
#listing .listing-cards {
background: url('../images/top-cities.svg') center/cover no-repeat;
max-width: 100%;
height: 700px;
} */
.map button .sch {
width: 20%;
padding-left: 8px;
}
.map button:hover {
background-color: var(--light);
color: var(--secondary) !important;
}
.place-card {
display: none;
}
.sch-rating span:hover {
border: 1px solid var(--primary);
border-radius: 50%;
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.sch-rating span.active {
border: 1px solid var(--primary);
border-radius: 50%;
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#filter-header .range {
width: max-content;
}
/*
#filter-header .more-filter .search-bar .search-btn {
margin-left: -36px;
} */
#filter-header .more-filter .search-bar .search-btn img {
width: 33px;
height: 33px;
}
#filter-header .search-bar {
position: relative;
flex: 0 0 40%;
max-width: 40%;
}
#filter-header .btn-outline:hover {
color: white !important;
background-color: var(--primary);
border: 1px solid var(--active);
}
/* ------------------------------------------------Buy-page-CSS End------------------------------------------------------------------- */
/*------------------------------------------------list-view page start----------------------------------------------------------------------*/
#list-view .container-fluid .prev {
transform: rotate(90deg);
background-color: var(--bg-ctm-light);
height: 40px;
width: 40px;
}
#list-view .container-fluid .nxt {
transform: rotate(-90deg);
background-color: var(--bg-ctm-light);
height: 40px;
width: 40px;
}
#list-view .container-fluid .page-item:hover {
background-color: var(--primary-50);
border-radius: 50%;
}
#list-view .container-fluid .page-link:hover {
background-color: var(--primary-50);
border-radius: 50%;
}
.page-link.prev,
.page-link.nxt {
width: 10px;
height: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.page-link.prev img,
.page-link.nxt img {
width: 15px;
height: 15px;
}
#list-view .container-fluid .num {
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#list-view .sort img {
width: 30%;
}
/*
#list-view .listing-cards {
background: url('../images/top-cities.svg') center/cover no-repeat;
max-width: 100%;
height: auto;
}*/
/*------------------------------------------------list-view page end----------------------------------------------------------------------*/
img.my-4 {
position: relative;
}
img.my-4::after {
position: absolute;
content: "";
height: 500px;
width: 500px;
display: block;
top: 10px;
left: 50px;
background-color: red;
}
/* For error message*/
.error {
display: block;
margin-bottom: 10px;
color: red;
}
/* ---------------------------------------------------Listing-details-page start------------------------------------------- */
#listing-body {
background: url('../images/listingdetailsbg.svg') center/cover no-repeat;
background-position: top;
width: 100%;
height: 100%;
}
/* ---------------------- listing image carousel ---------------------------------------- */
#imageSection .images-inner .property-detail-images {
background-color: transparent;
border-radius: 10px;
}
.property-detail-images .main-images-div {
width: 100%;
height: 70vh;
display: flex;
border-radius: 25px;
overflow: hidden;
position: relative;
}
.main-images-div .image1 {
width: 60%;
height: 100%;
border-right: 8px solid transparent;
}
.image1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-images-div .top-right-images, .bottom-right-images {
display: flex;
flex-direction: column;
width: 20%;
height: 100%;
}
.main-images-div .image2, .image3, .image4, .image5 {
width: 100%;
height: 50%;
}
.main-images-div .image2, .image4 {
border-bottom: 8px solid transparent;
}
.main-images-div .image4, .image5 {
border-left: 8px solid transparent;
}
.main-images-div .image2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-images-div .image3 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-images-div .image4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-images-div .image5 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.see-all-photos-btn {
position: absolute;
bottom: 5px;
left: 5px;
padding: 10px 20px;
border: solid;
border-color: #F09330;
background-color: whitesmoke;
color: orange;
cursor: pointer;
border-radius: 0 0 0 25px;
}
#homeCarousel .carousel-inner {
background-color: whitesmoke;
border-radius: 10px;
width: 100%;
height: 15%;
}
#homeCarousel .carousel-inner img {
object-fit: cover;
border-radius: 10px;
}
.property-detail-images {
display: flex;
}
.main-image {
width: 60%;
height: 100%;
}
.main-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.secondary-detail-images {
width: 40%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.secondary-detail-images div {
width: 50%;
height: 100%;
}
.secondary-detail-images img {
width: 100%;
height: 100%;
object-fit: cover;
}
#homeCarousel .carousel-inner .b-cap {
left: 5%;
right: 5%;
text-align: start;
}
#homeCarousel .carousel-inner .carousel-caption h5 {
background-color: rgba(0, 0, 0, 0.6);
}
#homeCarousel .carousel-inner .carousel-caption .location img {
width: 24px;
height: 24px;
background-color: var(--primary-25);
border-radius: 50%;
padding: 4px;
}
#homeCarousel .carousel-control-next,
#homeCarousel .carousel-control-prev {
width: 6%;
display: block;
height: 50px;
top: 45%;
}
#homeCarousel .carousel-inner .like {
right: 5%;
top: 5%;
}
#homeCarousel .carousel-inner .like img {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
padding: 10px;
}
/* #quickModal{
width: 20%;
margin: auto;
} */
#quickModal .btn-close {
background: url(/images/icons/close.svg);
opacity: 1;
}
#imageSection .listed-by {
padding-left: 20px;
font-size: 14px;
}
/* -------------------------------Home Caregory--------------------------------- */
#overview-section {
width: 90%;
border-collapse: collapse;
margin-bottom: 30px;
}
#overview-section td {
padding: 4px;
text-align: left;
}
#overview-section td:nth-child(1) {
width: 70%;
}
#overview-section td:nth-child(2), #overview-section td:nth-child(3) {
width: 15%;
text-align: center;
}
#overview-section table, #overview-section td {
border: none;
}
.price-label, .bed-label, .bath-label, .sqft-label {
font-weight: bold;
font-size: 1.5em;
}
.estPaymentText a {
color: black;
font-size: 0.8em;
}
#home-category .card img {
opacity: 0.5;
}
#home-category .card:hover img {
opacity: 0.3;
transition: 400ms ease-in-out;
}
#home-category .card-img-overlay button {
background-color: rgba(0, 0, 0, 0.6);
}
#home-category .plus-img img {
opacity: 0.2;
}
/* -------------------------------Home description--------------------------------- */
#home-description > .row {
padding-left: 10px;
margin-top: -30px;
}
#home-description .item-row img {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: var(--primary-25);
padding: 6px;
/* margin-right: 8px; */
}
/* -----------------------------------Accordion------------------------- */
.home-details .accordion .accordion-item {
border-radius: 10px;
}
.home-details .accordion .accordion-item button {
border-radius: 10px;
}
.home-details .accordion .accordion-item .last-accord {
border-radius: 10px;
}
.home-details .accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #e7f1ff;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
border-radius: 10px 10px 0px 0px !important;
}
/* -----------------------------------Similar listing------------------------- */
.similar-listing .card {
width: fit-content;
}
/* .similar-listing .col-md-6{
width: 50% !important;
} */
.similar-listing #myCarousel .carousel-control-prev {
top: -18%;
left: -7%;
}
.similar-listing #myCarousel .carousel-control-next {
top: -18%;
/* right: -5%; */
}
/* -----------------------------------Nearby homes------------------------- */
.nearby-homes .card {
width: fit-content;
}
/* .similar-listing .col-md-6{
width: 50% !important;
} */
.nearby-homes #myCarousel1 .carousel-control-prev {
top: -18%;
left: -7%;
}
.nearby-homes #myCarousel1nearby-homesnearby-homes .carousel-control-next {
top: -18%;
/* right: -5%; */
}
/* -----------------------------------Right-form------------------------- */
.right-form .card .card-top img {
max-height: 6.2rem;
max-width: 6.2rem;
}
.right-form .sticky-top > button:hover {
background-color: var(--secondary);
box-shadow: 0 0 0 0.25rem rgb(199 199 199);
}
#scheduleModal .btn-close {
background: url(/images/icons/close.svg);
opacity: 1;
}
.schedule-btn:focus {
background-color: var(--secondary) !important;
border: none;
box-shadow: 0 0 0 0.25rem rgb(199 199 199) !important;
}
#scheduleModal .modal-dialog {
max-height: 100vh; /* never taller than viewport */
display: flex;
align-items: center; /* vertical centering */
margin: 0 auto; /* center horizontally */
}
/* -----------homes may like----------- */
#custom33 {
background: url('../images/homes_maylike.svg') center/cover no-repeat;
width: 100%;
height: max-content;
}
/* ------------------------ Date time ---------------------- */
/* Custom styles for datetime inputs */
.datetime-input {
position: relative;
padding-left: 40px;
background-color: #f9f9f9;
border: 1px solid #ced4da;
box-shadow: none;
}
.datetime-input:before {
content: '\1F4C5'; /* Calendar emoji or any custom icon */
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #6c757d;
}
/* Hover and focus states */
.datetime-input:hover, .datetime-input:focus {
background-color: #fff;
border-color: #80bdff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}
/* ---------------------------Price-history Accordion------------------ */
.price-history-table > :not(:first-child) {
border-top: 2px solid var(--border-light);
}
.sch-accord .rating {
background-color: var(--primary-25);
width: 5rem;
height: 5rem;
border-radius: 50%;
}
.home-details .accordion-button:not(.collapsed) {
color: var(--secondary);
background-color: var(--primary-25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
border-radius: 10px 10px 0px 0px !important;
}
.home-details .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg);
}
.home-details .accordion-button:focus {
box-shadow: none;
}
/* ---------------------------------------------------Listings-page ------------------------------------------- */
/* Prevent horizontal overflow */
html, body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
#listing, .listContainer, .row {
max-width: 100%; /* Ensure these elements don't exceed the viewport width */
margin-left: 0 !important; /* Remove any left margin */
margin-right: 0 !important; /* Remove any right margin */
padding-left: 0 !important; /* Remove any left padding */
padding-right: 0 !important; /* Remove any right padding */
}
#map {
width: 100%;
height: 100%; /* Fill the entire map container */
position: absolute; /* Ensure the map fills the container */
top: 0;
left: 0;
margin: 0;
padding: 0;
touch-action: pan-x pan-y; /* Allow touch gestures for panning */
}
#mapSection {
position: relative; /* Ensure the map container is positioned correctly */
overflow: hidden; /* Prevent scrollbars */
touch-action: pan-x pan-y;
}
@media (max-width: 768px) {
#scheduleModal .modal-dialog {
height: 100vh; /* full viewport height */
margin: 0; /* remove default Bootstrap margin */
display: flex;
align-items: stretch; /* stretch to fill height */
}
#scheduleModal .modal-content {
height: 100%; /* modal-content fills dialog */
display: flex;
flex-direction: column; /* stack header, body, footer */
border-radius: 10px;
}
/* Header stays at top */
#scheduleModal .modal-header {
flex-shrink: 0; /* never shrink */
}
/* Footer stays at bottom */
#scheduleModal .modal-footer {
flex-shrink: 0; /* never shrink */
}
/* Body fills remaining space and scrolls if needed */
#scheduleModal .modal-body {
flex: 1 1 auto; /* grow to fill space */
overflow-y: auto; /* scroll if content is taller than body */
padding-right: 0.5rem; /* for scrollbar */
}
}
@media (max-width: 768px) { /* Adjust max-width as needed for mobile breakpoints */
.modal-fullscreen .modal-content {
height: 100vh;
overflow-y: auto;
}
}
/* For desktop screens, set a maximum height */
@media (min-width: 768px) {
.modal-content.round-10 {
max-height: 70vh; /* Adjust to your desired height */
overflow-y: auto; /* Allows scrolling if content exceeds max height */
}
}
/* Set width to 80% on desktop screens */
@media (min-width: 992px) {
.modal-desktop {
max-width: 80%;
margin: auto; /* Center the modal */
}
}
@media (max-width: 767px) {
.modal-title {
display: none !important;
}
}
/* Prevent body scroll when modal is open */
body.modal-open {
overflow: hidden;
}
#filter-header {
padding-top: .5rem !important;
padding-bottom: .5rem !important;
background-color: var(--bg-ctm-light);
}
.fullscreen-filter {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5; /* Dark-white background */
z-index: 1000; /* Ensure this is higher than other elements */
overflow-y: auto;
transform: translateX(-100%); /* Initially hidden */
transition: transform 0.3s ease-in-out; /* Smooth transition */
padding-top: 60px; /* Space for the close button */
}
/* Close Button Styles */
.close-filter-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
}
.close-filter-btn .bi-x {
color: #333; /* Dark color for the "X" icon */
}
/* Filter Content Styles */
.filter-content {
padding: 20px;
}
/* Ensure the body doesn't scroll when the filter popup is open */
body.filter-open {
overflow: hidden;
}
/* Fullscreen Menu Styles */
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
z-index: 1000;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
padding-top: 60px; /* Space for the logo and close button */
}
.fullscreen-menu.open {
transform: translateX(0);
}
/* Close Button Styles */
.close-menu-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
}
/* Logo Container Styles */
.logo-container {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
}
.logo-container .logo {
height: 40px; /* Adjust as needed */
width: auto;
}
.close-menu-btn .bi-x {
color: #333; /* Dark color for the "X" icon */
}
/* Dropdown Background */
.navbar-nav .collapse {
background-color: #e0e0e0; /* Slightly darker background for dropdowns */
padding: 10px;
border-radius: 5px;
margin-top: 5px;
}
/* Hover Effects for Links */
.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
color: #000 !important; /* Darker text on hover */
background-color: #d0d0d0; /* Light gray background on hover */
}
/* Ensure the body doesn't scroll when the menu is open */
body.menu-open {
overflow: hidden;
}
@media (max-width: 767px) {
body {
height: 100dvh; /* Make the html and body take up the full viewport height */
}
.mobile-sub-header {
height: 10dvh; /* 10% of the viewport height */
background-color: black; /* Example background color */
display: flex;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
}
#filter-header {
height: 10dvh; /* 10% of the viewport height */
background-color: var(--bg-ctm-light); /* Example background color */
display: flex;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
padding-top: 0.5rem !important; /* Adjust padding as needed */
padding-bottom: 0.5rem !important; /* Adjust padding as needed */
}
#mapSection {
height: 80dvh; /* 80% of the viewport height */
width: 100%; /* Take up the full width */
visibility: hidden; /* Hide the map but retain its dimensions */
position: relative; /* Remove it from the document flow */
margin: 0 !important; /* Remove any margins */
padding: 0 !important; /* Remove any padding */
}
.app-header {
display: none;
}
#map {
height: 100%; /* Fill the entire map container */
width: 100%; /* Fill the entire map container */
}
.poi-label {
display: none; /* Hide the "Show Markers" label and its container */
}
#layers-btn {
display: none; /* This can remain as is */
}
}
#propertyListSection {
height: 80vh; /* Adjust the height as needed */
overflow-y: auto;
direction: rtl; /* Change the direction to right-to-left */
}
#propertyListSection > * {
direction: ltr; /* Change the direction back to left-to-right for child elements */
}
.dropdown-menu-scrollable {
max-height: 80vh; /* Adjust the height as needed */
overflow-y: auto;
}
.dropdown-menu-scrollable-2 {
max-height: 50vh; /* Adjust the height as needed */
overflow-y: auto;
}
.viewed-listings-card {
display: inline-block;
vertical-align: top;
width: 45%; /* Adjust for two cards per row */
height: 45vh;
margin: 1%;
cursor: pointer;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
border-radius: 10px; /* Optional rounded corners */
overflow: hidden;
}
.recentlyViewedList {
text-align: center; /* Optional, centers the grid */
}
.property-listings-card {
height: 50vh; /* Set the height of the card */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Background shadow */
overflow: hidden; /* Ensure content stays within rounded corners */
cursor: pointer;
margin-bottom: 15px;
display: block; /* Ensure it behaves like a block element */
}
.grid-view .property-listings-card {
width: calc(33.333% - 20px); /* Roughly 1/3rd of the container, minus margins */
margin: 10px; /* Adjust spacing as needed */
display: inline-block; /* Ensure it aligns properly in grid view */
vertical-align: top; /* Aligns top for inline-block elements */
}
.list-view .property-listings-card {
width: 100%; /* Full width in list view */
display: block; /* Ensure it behaves like a block element */
}
.property-listings-card:has(:hover) {
box-shadow: 0 6px 12px rgba(255, 127, 80, 0.2);
}
.card-listing-top {
height: 60%; /* 60% height of the card */
width: 100%; /* Ensure the top part covers the full width */
position: relative; /* Ensure the image can be positioned within this container */
padding: 0; /* Ensure no padding */
margin: 0; /* Ensure no margin */
}
.card-listing-top img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image covers the top portion without stretching */
display: block; /* Ensure the image behaves like a block element */
margin: 0; /* Ensure no margin on the image */
padding: 0; /* Ensure no padding on the image */
}
.card-listing-bottom {
flex: 1;
height: 40%; /* 40% height of the card */
width: 100%; /* Ensure the bottom part covers the full width */
box-sizing: border-box; /* Include padding within the element's height */
}
.property-listings-card, .card-listing-top, .card-listing-bottom {
box-sizing: border-box;
}
.custom-padleft {
margin-left: 2%;
}
.infobox-card {
width: 280px;
height: 250px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
cursor: pointer;
margin-bottom: 5px;
flex-direction: column;
}
.infobox-top {
flex: 0 0 65%;
width: 100%;
position: relative;
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
}
.infobox-img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.infobox-bottom {
flex: 0 0 30%; /* Take exactly 30% of the height */
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 4px;
}
.overlay-label {
background-color: ghostwhite;
padding: 7px;
font-size: 14px;
}
.poi-label {
background-color: transparent;
padding: 0;
margin: 0;
font-size: 14px;
}
.poi-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
background-color: transparent;
border-radius: 5px;
box-shadow: none;
}
/* New button design */
.map-settings-btn {
background: #fff;
color: #333;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease-in-out;
}
.map-settings-btn:hover {
background: #f4f4f4;
}
.map-settings-btn i {
font-size: 14px;
}
.map-settings-popup {
position: absolute;
top: 45px;
right: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
padding: 10px 12px;
min-width: 160px;
z-index: 2000;
}
.map-settings-option {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
padding: 6px 0;
cursor: pointer;
}
.map-settings-option input {
cursor: pointer;
}
.d-none {
display: none !important;
}
/* -----------------------------------------------------Profile-page--------------------------------------------- */
/* -----------Sidebar CSS Start------------ */
/* .wrapper {
display: flex;
min-height: 100%;
} */
/* Prevent sidebar content from pushing page horizontally */
.wrapper {
margin-left: 260px; /* Push main content aside */
}
/* .sidebar {
display: flex;
flex-direction: column;
margin-bottom: 0;
min-height: 100vh;
width: 260px;
background: var(--grey);
background-size: cover;
z-index: 100;
transition: all 0.5s ease;
border-radius: 10px 0px 0px 10px;
} */
.sidebar {
width: 260px;
background: #B0B8C1;
min-height: 100vh;
display: flex;
flex-direction: column;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
overflow-y: auto; /* Scroll internally if needed */
position: fixed; /* Stay in place */
top: 0;
left: 0;
}
.sidebar.close {
width: 78px;
}
/*
.sidebar .logo-details {
height: 60px;
width: 100%;
display: flex;
align-items: center;
border-radius: 10px 0px 0px 0px;
}
.sidebar .logo-details {
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details img {
width: 4rem;
height: 4rem;
} */
.logo-details {
display: flex;
align-items: center;
padding: 10px;
/* background: linear-gradient(135deg, #22223b, #3a3a66); */
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo-details img {
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.2);
}
/*.sidebar .logo-details .logo_name {
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
} */
/*.sidebar .nav-links {
height: 100%;
padding: 20px 0 100px 0;
overflow: auto;
} */
.nav-links {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.nav-links .cstm-list {
display: block;
}
.sidebar.close .nav-links {
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar {
display: none;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
background: var(--dark);
}
.sidebar .bg-active {
background-color: var(--secondary-50);
}
.sidebar .bg-active svg {
color: white !important;
}
.sidebar .nav-links li:hover a span {
color: var(--light);
}
.sidebar .nav-links li .icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li svg {
display: block
}
.sidebar .nav-links li svg {
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow {
display: none;
}
.sidebar .nav-links li a {
display: flex;
align-items: center;
text-decoration: none;
padding: 14px 0px;
border-bottom: 1px solid var(--secondary-25);
}
.sidebar .nav-links li a .link_name {
font-size: 18px;
font-weight: 400;
color: var(--secondary);
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name {
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #1d1b31;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu {
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 1%;
width: 260px;
display: flex;
align-items: center;
justify-content: start;
background: #1d1b31;
padding: 12px 0;
transition: all 0.5s ease;
border-radius: 0px 0px 0px 10px;
}
.sidebar.close .profile-details {
background: none;
}
.sidebar.close .profile-details {
width: 78px;
}
.sidebar .profile-details .profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img {
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job {
display: none;
}
.sidebar .profile-details .job {
font-size: 12px;
}
.home-section {
position: relative;
background: #E4E9F7;
min-height: 100%;
left: 0px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section {
left: 0px;
width: calc(100% - 78px);
}
.home-section .home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text {
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text {
font-size: 26px;
font-weight: 600;
}
.sidebar.close .nav-links li a {
display: block;
}
.sidebar.close .nav-links li a .link_name {
display: none;
}
.sidebar.close .profile-details .link_name {
display: none;
}
.sidebar.close .logo-details {
padding-left: 8px !important;
}
@media (max-width: 400px) {
.sidebar.close.small-screen {
width: 0;
}
.sidebar.close.small-screen ~ .home-section {
width: 100%;
left: 0;
z-index: 100;
}
.sidebar.close.small-screen li a {
display: block;
border: 0px;
}
}
/* -----------Sidebar CSS End------------ */
#profileSidebar .wrapper .sidebar .nav-links li a img {
width: 30px;
height: 30px;
}
#profileSidebar {
background: url('../images/profilesettingbg.svg') center/cover no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
#profileSidebar .profile-update .user-image {
width: 6rem;
height: 6rem;
border-radius: 50%;
}
#profileSidebar .nav-tabs .nav-link {
color: var(--secondary);
font-weight: 600;
border: none;
}
#profileSidebar .nav-tabs .nav-link:hover {
border: none;
color: var(--primary);
outline: none;
}
#profileSidebar .nav-tabs .nav-link:focus {
border: none;
}
#profileSidebar .nav-tabs .nav-link:focus-visible {
outline: none;
}
#profileSidebar .nav-tabs .nav-link.active {
color: var(--primary);
border: none;
border-bottom: 2px solid var(--primary);
font-weight: 600;
}
#profileSidebar .notify .form-check-input {
height: 25px;
width: 50px;
}
#profileSidebar .form-switch .form-check-input:focus {
background-image: url(/images/icons/toggleswitchcircle.svg);
}
#profileSidebar .form-switch .form-check-input:checked {
background-image: url(/Images/icons/toggleswitchwhitecircle.svg);
}
/* -----------------------------------------------------Profile-page end--------------------------------------------- */
/* -----------------------------------------------------SavedHomes page Start------------------------------------------- */
#savedHomesSidebar .savedHomes .card-img-overlay {
left: auto;
}
#savedHomesSidebar .savedHomes .card-img-overlay button {
height: 38px;
width: 38px;
background-color: rgba(0, 0, 0, .125);
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/* -----------------------------------------------------SavedHomes page End------------------------------------------- */
.checkbox-spacing {
margin-right: 4px; /* Adjust the value as needed */
}
/* -----------------------------------------------------Recently-viewed Start------------------------------------------- */
#photosSection {
padding: 20px;
background-color: #f9f9f9;
}
#photosSection .photo-list {
display: grid;
grid-template-columns: 1fr 1fr; /* Two columns on desktop */
gap: 16px;
}
#photosSection .photo-item {
width: 100%;
}
#photosSection .photo-item img {
width: 100%;
height: auto;
border-radius: 6px;
object-fit: cover;
}
/* Mobile adjustments */
@media (max-width: 768px) {
#photosSection {
padding: 10px;
}
#photosSection .photo-list {
grid-template-columns: 1fr; /* Single column on mobile */
}
#photosSection .photo-item {
max-width: 95%;
margin: 0 auto;
}
}
.gallery-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
text-align: center; /* Center title */
}
.photos-count {
font-size: 16px;
color: #666;
text-align: center; /* Center count */
margin-bottom: 20px;
}
/* -----------------------------------------------------Recently-viewed Start------------------------------------------- */
#recentlyViewedSidebar .recentlyViewed .card-img-overlay {
left: auto;
}
#recentlyViewedSidebar .recentlyViewed .card-img-overlay button {
height: 38px;
width: 38px;
background-color: rgba(0, 0, 0, .125);
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/* ----------------------------------------------------------My properties---------------------------------------- */
/* -------------------- Quick-offer section --------------------- */
.quick-section .btn-circle {
width: 30px;
height: 30px;
display: inline-flex;
padding: 0;
align-items: center;
justify-content: center;
border-radius: 15px;
text-align: center;
}
.quick-section .card .card-footer {
border-radius: 10px !important;
}
.quick-section .card .card-img-overlay button {
background-color: #FEF6EE;
border-radius: 6px;
}
.home-section .search-bar :hover {
background-color: unset;
}
.home-section .quick-section .edit:hover {
background-color: var(--secondary-80);
}
.home-section .quick-section .edit:hover path {
fill: white !important;
}
.home-section .quick-section .delete:hover {
background-color: red;
border: white;
}
.home-section .quick-section .delete:hover path {
fill: white;
}
/* Profile pic edit */
.profile-pic {
color: transparent;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all .3s ease;
margin-top: 1rem;
width: 160px;
margin: auto;
border-radius: 100px;
}
.profile-pic input {
display: none;
}
.edit_pic {
position: absolute;
object-fit: cover;
width: 160px;
height: 160px;
border-radius: 100px;
z-index: 0;
}
/* --------------------------------------- PropertyBuy Page ------------------------------------------- */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.chevron::before {
content: url('data:image/svg+xml;utf8,');
}
.chevron.down::before {
content: url('data:image/svg+xml;utf8,');
}
#PropertyList {
overflow: hidden;
}
#layers-btn {
position: absolute;
bottom: -165px;
width: 120px;
background-color: ghostwhite;
right: 70px;
color: black;
}
#layers-popup {
position: absolute;
bottom: -100px;
width: 160px;
right: 70px;
display: none;
}
/* For Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* For Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.input-group-text {
background-color: #f8f9fa;
border: none;
color: gray;
}
.input-group {
display: flex;
align-items: center;
}
/* ---------------------------------Details Pop up --------------------------------- */
.times-viewed {
text-align: right;
padding-right: 25px;
}
.btn-text {
background: none !important;
border: none;
padding: 0 !important;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
#showMoreBtn :hover {
color: black !important;
}
.amenity-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.amenity-div {
width: auto;
height: auto;
background-color: lightgray;
margin: 10px;
padding: 6px;
text-align: left;
border-radius: 5px;
font-weight: bold;
}
/* ------------------------------------ Verification Modal -------------------------------------*/
.form-check-label-send-offer {
display: flex;
align-items: center;
cursor: pointer;
}
.form-check-input-send-offer {
display: none;
}
.check-circle {
width: 20px;
height: 20px;
border: 2px solid #ccc;
background-image: url(/Images/icons/toggleswitchwhitecircle.svg);
background-size: cover;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
transition: background-color 0.3s, border-color 0.3s, background-image 0.3s;
}
.form-check-input-send-offer:checked + .form-check-label-send-offer .check-circle {
background-image: url(/images/icons/toggleswitchcircle.svg);
background-size: cover;
}
/* ------------------------------------ SendOffer Partial View -------------------------------------*/
.offer-layout {
background-color: var(--bg-surface);
min-height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
.offer-body {
flex: 1;
width: 100%;
padding: 0 !important;
}
}
.offer-header img {
max-width: 180px;
}
.offer-body {
flex: 1;
width: 100%;
padding: 20px;
}
.offer-footer {
width: 100%;
padding: 10px 0;
text-align: center;
}
/* ------------------------------------ SendOffer Body View -------------------------------------*/
.send-offer-container {
background-color: white;
border-radius: 30px;
padding: 20px;
max-width: 100%; /* Set a max-width for the container */
min-height: 95vh;
max-height: auto;
padding-bottom: 5%;
margin: 0px 40px 0px 40px; /* Add some margin to keep it away from the edges */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
position: relative; /* For positioning the buttons absolutely */
overflow: hidden; /* Prevent scrolling */
}
@media (max-width: 768px) {
.send-offer-container {
width: 100vw;
height: 100vh;
margin: 0;
border-radius: 0;
padding: 10px;
overflow-y: auto; /* Allows vertical scrolling */
overflow-x: hidden; /* Prevents horizontal scrolling */
}
}
.send-offer-header {
display: flex;
align-items: flex-start;
justify-content: flex-start;
position: absolute;
top: 20px; /* Adjust as needed to position the logo vertically */
left: 20px; /* Adjust as needed to position the logo horizontally */
}
@media (max-width: 768px) {
.send-offer-header {
display: none;
}
}
.send-offer-footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.send-offer-footer-loi {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
#progress-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
@media (max-width: 768px) {
#progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: white; /* Optional: add background color for visibility */
padding: 10px 0; /* Adjust padding as desired */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Optional: add shadow for separation */
z-index: 10; /* Ensure it stays above other elements */
}
}
#progress-container-loi {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.progress-bar {
position: relative;
width: 100%;
max-width: 300px; /* Adjust the max width as needed */
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px; /* Space between progress bar and page number */
}
.progress-bar-fill {
height: 100%;
width: 0%; /* Initial width, will be updated dynamically */
background-color: coral;
transition: width 0.5s ease-in-out;
}
#progress-percentage {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: black; /* Ensure the text is visible on the coral background */
}
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
#navigation-container-loi {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
#page-number {
margin: 0 10px; /* Space between the buttons and the page number */
flex-grow: 1; /* Allow the page number to take up remaining space */
text-align: center; /* Center align the page number */
}
#page-number-loi {
margin: 0 10px; /* Space between the buttons and the page number */
flex-grow: 1; /* Allow the page number to take up remaining space */
text-align: center; /* Center align the page number */
}
.send-offer-next-btn, .send-offer-prev-btn {
padding: 10px 20px;
border: none;
background-color: darkorange;
color: white;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.modal-content {
border-radius: 20px; /* Adjust the value as needed */
}
.send-loi-next-btn, .send-loi-prev-btn, .send-offer-submit-btn {
padding: 10px 20px;
border: none;
background-color: darkorange;
color: white;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.send-offer-prev-btn {
visibility: hidden; /* Ensure the space for the button is maintained */
}
.send-loi-prev-btn {
visibility: hidden; /* Initially hide the previous button */
}
.send-offer-next-btn {
margin-right: 40px; /* Ensure the space for the button is maintained */
}
.send-offer-submit-btn {
margin-right: 40px; /* Ensure the space for the button is maintained */
}
.send-offer-next-btn:hover, .send-offer-prev-btn:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.send-loi-next-btn {
margin-right: 40px; /* Ensure the space for the button is maintained */
}
.send-loi-next-btn:hover, .send-loi-prev-btn:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button:focus {
outline: none;
}
#section-title {
font-size: 1.5rem;
color: #333;
margin-bottom: 20px;
text-align: center;
}
.form-group-send-offer {
margin-bottom: 20px;
}
.form-label-send-offer {
display: block;
font-weight: bold;
color: #666;
margin-bottom: 5px;
}
.form-input-send-offer {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.3s;
}
.form-check-send-offer {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-check-label-send-offer {
font-size: 1rem;
color: #666;
cursor: pointer;
}
.form-check-input-send-offer {
margin-right: 10px;
}
.form-check-input-send-offer:checked + .form-check-label-send-offer {
color: coral;
font-weight: bold;
}
.form-check-input-send-offer:checked {
accent-color: coral;
}
.form-input-send-offer:focus {
border-color: coral;
outline: none;
}
.page {
display: none; /* Hide all pages by default */
padding: 20px;
}
.page.active {
display: block; /* Show only the active page */
}
@media (max-width: 768px) {
.page {
padding: 0 !important; /* Remove padding on mobile */
}
}
.offer-price-fix {
padding-left: 14%;
font-size: 22px;
padding-top: 5%;
padding-bottom: 1%;
}
@media (max-width: 768px) {
.offer-price-fix {
padding-left: 0 !important;
font-size: 22px;
padding-top: 2%;
padding-bottom: 1%;
}
}
.offer-details-styling {
padding: 20px;
border: 1px solid #ddd;
margin-top: 6%;
cursor: auto;
}
@media (max-width: 768px) {
.offer-details-styling {
padding: 20px;
border: 1px solid #ddd;
margin-top: 6%;
margin-bottom: 35%;
cursor: auto;
}
}
.deposit-amount-style {
padding-left: 14%;
font-size: 20px;
padding-top: 3%;
padding-bottom: 0%;
}
@media (max-width: 768px) {
.deposit-amount-style {
padding-left: 0 !important;
font-size: 20px;
padding-top: 3%;
padding-bottom: 0%;
}
}
.additional-styling {
color: red;
padding-left: 14%;
font-size: 16px;
}
@media (max-width: 768px) {
.additional-styling {
color: red;
padding-left: 0 !important;
font-size: 16px;
}
}
.report-styling {
padding-left: 18%;
padding-top: 4%;
}
@media (max-width: 768px) {
.report-styling {
padding-left: 0 !important;
padding-top: 4%;
}
}
.pof-styling {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.pof-styling {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.occupancy-card-fix {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.occupancy-card-fix {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.loan-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.loan-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.inspection-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.inspection-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.insurance-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.insurance-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.lease-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.lease-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.selling-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.selling-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.report-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.report-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.warranty-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
}
@media (max-width: 768px) {
.warranty-styling-card {
padding: 20px;
border: 1px solid #ddd;
margin-top: 2%;
margin-bottom: 30%;
}
}
.margin-summary-styling {
margin-bottom: 7%;
}
@media (max-width: 768px) {
.margin-summary-styling {
margin-bottom: 35% !important;
}
}
.card-loi {
border: none;
box-shadow: none;
cursor: default;
}
/* Adjust label size to fit the text */
.form-label {
display: inline-block;
font-size: 1rem; /* Adjust font size as needed */
font-weight: 600; /* Make the text bold */
color: #343a40; /* Optional: Change the color if desired */
padding-bottom: 0.25rem; /* Adjust spacing between label and input */
}
/* Customize the card body */
.card-body-loi {
padding: 1.5rem; /* Adjust padding as needed */
background-color: none; /* Optional: Add background color if desired */
}
/* Ensure the inputs and textareas have consistent styling */
.form-control[readonly] {
background-color: #e9ecef;
color: #6c757d;
border: 1px solid #ced4da; /* Ensure borders match */
cursor: not-allowed; /* Change cursor to indicate read-only state */
}
.offer-price-group {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.offer-price-group label {
margin-right: 10px; /* Space between the label and the input field */
white-space: nowrap; /* Prevent the label from wrapping to a new line */
}
.offer-price-group .offer-price-input {
width: auto; /* Let the input field take up only as much space as needed */
max-width: 150px; /* Optionally set a max-width for the input field */
text-align: center; /* Center the text inside the input field */
}
.dropzone {
border: 2px dashed #fd7e14; /* Changed to orange (#fd7e14) */
border-radius: 10px;
padding: 20px;
text-align: center;
background-color: #f8f9fa;
cursor: pointer;
transition: background-color 0.3s ease;
height: 150px; /* Increased the height */
}
.dropzone p {
margin: 0;
font-size: 18px; /* Slightly increased the font size */
color: #fd7e14; /* Changed to orange (#fd7e14) */
}
.dropzone:hover {
background-color: #f7d7b4; /* Slightly darker shade of orange on hover */
}
.file-input {
display: none; /* Hide the default file input */
}
.btn-orange {
background-color: orange;
border-color: orange;
color: white;
}
.btn-orange:hover, .btn-orange:focus, .btn-orange.active {
background-color: darkorange;
border-color: darkorange;
}
.btn-inactive {
background-color: white;
border-color: lightgray;
color: lightgray;
}
.btn-inactive i, .btn-inactive span {
color: lightgray; /* Ensure the icon or text inside is light gray */
}
.is-invalid {
border-color: red;
}
.error-message {
margin-top: 5px;
color: red;
font-size: 14px;
}
@media (max-width: 768px) {
.margin-fix {
margin-bottom: 30%;
}
}
/*
.checkbox-group-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
} */
.checkbox-group-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Two columns on larger screens, adjusts for mobile */
gap: 10px;
}
@media (max-width: 768px) {
/* Make the container full-width on mobile */
#page-9 .container {
padding: 0 15px;
width: 100%;
}
/* Adjust grid layout for mobile screens */
.checkbox-group-grid {
grid-template-columns: 1fr; /* One column on mobile */
gap: 8px;
}
/* Make additional and excluded items inputs stack vertically on mobile */
.form-group {
flex-direction: column;
align-items: flex-start;
}
.form-group > div {
width: 100%; /* Full width for inputs on mobile */
}
/* Adjust styles for included/excluded labels and inputs */
.form-group label {
font-size: 16px; /* Slightly smaller font size for mobile */
}
#additional-items, #excluded-items {
width: 100%; /* Full width for mobile */
}
}
.form-check {
display: flex;
align-items: center;
}
label.correct-checkbox {
margin-left: 5px;
margin-top: 1px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.broker-photo {
width: 100%; /* Ensure the image takes up the full width of its container */
height: 150px; /* Set a fixed height */
object-fit: cover; /* Crop the image to fit within the bounds */
border-radius: 10px; /* Apply rounded corners if needed */
}
/* Terms of Use Custom Styling */
.terms-container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.terms-title {
color: #333;
font-weight: 700;
margin-bottom: 10px;
}
.terms-updated {
font-size: 0.9em;
margin-bottom: 20px;
}
.terms-section {
margin-bottom: 20px;
padding: 15px;
border-left: 4px solid #007bff;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.terms-heading {
font-size: 1.5em;
font-weight: 600;
color: #0056b3;
}
.terms-text {
font-size: 1em;
color: #444;
line-height: 1.6;
}
.terms-contact-link {
color: #007bff;
text-decoration: underline;
}
.terms-contact-link:hover {
color: #0056b3;
text-decoration: none;
}
/* Custom CSS for Careers Page */
.careers-page-container {
margin: 40px auto;
max-width: 800px;
}
.careers-listing-section {
background-color: #f8f9fa; /* Light grey background for contrast */
border-radius: 10px;
padding: 20px;
margin-bottom: 30px; /* Space between sections */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.careers-section-title {
font-size: 2em; /* Larger font for section titles */
color: orange; /* Primary color for titles */
margin-bottom: 15px; /* Space below the title */
}
.careers-section-text {
font-size: 1.1em; /* Slightly larger text for readability */
line-height: 1.6; /* Improve line spacing */
color: #333; /* Darker text for better contrast */
}
.careers-link-primary {
color: #007bff; /* Primary color for links */
text-decoration: none; /* Remove underline from links */
font-weight: bold; /* Make link text bold */
}
.careers-link-primary:hover {
text-decoration: underline; /* Underline on hover for better UX */
color: darkorange; /* Darker blue on hover */
}
/* List styling */
.careers-listing-section ul {
padding-left: 20px; /* Space from left for bullet points */
margin-bottom: 15px; /* Space below the list */
}
.careers-listing-section li {
margin-bottom: 10px; /* Space between list items */
}
.careers-apply-button {
background-color: orange; /* Primary color */
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.careers-apply-button:hover {
background-color: darkorange; /* Darker shade on hover */
}
.about-container {
padding: 20px;
background-color: #fff8f0; /* Light orange background */
border-radius: 8px;
}
.about-title {
color: #ff7f50; /* Coral orange color */
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
.about-section {
margin-bottom: 25px;
}
.about-subheading {
color: #ff6a3d; /* Slightly darker orange */
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 15px;
border-bottom: 2px solid #ffa07a; /* Light coral orange border */
padding-bottom: 8px;
}
.about-text {
color: #4a4a4a; /* Dark gray for readability */
font-size: 1rem;
line-height: 1.6;
margin-bottom: 15px;
}
.accessibility-container {
padding: 20px;
background-color: #f9f9f9; /* Light grey background for readability */
border-radius: 8px;
}
.accessibility-title {
color: #ff7f50; /* Coral orange */
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
.accessibility-section {
margin-bottom: 25px;
}
.accessibility-subheading {
color: #ff6a3d; /* Slightly darker orange */
font-size: 1.5rem;
font-weight: 600;
}
.accessibility-text {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
.accessibility-link {
color: #ff6a3d;
text-decoration: underline;
}
.accessibility-list {
list-style-type: disc;
margin-left: 20px;
color: #333;
}
/* ------------------------ Summary CSS Send Offer ------------------------- */
.occupancy-card {
cursor: pointer;
transition: all 0.3s ease;
border-radius: 12px;
}
.occupancy-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.selected-card {
border-color: #ff7f50 !important;
box-shadow: 0 8px 25px rgba(255, 127, 80, 0.25);
}
.loan-card {
cursor: pointer;
transition: all 0.3s ease;
border-radius: 12px;
}
.loan-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.selected-card {
border-color: #ff7f50 !important;
box-shadow: 0 8px 25px rgba(255, 127, 80, 0.25);
}
.sell-card {
cursor: pointer;
transition: all 0.3s ease;
border-radius: 12px;
}
.sell-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.selected-card {
border-color: #ff7f50 !important;
box-shadow: 0 8px 25px rgba(255, 127, 80, 0.25);
}
/* Shake animation for validation feedback */
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
.shake {
animation: shake 0.5s ease;
border-color: #dc3545 !important;
}
#first-name, #last-name {
border-radius: 12px;
}
#first-name:focus, #last-name:focus {
box-shadow: 0 0 8px rgba(255, 127, 80, 0.5);
border-color: #ff7f50;
}
#email {
border-radius: 12px;
}
#email:focus {
box-shadow: 0 0 8px rgba(255, 127, 80, 0.5);
border-color: #ff7f50;
}
.offer-details-styling {
background-color: #fafafa;
border-radius: 12px;
padding: 16px;
cursor: default;
pointer-events: none;
}
.offer-details-styling .card-title {
font-weight: bold;
color: #ff7f50;
}
.offer-details-styling ul li {
padding: 4px 0;
border-bottom: 1px solid #f0f0f0;
}
.offer-details-styling ul li:last-child {
border-bottom: none;
}
.text-coral {
color: #ff7f50;
}
.form-row-summary {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.form-group-summary {
margin-bottom: 15px;
}
.form-control-summary {
padding: 10px;
font-size: 14px;
background-color: #f8f9fa; /* Light background for read-only fields */
border: 1px solid #ced4da;
border-radius: 4px;
}
.card-home {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
height: auto;
cursor: pointer;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
height: auto;
cursor: pointer;
}
.input-group-text {
font-size: 16px;
}
@media (max-width: 768px) {
.form-group-summary {
flex: 0 0 100%;
max-width: 100%;
padding-right: 0;
}
}
.pills-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px; /* Space between each label */
padding: 20px;
background-color: transparent; /* Light gray background for contrast */
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}
.label-container {
display: inline-flex;
border: 2px solid orange;
border-radius: 50px;
overflow: hidden;
font-family: Arial, sans-serif;
}
.label-part {
padding: 5px 15px;
display: flex;
align-items: center;
font-size: 14px;
}
.label-text {
background-color: orange;
color: white;
}
.label-value {
background-color: white;
color: black;
}
.label-container:hover {
cursor: default;
}
.summary-section-table-wrapper {
padding: 20px;
background-color: transparent;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
margin: auto;
}
.summary-section-name-email-phone-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
@media (max-width: 768px) {
/* Stack labels and inputs vertically */
.summary-section-name-email-phone-table,
.summary-section-name-email-phone-table tr,
.summary-section-name-email-phone-table td {
display: block;
width: 100%;
}
/* Label cells on mobile */
.summary-section-name-input-cell,
.summary-section-email-input-cell,
.summary-section-phone-input-cell {
margin-top: 10px;
}
/* Adjust input widths */
.summary-section-name-input,
.summary-section-email-input,
.summary-section-phone-input {
width: 100%; /* Full width on mobile */
box-sizing: border-box;
}
/* Add label styles above inputs */
.summary-section-name-label,
.summary-section-email-label,
.summary-section-phone-label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
}
.summary-section-name-label,
.summary-section-email-label,
.summary-section-phone-label,
.summary-section-offerprice-label,
.summary-section-deposit-label,
.summary-section-occupancytype-label,
.summary-section-closingdate-label {
padding: 15px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #333;
}
#summary-occupancy-type {
text-transform: capitalize; /* Capitalizes the first letter of each word */
}
.summary-section-name-input-cell,
.summary-section-email-input-cell,
.summary-section-phone-input-cell {
padding: 15px;
}
.summary-section-name-input,
.summary-section-email-input,
.summary-section-phone-input {
width: 100%;
padding: 10px 15px;
border-radius: 25px;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
font-size: 14px;
box-sizing: border-box;
}
.summary-section-name-input:focus,
.summary-section-email-input:focus,
.summary-section-phone-input:focus {
outline: none;
border-color: coral;
box-shadow: 0 0 5px rgba(255, 127, 80, 0.5);
}
.rounded-label-container {
display: flex;
gap: 15px;
padding: 20px;
justify-content: center;
}
.rounded-label-type1,
.rounded-label-type2 {
display: inline-flex;
border-radius: 25px;
overflow: hidden;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* First Type of Label */
.label-type1-symbol {
background-color: orange;
color: white;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
}
.label-type1-value {
background-color: white;
color: black;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
}
/* Second Type of Label */
.label-type2-value {
background-color: white;
color: black;
padding: 10px 30px; /* Increased padding for the white section */
display: flex;
align-items: center;
justify-content: center;
}
.label-type2-symbol {
background-color: orange;
color: white;
padding: 10px 10px; /* Decreased padding for the percentage section */
display: flex;
align-items: center;
justify-content: center;
}
.toggle-input-entity {
display: inline-flex;
align-items: center;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.toggle-button {
background-color: rgba(255, 165, 0, 0.3); /* Light transparent orange for inactive buttons */
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.toggle-button.active {
background-color: orange; /* Solid orange for the active button */
}
.toggle-input {
padding: 10px 15px;
border: 1px solid #ccc;
font-size: 16px;
width: 150px;
text-align: center;
border-left: none;
border-right: none;
}
.toggle-input:focus {
outline: none;
border-color: coral;
}
.toggle-button:first-of-type {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.toggle-button:last-of-type {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.rounded-input-container {
display: inline-flex;
align-items: center;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.rounded-input-type1 {
display: inline-flex;
border-radius: 25px;
overflow: hidden;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.rounded-input-symbol {
background-color: orange;
color: white;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.rounded-input-field {
background-color: white;
color: black;
padding: 10px 15px;
border: none;
font-size: 14px;
text-align: right;
width: 100px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
box-sizing: border-box;
}
.rounded-input-field:focus {
outline: none;
border: 1px solid coral;
border-left: none; /* Ensures the border doesn't overlap with the symbol section */
}
.offer-deposit-summary-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px; /* Spacing above the container */
padding: 15px; /* Optional padding for better spacing within the container */
background-color: transparent; /* Light background for visual separation */
border-radius: 8px; /* Rounded corners for a smooth appearance */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.offer-deposit-summary-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.summary-table-cell {
padding: 15px;
vertical-align: top;
}
.document-list {
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
font-size: 14px;
color: #555;
}
.document-list li {
margin-bottom: 5px;
}
.document-list li strong {
color: #333;
}
.orange-tag {
display: inline-block;
background-color: orange;
color: white;
padding: 8px 16px;
border-radius: 15px;
font-size: 14px;
font-weight: bold;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: default;
}
.orange-tag .tag-text {
margin: 0;
padding: 0;
display: inline-block;
}
/* ----------------- Help pages -------------------- */
.header-account-assistance {
background-color: #f8f9fa; /* Light gray background */
padding: 40px 0; /* Vertical padding */
text-align: center; /* Center the text */
border-bottom: 2px solid #e9ecef; /* Optional: adds a subtle bottom border */
}
.header-account-assistance .container {
max-width: 1200px; /* Limits the width of the content */
margin: 0 auto; /* Centers the container */
}
.header-account-assistance h1 {
font-size: 2.5rem; /* Larger font size for the header */
color: #343a40; /* Darker gray color */
margin-bottom: 10px;
}
.header-account-assistance p {
font-size: 1.25rem; /* Slightly larger text for the description */
color: #6c757d; /* Medium gray for the description */
}
.card-help-height {
height: 30vh;
}
.article-header {
text-align: center;
margin-bottom: 2rem;
}
.article-title {
font-size: 2.5rem;
font-weight: bold;
color: #333;
}
.article-meta {
font-size: 1rem;
color: #6c757d;
margin-top: 0.5rem;
}
.divider {
margin: 2rem 0;
border: 0;
height: 1px;
background: #ddd;
}
.help-desc-content {
font-size: 1.125rem;
line-height: 1.75;
color: #444;
padding: 0 15%;
}
.help-desc-content h2,
.help-desc-content h3 {
margin-top: 2rem;
color: darkgrey;
font-weight: bold;
}
.help-desc-content p {
margin-bottom: 1.5rem;
text-align: justify;
}
.help-desc-content ul {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.help-desc-content li {
margin-bottom: 0.5rem;
}
.article-tags {
font-style: italic;
text-align: right;
font-size: 0.9rem;
}
/* ----------------- layout pages -------------------- */
/* Custom hover dropdown for nav */
.hover-dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}
.hover-dropdown .dropdown-menu {
display: none;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.dropdown-menu-left {
left: auto !important;
right: 0; /* Align right edges */
top: 100%; /* Position it below the button */
transform: none; /* Remove any shifting */
}
/* ----------------- SELL YOUR HOME ---------------- */
.spireex-sell-page {
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
}
.spireex-header {
background-color: #000;
color: #F09330;
padding: 50px 20px;
text-align: center;
}
.spireex-header-title {
margin: 0;
font-size: 3rem;
}
.spireex-page-title {
font-size: 3rem;
text-align: center;
color: #000; /* Black text */
margin: 60px 20px 40px 20px; /* top/bottom + small side padding for mobile */
line-height: 1.2;
word-wrap: break-word; /* Ensure long titles wrap on small screens */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.spireex-page-title {
font-size: 2.2rem; /* smaller font for tablets */
margin: 50px 15px 30px 15px;
}
}
@media (max-width: 480px) {
.spireex-page-title {
font-size: 1.8rem; /* smaller font for mobile phones */
margin: 40px 10px 20px 10px;
}
}
.spireex-header-subtitle {
font-size: 1.2rem;
margin-top: 10px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.spireex-section {
padding: 60px 20px;
max-width: 1000px;
margin: 0 auto;
}
.spireex-section-title {
font-size: 2rem;
margin-bottom: 20px;
}
.spireex-section-text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.spireex-btn {
background-color: #F09330;
color: #fff;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.spireex-btn:hover {
background-color: #d87c21;
}
.spireex-card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.spireex-card {
flex: 1 1 300px;
padding: 30px;
border: 1px solid #eee;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* Modal Styles */
.spireex-modal {
display: none;
position: fixed;
z-index: 1000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.spireex-modal-content {
background-color: #fff;
margin: auto;
padding: 40px;
border-radius: 10px;
width: 90%;
max-width: 500px;
text-align: center;
}
.spireex-input {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.spireex-modal-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.spireex-modal-close:hover {
color: #000;
}
.spireex-timeslots {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.spireex-timeslot {
padding: 10px 15px;
border: 1px solid #F09330;
border-radius: 5px;
cursor: pointer;
color: #F09330;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
}
.spireex-timeslot.selected {
background-color: #F09330;
color: #fff;
}
.spireex-timeslot:hover {
background-color: #F09330;
color: #fff;
}