/* HTML + BODY */
html,
body {
  overflow-y: scroll;
  scrollbar-width: none;
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html,
body {
  -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* ====================== Navbar Gradient ====================== */
.custom-navbar {
  background: rgb(3, 2, 61) !important;
  height: 80px;
}

.custom-navbar .logo {
  width: 150px;
  height: 50px;
  /* background-color: #ffffffc7; */
  border-radius: 10px;
}

.custom-navbar .active {
  color: #ffffff !important;
  background: #b680e250;
  border-radius: 10px;
}

.custom-toggler {
  width: 35px;
  height: 30px;
  font-size: 20px;
  position: relative;
  color: #eee;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* 🔥 Mobile menu background fix */
@media (max-width: 991px) {
  .custom-navbar .navbar-collapse {
    background: rgb(3, 2, 61) !important;
    padding: 15px 20px;
    margin-top: 10px;
    border-radius: 10px;
  }
  .custom-navbar {
    height: 60px;
  }

  .custom-navbar .nav-link {
    color: #fff !important;
    padding: 10px 20px !important;
  }

  .custom-navbar .logo {
    width: 100px;
    height: 40px;
  }

  .custom-navbar .btn {
    width: 100%;
    margin-top: 10px;
  }
}

/* ============================================================= */
/* ================= Find Your Best Property =================== */
/* ============================================================= */
.hero-section {
  height: 520px;
  background:
    linear-gradient(rgba(74, 58, 168, 0.65), rgba(147, 51, 234, 0.65)),
    url("https://plus.unsplash.com/premium_photo-1682656220562-32fde8256295?fm=jpg&q=60&w=3000")
      center/cover no-repeat;
}

.search-wrapper {
  max-width: 1100px;
  margin: auto;
  background: #fff;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* each block */
.search-item {
  flex: 1;
  border-right: 1px solid #e5e5e5;
  position: relative;
}

.search-item:last-child {
  border-right: none;
}

/* input */
.search-item input {
  width: 100%;
  height: 60px;
  border: none;
  padding: 0 40px 0 20px;
  outline: none;
}

/* dropdown */
.search-item select {
  width: 100%;
  height: 60px;
  border: none;
  padding-left: 20px;
  appearance: none;
  outline: none;
}

/* icon */
.search-item i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

/* button */
.search-btn {
  background: #4b5cff;
  color: #fff;
  border: none;
  padding: 0 30px;
  font-weight: 600;
}

/* Overlap section */
.stats-section {
  margin-top: -40px;
  position: relative;
  z-index: 10;
}

/* Main white card */
.stats-card {
  background: #fff;
  border-radius: 16px;
  padding: 1px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Each stat */
.stats-item {
  padding: 10px 0;
}

/* Icon box */
.icon-box {
  width: 85px;
  height: 85px;
  margin: 0 auto 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Colors like image */
.icon-box.purple {
  background: #eef0ff;
  color: #4b5cff;
}
.icon-box.violet {
  background: #f3e8ff;
  color: #9333ea;
}
.icon-box.orange {
  background: #fff2e5;
  color: #f97316;
}
.icon-box.cyan {
  background: #e6f9fb;
  color: #06b6d4;
}

/* Numbers */
.stats-item h4 {
  font-weight: 700;
  margin-bottom: 2px;
}

/* Labels */
.stats-item p {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

@media (max-width: 992px) {
  .hero-section {
    height: 550px;
  }
}

@media (max-width: 576px) {
  .hero-section {
    height: 550px;
  }

  .search-wrapper {
    flex-direction: column;
    border-radius: 10px;
  }

  .search-item {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }

  .search-item:last-child {
    border-bottom: none;
  }

  .search-item input,
  .search-item select {
    height: 55px;
  }

  .search-btn {
    width: 100%;
    height: 55px;
    border-radius: 0 0 10px 10px;
  }

  /* stats responsive */
  .stats-card {
    padding: 15px 5px;
  }

  .icon-box {
    width: 65px;
    height: 65px;
    font-size: 18px;
  }
}

/* ============================================================= */
/* ================= Latest Property Cards ===================== */
/* ============================================================= */
.property-box {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.4s;
}

.property-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* Image */
.property-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.property-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay hover actions */
.img-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: 0.3s;
}

.img-actions button {
  background: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.property-box:hover .img-actions {
  opacity: 1;
}

/* Badges */
.badges {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  gap: 6px;
}

/* Body */
.property-body {
  padding: 18px;
  height: 170px;
}

.property-body h6 {
  font-weight: 600;
  margin-bottom: 6px;
}

.location {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.price {
  font-size: 20px;
  font-weight: 700;
  color: #6f2dbd;
}

.price span {
  font-size: 14px;
  color: #888;
}

/* Meta */
.meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  color: #666;
}

/* Footer */
.property-footer {
  border-top: 1px solid #eee;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.property-footer img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.property-footer small {
  display: block;
  font-size: 12px;
  color: #999;
}

/* ============================================================= */
/* ================= Why Choose Us Section ===================== */
/* ============================================================= */

.why-choose-us {
  background: #f8f9ff;
}

.why-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transition: 0.4s ease;
  height: 100%;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.icon-box {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.bg-purple {
  background: linear-gradient(135deg, #6a11cb, #8e2de2);
}

.bg-blue {
  background: linear-gradient(135deg, #396afc, #2948ff);
}

.bg-green {
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

.bg-orange {
  background: linear-gradient(135deg, #ff8008, #ffc837);
}

.why-card h6 {
  font-weight: 600;
  margin-bottom: 10px;
}

.why-card p {
  font-size: 14px;
  color: #777;
}

/* ============================================================= */
/* ================= Property Filter Buttons ================== */
/* ============================================================= */

.filter-btn {
  border: none;
  padding: 8px 16px;
  background: #eef0fb;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.filter-btn.active {
  background: #5b3cc4;
  color: #fff;
}

/* ============================================================= */
/* ================= Property Collection Cards ================= */
/* ============================================================= */

.collection-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.collection-card:hover {
  transform: translateY(-6px);
}

.collection-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.collection-card .tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #5b3cc4;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

.collection-card .content {
  padding: 16px;
}

.collection-card small {
  color: #8a8fb9;
  font-size: 12px;
}

.collection-card h6 {
  margin-top: 6px;
  font-weight: 600;
}

.collection-card p {
  font-size: 13px;
  color: #777;
}

/* ============================================================= */
/* ================= Testimonials Section ===================== */
/* ============================================================= */
.testimonial-wrap {
  position: relative;
  height: 520px;
  background: url("https://images.unsplash.com/photo-1501183638710-841dd1904471")
    center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.testimonial-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4c2faaa1, #8e2de2);
  opacity: 0.95;
}

.testimonial-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 750px;
  padding: 0 20px;
}

/* Title */
.testimonial-inner h2 {
  font-size: 36px;
  margin-bottom: 25px;
}

/* Avatars */
.testimonial-avatars {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.testimonial-avatars img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0.4;
  border: 3px solid transparent;
  cursor: pointer;
  transition: 0.3s;
}

.testimonial-avatars img.active {
  opacity: 1;
  border-color: #fff;
}

/* Slides */
.testimonial-slides {
  min-height: 180px;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

.slide p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.slide h4 {
  font-size: 20px;
  margin-bottom: 6px;
}

.rating {
  color: gold;
  font-size: 18px;
}

/* Controls */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
}
/* Default (Desktop) */
.nav.prev {
  left: -60px;
}

.nav.prev:hover,
.nav.next:hover {
  background-color: #fff;
  color: #000;
}

.nav.next {
  right: -60px;
}

.nav.prev i,
.nav.next i {
  font-size: 17px;
  margin: 15px 17px;
}

/* Button */
.btn-view {
  display: inline-block;
  background: #9b5cff;
  padding: 12px 28px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}

/* ============================================================= */
/* ================= Categories Slider Section ================= */
/* ============================================================= */
.catx-section {
  padding: 30px 0;
  background: #f7f8fc;
  overflow-x: hidden;
}

.catx-container {
  max-width: 1200px;
  margin: auto;
}

.catx-header {
  text-align: center;
  margin-bottom: 40px;
}

.catx-header h2 {
  font-size: 34px;
  font-weight: 700;
}

.catx-header p {
  font-size: 14px;
  color: #777;
}

/* Slider */
.catx-slider-wrapper {
  position: relative;
  overflow: visible;
}

.catx-slider {
  display: flex;
  gap: 30px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.catx-slide {
  min-width: calc(25% - 22px);
}

/* Card */
.catx-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 260px;
}

.catx-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
}

/* Overlay */
.catx-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.catx-overlay h4 {
  font-size: 20px;
  margin-bottom: 12px;
}

/* Count */
.catx-count {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  color: #fff;
}

.purple {
  background: #6f42c1;
}
.orange {
  background: #fd7e14;
}
.cyan {
  background: #17a2b8;
}
.green {
  background: #28a745;
}

/* Arrows */
.catx-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 5;
}

.catx-prev {
  left: 8px;
}
.catx-next {
  right: 8px;
}

/* Responsive */
@media (max-width: 992px) {
  .catx-slide {
    min-width: calc(50% - 15px);
  }
}

@media (max-width: 576px) {
  .catx-slide {
    min-width: 100%;
  }
}

/* ============================================================= */
/* ================= Totals / Counter Section ================= */
/* ============================================================= */
.t-section {
  position: relative;
  padding: 20px 0;
  background: url("https://images.unsplash.com/photo-1501183638710-841dd1904471")
    center/cover no-repeat;
  text-align: center;
  color: #fff;
}

.t-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #573bb3a8, #8e2da8);
  opacity: 0.92;
}

.t-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 200px;
  flex-wrap: wrap;
}

.t-box h6 {
  margin-top: 18px;
  font-weight: 400;
  font-size: 16px;
  opacity: 0.9;
}

.t-box h2 {
  font-size: 38px;
  font-weight: 700;
  margin-top: 6px;
}

/* Icon circle */
.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 22px;
}

.icon-circle:hover {
  background: #ffffff;
  color: #000;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 992px) {
  .t-container {
    gap: 50px;
  }
}

@media (max-width: 576px) {
  .t-container {
    flex-direction: column;
    gap: 40px;
  }

  .t-box h2 {
    font-size: 30px;
  }
}

/* ============================================================= */
/* ============================ Footer ========================= */
/* ============================================================= */

.main-footer {
  background: linear-gradient(135deg, #12002f, #1e004d);
  color: #cfcfe6;
  font-size: 14px;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 50px 0px;
}

.footer-col h5 {
  color: #fff;
  margin-bottom: 18px;
  position: relative;
}

.footer-col h5::after {
  content: "";
  width: 30px;
  height: 2px;
  background: #7b61ff;
  position: absolute;
  left: 0;
  bottom: -6px;
}

.footer-col p {
  line-height: 1.8;
  margin-bottom: 15px;
}

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

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #cfcfe6;
  text-decoration: none;
}

.footer-col ul li a:hover {
  color: #fff;
}

/* Contact */
.contact-list li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.contact-list i {
  color: #7b61ff;
}

/* Social */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.fb {
  background: #3b5998;
}
.tw {
  background: #1da1f2;
}
.gp {
  background: #db4437;
}
.in {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
}

/* Subscribe */
.subscribe-box {
  display: flex;
  margin-top: 15px;
}

.subscribe-box input {
  flex: 1;
  padding: 10px 12px;
  border: none;
  outline: none;
  border-radius: 4px 0 0 4px;
}

.subscribe-box button {
  background: #6f42c1;
  border: none;
  color: #fff;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.mt {
  margin-top: 0px;
}

/* Payments */
.payments {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.payments img {
  height: 22px;
}

/* Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px;
  text-align: center;
  font-size: 13px;
}

.footer-bottom span {
  color: #7b61ff;
}

.heart {
  color: red;
}

/* Responsive */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    padding: 50px 30px;
  }
}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
    padding: 50px 30px;
  }
}

/* ==========================================================
=============================================================
============================================================= */

/* =========================About page==================================== */
/* ================= HERO ================= */
.bar-hero {
  position: relative;
  margin-top: 50px;
  height: 260px;
  background: url("https://images.unsplash.com/photo-1501183638710-841dd1904471")
    center/cover no-repeat;
  display: flex;
  align-items: center;
}

.bar-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #5c3cc48e, #8e2de2);
  opacity: 0.92;
}

.bar-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
}

.bar-hero-content h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.bar-breadcrumb {
  font-size: 14px;
}

.bar-breadcrumb a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.bar-breadcrumb span {
  margin: 0 6px;
  opacity: 0.7;
}

/* ================= CONTENT ================= */
.abt-content {
  background: #f7f8fc;
  padding: 70px 0;
}

.abt-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 10px;
}

