/* 

Template: Real State Website
Author: Shuvo Mallick
Description: Real State Template
Version: 1.0.0
Keywords: real state, Template, bootstrap template etc. 

*/

/* =========== CSS FILES LIST =========== */
/* ----- Utilities CSS ----- */
/* ----- Style CSS ----- */
/* ----- Home Page V2 CSS ----- */
/* ----- Catalog CSS ----- */
/* ----- Account CSS ----- */
/* ----- Vendor CSS ----- */
/* ----- Pages CSS ----- */
/* =========== CSS FILES LIST =========== */

/* ===== Style File INDEX ===== */
/* 
  1. Header Section
  2. Hero/Banner Section
  3. Category Section
  4. Service Section
  5. Top Offer Section
  6. Added Today Section
  7. Calculate the Cost Section
  8. Search Property Section
  9. Our partners Section
  10. Top real estate agents Section
  11. Footer Section
  */
/* ===== Style File INDEX ===== */

/* =================== NEXT CSS FILE =================== */
/* ===== VENDOR CSS ===== */
/* =================== NEXT CSS FILE =================== */

/* ===== Import CSS Files ===== */
@import "./utilities.css";
@import "./home-v2.css";
@import "./catalog.css";
@import "./account.css";
@import "./vendor.css";
@import "./pages.css";
@import "./responsive.css";

/* ===== NAVBAR START ===== */
.navbar-brand {
  width: 116px;
}

.custom-header {
  font-weight: 700;
  font-size: 28px;
}

.menu-language {
  border-right: 1px solid var(--bs-gray-300);
}

.custom-menu li a {
  font-weight: 600;
  font-size: 15px;
  color: var(--bs-gray-800) !important;
}

.custom-menu li a:hover {
  font-weight: 600;
  font-size: 15px;
  color: var(--bs-primary) !important;
}

.dropdown-menu li a {
  font-weight: 400;
  font-size: 15px;
  color: var(--bs-gray-800) !important;
}

.dropdown-menu li a:hover {
  font-weight: 400;
  font-size: 15px;
  color: var(--bs-primary) !important;
}

.nav-item .active {
  color: var(--bs-primary) !important;
}

.custom-btn {
  background-color: var(--bs-primary);
  border-radius: 8px;
  padding: 8px 20px;
  color: white;
  font-weight: 600;
  border: none;
}

.sign-in-btn {
  color: var(--bs-primary);
  font-weight: 600;
}

.sign-in-btn:hover {
  color: var(--bs-white) !important;
}

.custom-menu .dropdown-toggle::after {
  all: unset;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-white);
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler {
  border: transparent !important;
}
/* Navbar colapse to Cross */
.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  transition: 0.5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: rgba(var(--bs-primary-rgb));
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}

/* when navigation is clicked */
.navbar-toggler .top-bar {
  margin-top: 0px;
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  margin-top: 0px;
  transform: rotate(-135deg);
}

/* state when the navbar is collapsed */
.navbar-toggler.collapsed .top-bar {
  margin-top: -20px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  margin-top: 20px;
  transform: rotate(0deg);
}

/* color of 3 lines */
.navbar-toggler.collapsed .toggler-icon {
  background-color: linear-gradient(
    263deg,
    rgba(252, 74, 74, 1) 0%,
    rgba(0, 212, 255, 1) 100%
  ) !important;
}
/* ===== NAVBAR END ===== */

/* ===== Sign In Modal START ====== */
.modal {
  --bs-modal-width: 952px !important;
}

.btn-close {
  width: 10px;
  height: 10px;
}

.sign-in-modal .left-contents .dont-have {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-700);
}

.border-right {
  border-right: 1px solid var(--bs-gray-300) !important;
}

.sign-in-modal .right-contents .or,
.signup-modal .right-contents .or {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-700);
}

.sign-in-modal .sign-in-form .form-label,
.forgot-pass,
.signup-modal .signup-form .form-label,
.signup-modal .dont-have,
.signup-modal .form-check {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-900);
}

