body {
  font-family: 'Roboto', sans-serif !important;
}

#navbarNav{
  padding-top: 14px;
}

.logo{
  height: 50px;
}

.like-count{
  font-style: normal;
}

.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  margin: 58px 60px;
}

.navbar-brand img {
  border: 0;
}

.navbar-nav .nav-link {
  text-decoration: none !important;
  color: #007bff;
}

.navbar-nav .nav-link:hover {
  color: #0056b3;
}

.notification-icon {
  margin-right: 15px;
  padding: 5px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.notification-icon a {
  color:#000000;
}

.notification-icon a:hover {
  background-color: #bba168 !important;
  color: #f8f9fa !important;
}

.navbar-text {
  margin-right: 10px;
  position: relative;
}

.navbar-dropdown {
  position: absolute;
  top: 100%;
  display: none;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  min-width: 160px;
  z-index: 1;
}

.navbar-text:hover .navbar-dropdown {
  display: block;
}

.navbar-dropdown a {
  padding: 8px 12px;
  text-decoration: none;
  color: #007bff;
  display: block;
}

.navbar-dropdown a:hover {
  background-color: #f8f9fa;
}

.notification-button {
  color: rgba(0,0,0,.5) !important;
  border-color: #e0e0e0 !important;
}

.login-button {
  margin-right: 5px;
  height: 40px;
  width: 122px;
  color: rgba(0,0,0,.5) !important;
  border-color: #e0e0e0 !important;
}
.login-button:hover {
  background-color: #bba168 !important;
  color: #f8f9fa !important;
}
/* Footer */
footer {
  background-color: #1E1E1E;
  padding: 20px;
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer-left,
.footer-right {
  text-align: center;
  margin-bottom: 20px;
}

.footer-left h5,
.footer-right h5 {
  color: white;
}

.footer-left ul,
.footer-right ul {
  list-style: none;
  padding: 0;
}

.footer-left ul li,
.footer-right ul li {
  margin-bottom: 10px;
}

.social-icons {
  margin-bottom: 15px;
  color: white;
}

.social-icons a {
  margin-right: 10px;
  color: white !important;
  text-decoration: none;
}

.grid-button{
  display: grid;
  align-content: center;
}

.search-input button {
  color: white;
}

.search-input input::placeholder {
  color: white;
}

.footer-contact {
text-align: center;
}

.footer-contact h5 {
  color: white;
  margin-bottom: 10px;
}

.footer-contact ul {
  list-style: none;
  padding: 0;
}

.footer-contact ul li {
  margin-bottom: 5px;
}

.footer-contact ul li a {
  color: white;
  text-decoration: none;
  display: block;
  transition: color 0.3s;
}

.footer-contact ul li a:hover {
  color: #007bff;
}

.search-btn{
  background-color: white !important;
  color: rgba(0,0,0,.5) !important;
  border-color: #e0e0e0 !important;
}

.search-btn:hover{
  background-color: #bba168 !important;
  color: #f8f9fa !important;

}

.search-footer::placeholder {
  color: #9C9C9C !important;
}

/* end footer */

/* First image */
.img-apart{
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
.img-text{
  position: absolute;
  color: white;
  right: 40%;
  top: 40%;
}
/* end first image */

/* Search */
.search-box{
  position: relative;
  min-height: 200px;
}
.search-container {
  position: absolute;
  max-width: 838px;
  min-width: 838px;
  max-height: auto;
  min-height: auto;
  padding: 20px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  top: -7rem;
  margin-left: 50%;
  transform: translate(-50%);
}

.container-for-search{
  margin-bottom: 20px;
  margin-top: 20px;
}
.search-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
}

.select-filter{
  border: none;
  background: transparent;
}

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

.filter-item {
  flex: 1;
  margin-right: 10px;
}

#property-type, #price, #bedroom{
  background: white;
  border: none;
}

.search-property{
  height: 60px;
  width: 70%;
  background-color: #F5F5F5;
  border-radius: 10px;
  border: none;
  text-align: center;
}

.search-property::placeholder {
  color: #9C9C9C !important;
  text-align: center;
}

.search-button {
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border: none !important;
  background: #FF5C00 !important; 
  color: #fff;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.search-button:hover {
  background: rgba(255, 92, 0, 0.9) !important;
}

.img-search{
  margin: 0px 5px 5px;
}

#searchResults {
  position: absolute;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
}

