body {
      background-color: #0f2b2f;
      font-family: 'Poppins', sans-serif;
    }

    /* Sidebar */
    .sidebar {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding: 20px;
      height: 100%;
    }

    .sidebar h5 {
      font-weight: 600;
      margin-bottom: 15px;
    }

    .sidebar .filter-group {
      margin-bottom: 25px;
    }

    .sidebar label {
      font-size: 0.9rem;
      color: #444;
    }

    .property-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  transition: border 0.3s, box-shadow 0.3s; /* smooth transition */
}

/* Hover effect */
.property-card:hover {
  border: 1px solid #000;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* optional: slightly stronger shadow */
}


    /* Image section */
    .property-image {
      position: relative;
      height: 350px;
      overflow: hidden;
    }
    .property-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Overlay controls */
    .overlay-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
      color: #333;
      cursor: pointer;
    }
    .overlay-btn:hover {
      background-color: #fff;
    }
    .btn-left { left: 15px; }
    .btn-right { right: 15px; }

    .overlay-top-right {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255,255,255,0.95);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .overlay-bottom-left {
      position: absolute;
      bottom: 15px;
      left: 15px;
    }
    .overlay-bottom-left .btn {
      font-size: 0.75rem;
      font-weight: 600;
      margin-right: 5px;
      border-radius: 20px;
      background-color: #000;
      color: #fff;
      border: none;
      padding: 5px 12px;
    }

    /* Info section */
    .property-info {
      padding: 20px;
      margin-top: 1px;
    }
    .property-title {
      font-size: 1.5rem;
      font-weight: 600;
    }
    .property-location {
      color: #666;
      font-size: 0.95rem;
    }
    .price {
      font-size: 1rem;
      font-weight: 500;
     
    }

    .agent-info {
      display: flex;
      align-items: center;
      margin-top: 15px;
    }
    .agent-info img {
      width: 50px;
      height: 59px;
      margin-right: 10px;
      border: 1px solid #444;
      object-fit: cover; /* ensures image fills the box without stretching */
    }

    .contact-btn {
      background-color: #fff;
      border: 1px solid #333;
      padding: 6px 16px;
      border-radius: 5px;
      font-weight: 500;
      transition: 0.2s;
      margin-bottom: -5px;

    }
    .contact-btn:hover {
      background-color: #f1f1f1;
    }

    /* Normal pagination buttons */
.pagination .page-link {
  background-color: #000;   /* black background */
  color: #fff;              /* white text */
  border: 1px solid #000;   /* black border */
}

/* Hover effect */
.pagination .page-link:hover {
  background-color: #333;   /* slightly lighter black on hover */
  color: #fff;
}

/* Active page button */
.pagination .page-item.active .page-link {
  background-color: #000;   /* black background */
  color: #fff;              /* white text */
  border: 1px solid #000;   /* black border */
}


    /* Responsive behavior */
    @media (max-width: 991px) {
      .sidebar {
        margin-bottom: 20px;
      }
    }