.forgot-pass {
  color: var(--bs-primary) !important;
}
/* ===== Sign In Modal END ====== */

/* ===== Sign UP Modal START ====== */
.modal-title {
  font-weight: 700;
  font-size: 28px;
  color: var(--bs-gray-900);
}

.signup-modal .left-list {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-700);
}
/* ===== Sign UP Modal END ====== */

/* ===== HERO/BANNER START===== */
.hero .hero-title {
  font-size: 56px;
  font-weight: 700;
  color: var(--bs-gray-900);
}

.hero .hero-description {
  font-size: 20px;
  color: nav(--bs-gray-700);
  margin-right: -54px;
}

@media (max-width: 650px) {
  .hero .hero-description {
    margin-right: 0px !important;
    padding-right: 5px !important;
  }

  .hero .hero-title {
    font-size: 45px;
  }
}

/* form start */
.hero .search-location {
  margin-top: -30px;
  box-shadow: 0px 2px 2px -2px rgba(31, 27, 45, 0.08),
    0px 4px 12px rgba(31, 27, 45, 0.08);
  border-radius: 8px;
  z-index: 20;
}

.search-location .form-select {
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.rent-wrapper:first-child {
  box-shadow: 5px 0 5px -2px rgba(31, 27, 45, 0.12);
  border-radius: 10px 0px 0px 0px;
}

.rent-wrapper {
  width: 175px;
}

.rent-wrapper {
  border-right: 1px solid var(--bs-gray-300);
}

.rent-wrapper:nth-child(2) {
  border-left: 1px solid var(--bs-gray-300);
}

.rent-wrapper:nth-child(2) i {
  margin-left: 15px;
}

.rent-wrapper:last-child,
.rent-wrapper:first-child,
.rent-wrapper:nth-last-child(2) {
  border-right: none;
}

.rent-field .form-select,
.rent-field i {
  color: var(--bs-gray-800) !important;
}

.search-location .form-select,
.form-label,
.search-location i {
  color: var(--bs-gray-600);
}

.search-location .form-select:hover,
.form-label:hover,
.search-location i:hover {
  color: var(--bs-gray-800);
}

.search-location i {
  font-size: 22px;
}

.search-location .filter-item {
  flex: 1;
}

.search-location .filter-range {
  max-width: 10rem;
}

/* Rage */
/* .filter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--bs-primary);
}

.filter-range:hover::-webkit-slider-thumb {
  outline: none;
  box-shadow: none;
  background: var(--bs-primary);
}
} */

/* Range Using NO UI Slider CSS */
#slider {
  all: unset;
  background-color: var(--bs-gray-400);
  height: 8px;
  min-width: 6.5rem;
  border-radius: 1rem;
}

#slider .noUi-connects {
  border-radius: 1rem;
}

#slider .noUi-connect {
  background-color: var(--bs-primary);
}

#slider .noUi-handle {
  width: 16px;
  height: 16px;
  background-color: var(--bs-white);
  top: -4px;
  right: -9px;
  border-radius: 9px;
  border: 4px solid var(--bs-primary);
}

.noUi-handle:after,
.noUi-handle:before {
  display: none;
}

#slider .noUi-tooltip {
  bottom: 180%;
  font-size: 14px;
  color: var(--bs-gray-700);
  border: 0;
  box-shadow: var(--shadow-small);
  padding: 4px 12px;
}

/* button */
.search-btn {
  background-color: var(--bs-primary);
  border: none;
  padding: 1rem 1.2rem;
}

.search-btn {
  background-color: var(--bs-primary) !important;
}

.search-btn i {
  font-size: 1rem;
}

@media (max-width: 1400px) {
  .responsive-search {
    width: 90%;
  }
}
/* ===== HERO/BANNER END===== */

/* ===== Category Section START===== */
.category {
  background-color: var(--bs-white);
  box-shadow: var(--shadow-small);
  border-radius: 0.7rem;
  transition: box-shadow 400ms ease-in;
}