#searchResults li {
  padding: 10px;
  cursor: pointer;
}

#searchResults li:hover {
  background-color: #f5f5f5;
}
/* end search */

/* content residential */
.content-residential {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden; 
}

.title-residential{
  margin-top: 2em;
} 


.view-more-residential{
  margin-top: 2em;
}

.property-residential{
  background: #ffffff;
  margin-bottom: 3em;
  border-radius: 14px;
}

/* end content residential */

/* content commercial */
.content {
  position: relative;
  max-width: 100%;
  margin: 20px auto;
  box-sizing: border-box;
  overflow: hidden; /* Hide overflow to prevent scrolling */
  padding: 0 10px; /* Add padding for better responsiveness */
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.view-more {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #AC9B05;
  text-decoration: none;
}

.view-more:hover{
  color: #AC9B05;
  text-decoration: none;
}

.property-container {
  display: flex;
  flex-wrap: wrap; /* Allow properties to wrap to the next line on smaller screens */
  margin-top: 20px;
}

.property {
  /* flex: 0 0 calc(33.33% - 20px); */
  width: 286px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.property-commercial{
  border-radius: 14px;
  border: 1px solid #EEE;
  background: #FFF; 
}

.property img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 10px;
}

.property-info {
  margin-top: 10px;
  margin-left: 10px;
}

.property-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.property-description {
  color: #555555;
  margin-bottom: 10px;
}

.property-price {
  font-size: 16px;
  font-weight: bold;
  color: #030303;
}

.property-details {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 2em;
}

.icon {
  margin-right: 5px;
  color: #555555;
}

.inactive{
  color : #ccc !important;
}

.unbookmark{
  color : #ccc !important;
}

.bookmark-active{
  color : #f0d97e !important;
}

.active{
  color : #98b1ec !important
}

/* end content commercial  */

/* Modal login */
.modal-content, .modal-header, .modal-footer {
  border: none !important;
}

.btn-login{
  background: #FF5C00 !important;
  border: none !important;
}

.btn-login:hover {
  background: rgba(255, 92, 0, 0.9) !important;
}

.text-forgot-password a {
  color: #FF5C00;
  text-decoration: none;
}

.text-forgot-password a:hover {
  color: rgba(255, 92, 0, 0.9);
  text-decoration: none;
}

.buttonload {
  position: relative;
}

.buttonload i {
  display: none;
  position: absolute;
  top: 30%;
  left: 41%;
  transform: translate(-50%, -50%);
}

.buttonload.loading i {
  display: inline-block;
}

/* end modal login */

/* Adjust Responsive */

.icon-like {
  z-index: 999;
  position: absolute;
  right: 0;
  bottom: 33px;
}

.icon-like i {
  padding: 4px;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .property {
    /* flex: 0 0 calc(50% - 20px); */
    flex: unset;
    margin-right: unset;
  }
  .search-container {
    top: 8px;
    min-width: 400px;
  }

  .search-box{
    margin-bottom: 31px;
  }

  .search-property{
    height: 40px;
    width: 70%;
  }

  .img-title{
    font-size: 1.0rem;
  }

  .img-desc{
    font-size: 0.75rem;
  }

  .property {
    flex-direction: column;
  }

  .property img {
      margin-bottom: 0;
  }

  .property-info {
      flex: 1;
      margin-left: 10;
      margin-top: 10px;
  }
}

@media (max-width: 1000px) {
  .grid-search{
    margin-bottom: 10px !important;
  }

  .notification-icon {
      margin-bottom: 15px !important;
      margin-top: 15px;
  }

  /* .search-container {
    min-width: auto;
    max-width: 285px;
  } */
}

@media only screen and (max-width: 500px) {
  .view-more{
    position: unset !important;
  }

  .search-container {
    min-width: unset;
    max-width: 300px;
  }

  .filter-container {
    display: unset;
  }

  .content{
    margin-top: 15vh;
  }
}
/* end responsive */