.abt-title {
  font-size: 46px;
  margin-bottom: 15px;
}

.abt-lead {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 20px;
}

.abt-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 18px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .bar-hero {
    height: 180px;
  }

  .bar-hero-content h1 {
    font-size: 32px;
  }

  .abt-title {
    font-size: 22px;
  }
}

/* ========How to Work ======================= */
.hiw-section {
  padding: 20px 0;
  background: #ffffff;
}

.hiw-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.hiw-header {
  text-align: center;
  margin-bottom: 50px;
}

.hiw-header h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.hiw-header p {
  font-size: 14px;
  color: #777;
}

/* Steps layout */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

/* Step */
.hiw-step h4 {
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 16px;
}

.hiw-step p {
  font-size: 14px;
  color: #8a8fb9;
  line-height: 1.7;
}

/* Icon */
.hiw-icon {
  width: 80px;
  height: 80px;
  margin: auto;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiw-icon i {
  font-size: 28px;
  color: #ff5a5f; /* same red tone */
}

/* Responsive */
@media (max-width: 992px) {
  .hiw-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .hiw-steps {
    grid-template-columns: 1fr;
  }
}

/* ================= CTA ================= */
.ctaX-section {
  position: relative;
  height: 260px;
  background: url("https://images.unsplash.com/photo-1501183638710-841dd1904471")
    center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ctaX-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6a11cb, #8e2de2);
  opacity: 0.95;
}

.ctaX-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 20px;
  color: #fff;
}