.category:hover {
  cursor: pointer;
  box-shadow: var(--shadow-default);
}

.category:hover .category-icon {
  background-color: rgba(var(--bs-primary-rgb), 1);
}

.category-icon i {
  transition: all 300ms ease;
  font-size: 25px;
}

.category:hover i {
  color: var(--bs-white);
}

.category-icon {
  background: rgba(var(--bs-primary-rgb), 0.1);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  transition: all 300ms ease;
}

.category > p {
  font-weight: 700;
  color: var(--bs-gray-900);
}
/* ===== Category Section END===== */

/* ===== Service START===== */
.service {
  border-radius: 12px;
  align-items: center;
  background-color: var(--bs-white);
  transition: all 300ms ease;
}

.service:hover {
  cursor: pointer;
  box-shadow: 0px 2px 2px -2px rgba(31, 27, 45, 0.08),
    0px 4px 12px rgba(31, 27, 45, 0.08);
}

.service img {
  width: 225px;
}

.service h5 {
  font-weight: 700;
  font-size: 24px;
  color: var(--bs-gray-900);
}

.service p {
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-700);
}

.service .custom-btn {
  background: var(--bs-primary);
  border-radius: 8px;
  font-weight: 700;
  color: var(--bs-white);
  padding: 10px 24px;
}
/* ===== Service END===== */

/* ===== Top Offer START===== */
.heading > h2 {
  font-weight: 700;
  font-size: 28px;
  color: var(--bs-gray-900);
}

.heading > a {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-700);
  text-decoration: none;
}

/* Property Card */
.property {
  box-shadow: var(--shadow-small);
  border-radius: 12px;
  transition: box-shadow 300ms ease;
}

.property:hover {
  cursor: pointer;
  box-shadow: var(--shadow-default);
}

.property .card-top::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(var(--bs-black-rgb), 0.5);
  z-index: 1;
  opacity: 0;
  transition: all 300ms ease;
}

.property:hover .card-top::after {
  opacity: 1;
}

.property:hover .favorite-btn {
  transform: scale(1);
}

.property-type {
  font-weight: 400;
  font-size: 12px;
  color: var(--bs-primary);
  text-transform: uppercase;
}

.property .property-feature,
.ac-property .property-feature {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-gray-800);
}

.property .property-address,
.ac-property .property-address {
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-600);
}

.property .property-price,
.ac-property .property-price {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-gray-700);
}

.property .property-price > i,
.ac-property .property-price > i {
  color: var(--bs-gray-600);
  font-size: 21px;
  vertical-align: bottom;
}

.property .property hr,
.ac-property .property hr {
  border: none;
  border: 1px solid var(--bs-gray-300);
}

.property .property-details > p,
.ac-property .property-details > p {
  color: var(--bs-gray-600);
  font-size: 14px;
}

.property .property-details > i .ac-property .property-details > i {
  color: var(--bs-gray-600);
}

.property .badges .ac-property .badges {
  z-index: 2;
}

.favorite-btn {
  background-color: var(--bs-white);
  position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 2;
  transform: scale(0);
  transition: all 300ms ease;
}

.favorite-btn:hover {
  background-color: var(--bs-white) !important;
}

.favorite-btn > i {
  color: var(--bs-primary);
}

/* SWIPER SLIDER */
.swiper-container .swiper-wrapper {
  margin-bottom: 3rem;
}

.swiper-container .swiper-pagination {
  bottom: 0;
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: var(--shadow-small);
}

.swiper-container .swiper-button-prev {
  left: -2rem;
}

.swiper-container .swiper-button-next {
  right: -2rem;
}

.swiper-container .swiper-button-prev::after,
.swiper-container .swiper-button-next::after {
  font-size: 1.25rem;
  color: var(--bs-gray-800);
  font-family: "icomoon" !important;
}

.swiper-container .swiper-button-prev::after {
  content: "\e9c2";
}

.swiper-container .swiper-button-next::after {
  content: "\e9c4";
}