.ctaX-content h2 {
  font-size: 30px;
  margin-bottom: 12px;
}

.ctaX-content p {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 22px;
}

.ctaX-btn {
  display: inline-block;
  background: #a64bf4;
  padding: 12px 28px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* ================= WHY CHOOSE US ================= */
.wcuX-section {
  background: #f7f8fc;
  padding: 80px 0;
}

.wcuX-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.wcuX-header {
  text-align: center;
  margin-bottom: 50px;
}

.wcuX-header h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.wcuX-header p {
  font-size: 14px;
  color: #777;
}

/* Grid */
.wcuX-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card */
.wcuX-card {
  background: #fff;
  border-radius: 10px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.wcuX-card h4 {
  margin: 16px 0 10px;
  font-size: 16px;
}

.wcuX-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Icon */
.wcuX-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

/* Icon colors */
.green {
  background: #2ecc71;
}
.purple {
  background: #6f42c1;
}
.violet {
  background: #9b59b6;
}
.orange {
  background: #f39c12;
}
.red {
  background: #e74c3c;
}
.cyan {
  background: #17a2b8;
}

/* Responsive */
@media (max-width: 992px) {
  .wcuX-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .wcuX-grid {
    grid-template-columns: 1fr;
  }

  .ctaX-content h2 {
    font-size: 24px;
  }
}

/* ====================== Our Team ====================== */

.teamX-section {
  padding: 80px 0;
  background: #ffffff;
}

.teamX-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.teamX-header {
  text-align: center;
  margin-bottom: 50px;
}

.teamX-header h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.teamX-header p {
  font-size: 14px;
  color: #777;
}

/* Grid */
.teamX-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card */
.teamX-card {
  background: #fff;
  border: 1px solid #e8ecff;
  border-radius: 6px;
  padding: 40px 30px;
  text-align: center;
}

/* Avatar */
.teamX-avatar {
  width: 120px;
  height: 120px;
  margin: auto;
  border-radius: 50%;
  padding: 6px;
  background: #eef0ff;
  margin-bottom: 18px;
}

.teamX-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Text */
.teamX-name {
  font-size: 16px;
  margin-bottom: 4px;
}

.teamX-role {
  font-size: 13px;
  color: #8a8fb9;
  display: block;
  margin-bottom: 18px;
}

.teamX-quote {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
  position: relative;
}

/* Stars */
.teamX-stars {
  color: #ff9800;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 992px) {
  .teamX-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .teamX-grid {
    grid-template-columns: 1fr;
  }
}

.nlx-section {
  background: #f1f1f1;
  padding: 35px 0;
}

.nlx-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Left */
.nlx-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nlx-icon {
  font-size: 22px;
  color: #6f42c1;
}

.nlx-text h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.nlx-text p {
  font-size: 14px;
  color: #777;
}

/* Form */
.nlx-form {
  display: flex;
  max-width: 420px;
  width: 100%;
}

.nlx-form input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #e3e6ff;
  border-right: none;
  outline: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.nlx-form button {
  background: #4b3fa8;
  color: #fff;
  border: none;
  padding: 0 22px;
  font-size: 14px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.input-error {
  border: 2px solid rgb(233, 3, 3) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .nlx-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .nlx-form {
    max-width: 100%;
  }
}

/* =========================Contact page==================================== */
.cntx-section {
  padding: 70px 0;
  background: #f7f8fc;
}

.cntx-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* INFO BOXES */
.cntx-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.cntx-info-box {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  padding: 18px 20px;
  border-radius: 6px;
}

.cntx-info-box i {
  font-size: 22px;
}

.cntx-info-box h5 {
  font-size: 15px;
  margin-bottom: 2px;
}

.cntx-info-box p {
  font-size: 13px;
  opacity: 0.9;
}

/* Colors */
.purple {
  background: #4b3fa8;
}
.violet {
  background: #9b3de2;
}
.orange {
  background: #ffa534;
}
.cyan {
  background: #0fb9b1;
}

/* MAIN GRID */
.cntx-main {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

/* MAP */
.cntx-map {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.cntx-map iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
}

/* FORM */
.cntx-form-box {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
}

/* INPUT */
.cntx-form input,
.cntx-form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #e2e6ff;
  border-radius: 4px;
  font-size: 14px;
}

/* BUTTON */
.cntx-form button {
  width: 100%;
  background: #4b3fa8;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .cntx-main {
    grid-template-columns: 1fr;
  }

  .cntx-map iframe {
    min-height: 300px;
  }
}

@media (max-width: 576px) {
  .cntx-map iframe {
    min-height: 220px;
  }
}

/* =================Post Property========================= */
.padx-section {
  padding: 70px 0;
  background: #f7f8fc;
}

.padx-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

/* FORM */
.padx-form-box {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
}

.padx-form label {
  font-size: 14px;
  display: block;
  margin: 12px 0 6px;
}

.padx-form input,
.padx-form select,
.padx-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e6ff;
  border-radius: 4px;
  font-size: 14px;
}

.padx-upload {
  border: 2px dashed #d0d6ff;
  height: 120px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b61ff;
  font-size: 28px;
}

.padx-upload-wrap {
  margin-top: 8px;
}

.padx-upload-input {
  display: none;
}

.padx-upload {
  border: 2px dashed #d0d6ff;
  height: 130px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7b61ff;
  font-size: 28px;
  cursor: pointer;
}

.padx-upload span {
  font-size: 14px;
  margin-top: 6px;
  color: #666;
}

.padx-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.padx-preview img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e6ff;
}

.padx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.padx-submit {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 4px;
  cursor: pointer;
}

/* SIDE */
.padx-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.padx-info-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
}

.padx-info-card h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

.padx-info-card ul {
  padding-left: 18px;
  font-size: 14px;
}

.padx-info-card ul li {
  margin-bottom: 8px;
}

.padx-info-card a {
  color: #6f42c1;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 992px) {
  .padx-container {
    grid-template-columns: 1fr;
  }

  .padx-row {
    grid-template-columns: 1fr;
  }
}

/* ============Single Property */
.hps9-hero {
  position: relative;
  height: 450px;
  background: url("https://images.unsplash.com/photo-1494526585095-c41746248156")
    center/cover no-repeat;
  display: flex;
  align-items: center;
}

.hps9-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4b3fa8c9, #9b3da4d6);
}

.hps9-content {
  position: relative;
  z-index: 2;
}

.hps9-title {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
}

.hps9-subtitle {
  color: #eaeaea;
  margin-bottom: 35px;
}

/* SEARCH BOX */

.hps9-search-box {
  max-width: 950px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;

  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* INPUT GROUP */

.hps9-input-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 0 12px;
  height: 52px;
}

.hps9-input-group i {
  color: #888;
  font-size: 15px;
  margin-right: 8px;
}