.swiper-container .swiper-pagination-bullet {
  width: 1rem;
  height: 6px;
  opacity: 0.4;
  border-radius: 4px;
  background-color: var(--bs-gray-700);
  transition: width 300ms;
}

.swiper-container .swiper-pagination-bullet-active {
  opacity: 1;
  width: 2rem;
}
/* /SWIPER SLIDER */

/* ===== Top Offer END===== */

/* ===== Added Today START ===== */
.tab-btn {
  padding: 8px 16px 8px 16px;
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-200) !important;
  border: none;
  border-radius: 8px;
}

.tab-btn:hover {
  color: var(--bs-primary);
  background-color: var(--bs-white) !important;
  box-shadow: var(--shadow-small);
}

.tab-btn-active {
  color: var(--bs-primary);
  background-color: var(--bs-white) !important;
  box-shadow: var(--shadow-small);
}

.added-today-service {
  position: relative;
  border-radius: 12px;
  cursor: pointer;
}

.added-today-service img {
  width: 100%;
  position: relative;
}

.added-today-service .image-overlay {
  content: "";
  position: absolute;
  background: var(--bs-gradient-image);
  width: 100%;
  height: 100%;
  /* border-radius: 12px; */
  z-index: 1;
}

.added-today-service .property-details {
  z-index: 1;
  color: var(--bs-white) !important;
}

.added-today-service .property-type {
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--bs-white) !important;
}

.added-today-service .property-feature {
  font-weight: 700;
  font-size: 20px;
}

.added-today-service .property-address {
  font-weight: 400;
  font-size: 14px;
}

.added-today-property-button {
  z-index: 1;
}

.added-today-property-button .custom-btn {
  padding: 8px 10px 8px 18px;
  border-radius: 8px 0 0 8px;
  font-weight: 700;
  font-size: 16px;
}

.custom-btn:hover + .heart-icon-btn {
  border-left: 1px solid var(--bs-primary);
}

.added-today-property-button .heart-icon-btn {
  padding: 8px 18px 8px 10px;
  border-radius: 0 8px 8px 0;
  font-size: 1.1em;
  background-color: var(--bs-primary);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.added-today-property-button .heart-icon-btn:hover {
  border-left: 1px solid var(--bs-primary);
}

.added-today-services .property-details {
  width: 65%;
}
/* ===== Added Today END ===== */

/* ===== Calculate START===== */
.calculate img {
  width: 416px;
}

.calculate-details > h2 {
  color: var(--bs-gray-900);
  font-weight: 700;
  font-size: 32px;
}

.calculate-details > p {
  color: var(--bs-gray-700);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
}

.calculate-details .custom-btn {
  color: var(--bs-white);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 32px 14px 32px;
}

.modal-calculate {
  --bs-modal-width: 600px !important;
}

.modal-calculate-contents .form-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-gray-900);
}
/* ===== Calculate END===== */

/* ===== Search property by city START===== */
.search-property {
  box-shadow: var(--shadow-small);
  border-radius: 12px;
  transition: box-shadow 300ms ease;
}

.search-property:hover {
  cursor: pointer;
  box-shadow: var(--shadow-default);
}

.card-top::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(var(--bs-black-rgb), 0.5);
  z-index: 1;
  opacity: 0;
  transition: all 300ms ease;
}

.search-property:hover .card-top::after {
  opacity: 1;
}

.search-property .property-feature {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-gray-800);
}

.search-property .custom-progress span {
  font-weight: 400;
  font-size: 14px;
}

.search-property .property-progress {
  font-weight: 400;
  font-size: 12px;
  color: var(--bs-white);
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  transform: scale(0);
  transition: all 300ms ease;
}

.search-property:hover .property-progress {
  transform: scale(1);
}
/* ===== Search property by city END===== */

/* ===== Our partners START ===== */
.our-partners .our-partner {
  cursor: pointer;
}

.our-partners .our-partner:hover {
  transform: scale(1.1);
  transition: all 300ms ease;
}
/* ===== Our partners END ===== */