.hps9-input-group input,
.hps9-input-group select {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  background: transparent;
}

/* BUTTON */

.hps9-btn {
  height: 52px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, #4b3fa8, #9b3da4);
  color: #fff;
  transition: 0.3s;
}

.hps9-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* MOBILE */

@media (max-width: 768px) {
  .hps9-title {
    font-size: 26px;
  }

  .hps9-search-box {
    padding: 15px;
  }
}

/* ===============property=============== */

.pdx9-wrapper {
  background: #f7f8fc;
}

.pdx9-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.pdx9-head {
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.pdx9-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}

.pdx9-muted {
  font-size: 13px;
  color: #777;
}

.pdx9-info-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.pdx9-info-list li {
  margin-bottom: 8px;
}

.pdx9-info-list i {
  color: #6f42c1;
  margin-right: 6px;
}

.pdx9-social i {
  background: #f1f3ff;
  padding: 8px;
  border-radius: 50%;
  margin-right: 6px;
  color: #6f42c1;
}

/* RIGHT */
.pdx9-title-box {
  position: relative;
}

.pdx9-meta {
  font-size: 13px;
  color: #777;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.pdx9-rating {
  color: #ff9800;
}

.pdx9-offer {
  position: absolute;
  right: 0;
  top: 0;
  background: #ff3d3d;
  color: #fff;
  padding: 6px 14px;
  font-size: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.pdx9-price {
  background: #4b3fa8;
  color: #fff;
  padding: 6px 16px;
  display: inline-block;
  border-radius: 0 0 6px 0;
  font-size: 18px;
  margin: 15px 0;
}
/* ===== Main Image ===== */
.pdx9-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity 0.4s ease;
}

/* ===== Swiper Wrapper ===== */
.pdx9-gallery {
  margin-top: 12px;
}

/* Swiper container */
.swiper {
  width: 100%;
  height: 100px;
  padding: 0;
}

/* All slides (dim by default) */
.pdx9-gallery .swiper-slide {
  opacity: 0.35;
  transition: all 0.3s ease;
}