/* ===== Top real estate agents Section START ===== */
.top-agents {
}

.top-re-agent .top-agent-pic {
  width: 400px !important;
  height: 400px;
}

.top-re-agent .top-agent-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-agent-review-area {
  margin-left: -80px;
  width: 526px;
}

.top-agent-review .agent-quote-mark {
  right: 0;
  top: 0;
  margin-top: -17px;
  margin-right: 30px;
}

.top-agents .top-agent-review {
  box-shadow: var(--shadow-small);
  border-radius: 12px;
  padding: 20px;
}

.top-agents .top-agent-review > h3 {
  font-weight: 700;
  font-size: 24px;
  color: var(--bs-gray-9900);
}

.top-agents .top-agent-review > p {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-700);
}

.top-agent-review .agent-info {
  cursor: pointer;
}

.top-agent-review .agent-info > h4 {
  font-weight: 700;
  font-size: 18px;
  color: var(--bs-gray-800);
}

.top-agent-review .agent-info > p {
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-600);
}

.agent-info .social-icons {
  color: var(--bs-gray-700);
}

.agent-info .social-icons > i {
  background-color: var(--bs-white);
  padding: 9px;
  border-radius: 50%;
  box-shadow: var(--shadow-small);
  font-size: 15px;
  cursor: pointer;
}

.agent-info .social-icons > i:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  box-shadow: var(--shadow-large);
  transition: all 300ms ease;
}

.agent-rating .rating {
  color: var(--bs-warning);
}

.agent-rating .rating > i {
  font-size: 16px;
}

.top-agent-review .agent-rating > p {
  color: var(--bs-gray-600);
  font-weight: 400;
  font-size: 14px;
}

@media (max-width: 700px) {
  .top-agent-review-area {
    margin-left: 0px !important;
    width: 100%;
  }
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(253, 86, 49, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* ===== Top real estate agents Section END ===== */

/* ===== FOOTER START===== */
.footer-area {
}

.footer-contact img {
  width: 116px;
}

.footer-contact p {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-gray-800);
}

.custom-social-icons > i {
  background-color: var(--bs-white);
  padding: 9px;
  border-radius: 50%;
  box-shadow: var(--shadow-small);
  font-size: 15px;
  cursor: pointer;
  color: var(--bs-gray-700);
}

.custom-social-icons > i:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  box-shadow: var(--shadow-large);
  transition: all 300ms ease;
}

.footer-heading {
  font-weight: 700;
  font-size: 20px;
  color: var(--bs-gray-900);
}

.custom-footer-quick-link > p,
.custom-footer-about-link > p {
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-800);
  line-height: 1.7;
}

/* featured news */
.featured-news-img img {
  width: 100px;
}

.featured-news-info {
  margin-left: 25px;
}

.featured-news-info > p {
  font-weight: 400;
  font-size: 12px;
  color: var(--bs-primary);
}

.featured-news-info h3 {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-gray-800);
}

.featured-news-info .news-description {
  font-weight: 400;
  font-size: 14px;
  color: var(--bs-gray-700);
}

.featured-news-date p {
  font-weight: 400;
  font-size: 12px;
  color: var(--bs-gray-700);
}

.footer-news-divider {
  border: 0.2px solid var(--bs-gray-600) !important;
  opacity: 0.1;
}

/* download our app */
.custom-download-our-app {
  background-color: #1f1b2d;
  border-radius: 12px;
}

.custom-download-app-artwork img {
  margin-top: -50px;
  width: 241px;
}

.custom-download-app-store-icon {
}

.custom-download-app-store-icon img {
  width: 176px;
  height: 56px;
}

@media (max-width: 1200px) {
  .download-app-info-icon {
    flex-direction: column !important;
  }
}

.download-app-info h4 {
  font-weight: 700;
  font-size: 24px;
  color: var(--bs-white);
}

.download-app-info p {
  font-weight: 400;
  font-size: 16px;
  color: var(--bs-white);
}
/* ===== FOOTER END===== */