/* Slide image */
.pdx9-gallery .swiper-slide img {
  height: 90px;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

/* ⭐ Center / Active slide */
.pdx9-gallery .swiper-slide-active {
  opacity: 1;
  /* transform: scale(1.15); */
}

/* Optional hover */
.pdx9-gallery .swiper-slide:hover {
  opacity: 0.7;
}

.spx7-wrapper {
  background: #f7f8fc;
  margin-top: -50px;
}

.spx7-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

.spx7-title {
  font-weight: 600;
  margin-bottom: 15px;
}

.spx7-tags span {
  background: #eef0ff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 6px;
  display: inline-block;
}

.spx7-social i {
  width: 36px;
  height: 36px;
  background: #f1f3ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 6px;
  color: #6f42c1;
}

.spx7-mini-ad {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.spx7-mini-ad img {
  width: 70px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.spx7-stars {
  color: #ff9800;
  font-size: 12px;
}

.spx7-spec-list ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.spx7-spec-list li {
  margin-bottom: 8px;
}

.spx7-spec-list i {
  color: #6f42c1;
  margin-right: 6px;
}

.spx7-meta {
  font-size: 14px;
  color: #555;
}

.spx7-actions .btn {
  margin-right: 2px;
}

.spx7-print {
  background: #8e2de2;
  color: #fff;
}

.rpx8-wrapper {
  background: #f7f8fc;
}

.rpx8-card {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

/* Map */
.rpx8-map {
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

/* Aspect Ratio Trick */
.rpx8-map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

.rpx8-map-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Posts */
.rpx8-post-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.rpx8-img {
  position: relative;
}

.rpx8-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rpx8-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #6f42c1;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
}

.rpx8-price {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #9b3de2;
  color: #fff;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 4px;
}

.rpx8-meta {
  list-style: none;
  padding: 0;
  font-size: 13px;
  color: #555;
}

.rpx8-meta li {
  margin-bottom: 5px;
}

.rpx8-meta i {
  color: #6f42c1;
  margin-right: 6px;
}

.bg-purple {
  background: #8e2de2;
}
/* ========== category ================= */
.cgx4-section {
  background: #fff;
}

.cgx4-title {
  font-size: 28px;
  margin-bottom: 6px;
}

.cgx4-subtitle {
  font-size: 14px;
  color: #777;
}

/* Card */
.cgx4-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.cgx4-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Overlay */
.cgx4-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.cgx4-overlay h5 {
  font-size: 18px;
  margin-bottom: 6px;
}

/* Count badge */
.cgx4-count {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: #fff;
}

/* Colors */
.purple {
  background: #6f42c1;
}
.cyan {
  background: #17a2b8;
}
.orange {
  background: #fd7e14;
}
.green {
  background: #28a745;
}
.red {
  background: #dc3545;
}
.pink {
  background: #e83e8c;
}
.violet {
  background: #8e2de2;
}

.clx9-wrapper {
  background: #f7f8fc;
}

.clx9-card {
  background: #fff;
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.clx9-head {
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.clx9-head i {
  color: #6f42c1;
  margin-right: 6px;
}

.clx9-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.clx9-list li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 18px;
}

.clx9-list li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 6px;
  color: #6f42c1;
  position: absolute;
  left: 0;
  top: 7px;
}

.clx9-more {
  color: #6f42c1;
  font-size: 13px;
  cursor: pointer;
}

/* ================ profile =============== */
.dbx7-wrapper {
  background: #f7f8fc;
}

/* Card */
.dbx7-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 40px 5px 20px 5px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.dbx7-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Menu */
.dbx7-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Buttons */
.dbx7-menu .nav-link {
  width: 100%;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  color: #444;
  background: transparent;
  border: none;
  border-bottom: 1px solid #eeeeee;
  transition: all 0.3s ease;
}

/* Icons */
.dbx7-menu .nav-link i {
  font-size: 16px;
  color: #7a7a7a;
  min-width: 20px;
}

/* Hover */
.dbx7-menu .nav-link:hover {
  background: #f1f3ff;
  color: #3f51b5;
}

.dbx7-menu .nav-link:hover i {
  color: #3f51b5;
}

/* Active */
.dbx7-menu .nav-link.active {
  background: linear-gradient(90deg, #3f51b5, #5c6bc0);
  color: #fff;
  font-weight: 600;
}

.dbx7-menu .nav-link.active i {
  color: #fff;
}

/* Logout */
.dbx7-menu .logout {
  color: #e53935;
}

.dbx7-menu .logout:hover {
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
}

.dbx7-menu .logout i {
  color: #e53935;
}

/* Mobile */
@media (max-width: 768px) {
  .dbx7-menu .nav-link {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ==edit profile== */
.dbx7-card-tab {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.epx9-wrapper {
  background: #fff;
  padding: 25px;
  border-radius: 6px;
}

.epx9-title {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e9ff;
  margin-bottom: 20px;
}

.epx9-label {
  font-size: 13px;
  margin-bottom: 5px;
  color: #333;
}

.epx9-input {
  font-size: 14px;
  border: 1px solid #e3e6ff;
}

.epx9-input:focus {
  box-shadow: none;
  border-color: #6f42c1;
}

.epx9-btn {
  background: #6f42c1;
  color: #fff;
  padding: 8px 22px;
  font-size: 14px;
  border-radius: 4px;
}

.epx9-btn:hover {
  background: #59339d;
}
/* ==My Favorite Ads== */
.favx9-wrapper {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.favx9-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.favx9-table th {
  font-size: 13px;
  background: #f5f7ff;
}

.favx9-table td {
  font-size: 14px;
  vertical-align: middle;
}

/* Table outer border */
.favx9-table {
  border: 1px solid #dee2e6;
  border-collapse: collapse;
  width: 100%;
}

/* Table header cells */
.favx9-table thead th {
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  font-weight: 600;
  padding: 12px;
}

/* Table body cells */
.favx9-table tbody td {
  border: 1px solid #dee2e6;
  padding: 12px;
  vertical-align: middle;
}

/* Row hover effect (optional but looks good) */
.favx9-table tbody tr:hover {
  background-color: #f5f7fa;
}

/* Checkbox alignment */
.favx9-table input[type="checkbox"] {
  transform: scale(1.1);
}

/* Item image styling */
.favx9-item img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Status badge styling */
.favx9-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Item */
.favx9-item {
  display: flex;
  gap: 10px;
}

.favx9-item img {
  width: 60px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.favx9-item h6 {
  font-size: 14px;
  margin-bottom: 2px;
}

.favx9-item span {
  display: block;
  font-size: 12px;
  color: #777;
}

/* Status */
.favx9-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}

.favx9-status.active {
  background: #4b3fa8;
}
.favx9-status.closed {
  background: #ff3d3d;
}
.favx9-status.sold {
  background: #28a745;
}
.favx9-status.inactive {
  background: #8e2de2;
}
.favx9-status.expired {
  background: #fd7e14;
}

/* Action */
.favx9-action button {
  margin-right: 4px;
}

/* === My ADS === */

.adx9-wrapper {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}

.adx9-title {
  font-size: 16px;
  margin-bottom: 15px;
}

.adx9-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.adx9-tabs button {
  padding: 6px 14px;
  border: 1px solid #e3e6ff;
  background: #fff;
  font-size: 13px;
  border-radius: 4px;
}

.adx9-tabs button.active {
  background: #4b3fa8;
  color: #fff;
}

.adx9-item {
  display: flex;
  gap: 10px;
}

.adx9-item img {
  width: 60px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

.adx9-item h6 {
  font-size: 14px;
  margin-bottom: 2px;
}

.adx9-item span {
  font-size: 12px;
  display: block;
  color: #777;
}

/* FULL TABLE BORDER */
.adx9-table {
  border: 1px solid #e3e6ff;
  border-collapse: collapse;
}

/* HEADER BORDER */
.adx9-table thead th {
  border: 1px solid #e3e6ff;
  background: #f7f8ff;
  font-size: 13px;
}

/* ROW + COLUMN BORDER */
.adx9-table tbody td {
  border: 1px solid #e3e6ff;
}

/* ROW HOVER (nice effect, optional but matches UI) */
.adx9-table tbody tr:hover {
  background: #f9faff;
}

/* STATUS BADGES */
.adx9-badge {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
}

.adx9-badge.inprogress {
  background: #ff9800;
}
.adx9-badge.progress {
  background: #4b3fa8;
}
.adx9-badge.approval {
  background: #28a745;
}
.adx9-badge.declined {
  background: #06d5e0;
}
.adx9-badge.cancelled {
  background: #f44336;
}

/* ACTION */
.adx9-action button,
.adx9-action a {
  border: none;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
}

.adx9-action .edit {
  background: #28a745;
}
.adx9-action .delete {
  background: #f44336;
}
.adx9-action .fav {
  background: #03a9f4;
}
.adx9-action .view {
  background: #4b3fa8;
}

/* =========== Blog Page ============ */
.blx9-wrapper {
  background: #f7f8fc;
}

.blx9-post {
  background: #fff;
  display: flex;
  gap: 20px;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

.blx9-img {
  position: relative;
  text-align: center;
}

.blx9-img img {
  width: 220px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.blx9-cat {
  position: absolute;
  text-align: center;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
}

.green {
  background: #28a745;
}
.cyan {
  background: #17a2b8;
}
.purple {
  background: #6f42c1;
}

.blx9-content h5 {
  margin-top: 5px;
  font-size: 16px;
}

.blx9-pagination-wrap {
  margin-top: 35px;
}

.blx9-pagination .page-link {
  border: none;
  margin: 0 4px;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
  padding: 6px 14px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.blx9-pagination .page-item.active .page-link {
  background: #6f42c1;
  color: #fff;
}

.blx9-pagination .page-link:hover {
  background: #6f42c1;
  color: #fff;
}

.blx9-pagination .page-item.disabled .page-link {
  opacity: 0.5;
}

.blx9-meta {
  font-size: 12px;
  color: #777;
  display: flex;
  gap: 15px;
}

.blx9-btn {
  background: #6f42c1;
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  margin-top: 6px;
}

/* Sidebar */
.blx9-side {
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

.blx9-side-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.blx9-cat-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.blx9-cat-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.blx9-tags span {
  display: inline-block;
  background: #eef0ff;
  padding: 4px 10px;
  margin: 4px;
  font-size: 12px;
  border-radius: 4px;
}

.blx9-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 10px;
}

.blx9-author img {
  border-radius: 50%;
}
/* =========================
   MOBILE (max-width: 767px)
========================= */
@media (max-width: 767px) {
  .blx9-post {
    flex-direction: column;
    gap: 12px;
    align-items: center; /* Full card center */
    text-align: center;
  }

  .blx9-img {
    display: flex;
    justify-content: center;
  }

  .blx9-img img {
    width: 100%;
    max-width: 320px;
    height: 200px;
  }

  /* Category Badge Center Bottom */
  .blx9-cat {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;

    padding: 2px 10px;
    font-size: 6px;
    color: #fff;
    border-radius: 4px;
  }

  .blx9-meta {
    font-size: 9px;
    justify-content: center;
  }
}

/* =========================
   TABLET (768px – 991px)
========================= */
@media (max-width: 991px) {
  .blx9-img img {
    width: 180px;
    height: 130px;
    text-align: center;
  }

  .blx9-content h5 {
    font-size: 15px;
  }
}

/* =============Blog Detail =============== */
.bdx9-wrapper {
  background: #f7f8fc;
}

.bdx9-card {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* captch css */
.captcha-box {
  background: #f5f7fb;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e3e6ef;
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#captcha-code {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 5px;
  background: #fff;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px dashed #999;
  user-select: none;
}

#refresh-captcha {
  border: none;
  background: #0d6efd;
  color: white;
  padding: 10px 10px;
  border-radius: 6px;
  width: 100px !important;
}

#captcha-error {
  color: red;
  font-size: 13px;
}

/* end */

.bdx9-cover {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 6px;
}

.bdx9-badge {
  background: #4b3fa8;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  position: relative;
  top: -20px;
}

.bdx9-meta {
  font-size: 13px;
  color: #777;
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.bdx9-title {
  margin-bottom: 15px;
}

@media (max-width: 767px) {
  .bdx9-meta {
    font-size: 10px;
  }
}

.cmx9-wrapper {
  background: #fff;
  border: 1px solid #e5e8ff;
  border-radius: 6px;
  padding: 20px;

  max-height: 400px; /* fixed height */
  overflow-y: auto; /* vertical scroll */
}

/* Optional: scrollbar styling */
.cmx9-wrapper::-webkit-scrollbar {
  width: 6px;
}

.cmx9-wrapper::-webkit-scrollbar-thumb {
  background: #4b3fa8;
  border-radius: 10px;
}
.cmx9-heading {
  display: flex;
  margin-bottom: 20px;
}

.cmx9-item {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #e5e8ff;
}

.cmx9-item:last-child {
  border-bottom: none;
}

.cmx9-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.cmx9-body {
  flex: 1;
}

.cmx9-top h6 {
  margin: 0;
  font-weight: 600;
}

.cmx9-rating {
  color: #f4b400;
  font-size: 14px;
  margin-left: 6px;
}

.cmx9-meta {
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 15px;
  margin: 6px 0 12px;
}

.cmx9-body p {
  font-size: 14px;
  color: #555;
}

.cmx9-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.bdx9-btn {
  background: #4b3fa8;
  color: #fff;
  padding: 8px 22px;
  border-radius: 4px;
  border: none;
}

.reply-box {
  margin-top: 10px;
  margin-left: 40px;
  border-left: 2px solid #eee;
  padding-left: 10px;
}

.reply-item {
  padding: 8px;
  border-radius: 5px;
  margin-bottom: 6px;
}

.reply-item p {
  margin: 0;
  font-size: 13px;
}

.no-comment-ui {
  padding: 40px 20px;
  border: 1px dashed #dcdcdc;
  border-radius: 8px;
  background: #fafafa;
}

.no-comment-ui i {
  font-size: 40px;
  color: #4b3fa8;
  margin-bottom: 10px;
}

.no-comment-ui h5 {
  font-weight: 600;
  margin-bottom: 5px;
}

.no-comment-ui p {
  color: #777;
  font-size: 14px;
}

/* SIDEBAR */
.bdx9-side {
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.bdx9-list {
  list-style: none;
  padding: 0;
}

.bdx9-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bdx9-post {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.bdx9-post img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.bdx9-tags span {
  display: inline-block;
  background: #eef0ff;
  padding: 4px 10px;
  margin: 4px;
  font-size: 12px;
  border-radius: 4px;
}

.bdx9-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ======= Login / register ====== */

.lr-form {
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  background: #fff;
  width: 380px;
  margin-top: 100px;
  margin-bottom: 30px;
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.login-box h2 {
  margin-bottom: 35px;
  font-weight: 500;
}

.login-input-group {
  position: relative;
  margin-bottom: 25px;
}

.login-input-group input {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  background: #fff;
}

.login-input-group label {
  position: absolute;
  top: -9px;
  left: 10px;
  background: #fff;
  padding: 0 6px;
  font-size: 13px;
  color: #333;
}

.login-btn {
  width: 100%;
  padding: 10px;
  background: #4b3fbf;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin-top: 5px;
}

.login-btn:hover {
  opacity: 0.9;
}

.login-forgot {
  margin: 18px 0 8px;
  font-size: 12px;
}

.login-forgot a {
  text-decoration: none;
  color: #000;
}

.login-signup {
  font-size: 12px;
}

.login-signup a {
  color: #4b3fbf;
  text-decoration: none;
}

.login-divider {
  margin: 25px 0;
  display: flex;
  align-items: center;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.login-divider span {
  margin: 0 10px;
  font-size: 14px;
  color: #777;
}

.login-social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.login-social div {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/*============= Register================ */
.register-box {
  background: #fff;
  width: 380px;
  margin-top: 100px;
  margin-bottom: 30px;
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.register-box h2 {
  margin-bottom: 35px;
  font-weight: 500;
}

.register-input-group {
  position: relative;
  margin-bottom: 25px;
}

.register-input-group input {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  background: #fff;
}

.register-input-group label {
  position: absolute;
  top: -9px;
  left: 10px;
  background: #fff;
  padding: 0 6px;
  font-size: 13px;
  color: #333;
}

.register-btn {
  width: 100%;
  padding: 10px;
  background: #4b3fbf;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin-top: 5px;
}

.register-btn:hover {
  opacity: 0.9;
}

.register-signup {
  margin-top: 20px;
  font-size: 12px;
}

.register-signup a {
  color: #4b3fbf;
  text-decoration: none;
}

.register-divider {
  margin: 25px 0;
  display: flex;
  align-items: center;
}

.register-divider::before,
.register-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.register-divider span {
  margin: 0 10px;
  font-size: 14px;
  color: #777;
}

.register-social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.register-social div {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}