/* ============================= */
  /*             HEADER            */
  /* ============================= */
  header {
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 12px 0px;
  }

  header.header-dashboard {
      background: var(--primary);
      padding: 20px 0px;
  }

  header .container-two {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  /* LEFT */
  header .header-left {
      display: flex;
      align-items: center;
      gap: 20px;
  }

  header .logo img {
      /* height: 40px; */
      height: auto;
      width: 170px;
  }

  header.header-dashboard .logo img {
      height: 45px;
  }

  header .location {
      display: flex;
      align-items: center;
      gap: 8px;
      border-left: 1px solid #d3d3d3;
      padding-left: 15px;
  }

  .header-right svg {
      width: 20px;
      height: 20px;
  }

  .header-right a:active,
  .header-right a:focus {
      color: #fff !important;
  }

  .sidebar-cta {
      height: 24px;
      width: 24px;
  }

  header .location svg {
      color: black;
      background: var(--secondary);
      padding: 5px 8px;
      border-radius: 6px;
      width: 40px;
      height: 40px;
  }

  header .location-text p {
      font-size: 12px;
      font-weight: 500;
      line-height: 17px;
  }

  header .location-text span {
      font-size: 12px;
      font-weight: 400;
      color: #777;
  }

  header .location-text i {
      font-size: 10px;
  }

  header .nav {
      display: flex;
      gap: 30px;
  }

  header .nav a {
      text-decoration: none;
      color: #333;
      font-size: 16px;
      transition: 0.3s;
      letter-spacing: .2px;
  }

  header.header-dashboard .nav a {
      color: white;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 15px;
      font-weight: 300;
  }

  header.header-dashboard .nav a:hover {
      color: var(--secondary);
  }

  header .nav a:hover {
      color: #2d4ea2;
  }

  header .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  header.header-dashboard .header-right .btn-notification {
      padding: 14px 15px;
      border-radius: 25px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      background-color: white;
      color: var(--secondary);
  }

  header.header-dashboard .header-right .btn-user {
      width: 45px;
      height: 45px;
  }

  header .btn-secondary .label-text {
      padding: 2px 8px 2px 8px;
      background-color: var(--primary);
      color: white;
      font-size: 12px;
      border-radius: 20px;

  }

  .heading-slide-actions .btn-secondary:hover {
      background-color: (--secondary);
      color: #fff;
  }

  header .view-mobile {
      display: none !important;
  }

  header .view-desktop {
      display: inline-block !important;
  }

  @media (max-width: 992px) {
      header .view-mobile {
          display: inline-block !important;
      }

      header .view-desktop {
          display: none !important;
      }
  }

  /* ===== MOBILE ===== */
  header .menu-toggle {
      display: none;
      cursor: pointer;
  }

  header .menu-toggle img {
      width: 34px;
      height: 34px;
      margin-top: 5px;
  }


  /* ===== SIDEBAR ===== */
  .sidebar-menu {
      position: fixed;
      top: 0;
      left: -340px;
      width: 340px;
      height: 100%;
      background: #fff;
      box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
      padding: 15px;
      transition: left 0.3s ease, visibility 0.3s ease;
      z-index: 99999;
      visibility: hidden;
      pointer-events: none;
  }

  .sidebar-menu.active {
      left: 0;
      visibility: visible;
      pointer-events: auto;
  }

  .sidebar-menu .head {
      display: flex;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--border);
  }

  .sidebar-menu .head .location {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .sidebar-menu .head .location svg {
      color: black;
      background: var(--secondary);
      padding: 5px 8px;
      border-radius: 6px;
      width: 40px;
      height: 40px;
  }

  .sidebar-menu .head .location-text p {
      font-size: 12px;
      font-weight: 500;
      line-height: 17px;
  }

  .sidebar-menu .head .location-text span {
      font-size: 14px;
      font-weight: 500;
  }

  .sidebar-menu .head .close-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #333;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .sidebar-menu .sidebar-cta {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .sidebar-menu .sidebar-cta .btn-secondary .label-text {
      padding: 2px 8px 2px 8px;
      background-color: var(--primary);
      color: white;
      font-size: 12px;
      border-radius: 20px;

  }


  .sidebar-menu li {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 5px 0;
      color: #333;
      text-decoration: none;
      padding: 12px;
      background-color: #FBFBFB;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 500;
  }


  .sidebar-menu li:hover {
      background-color: #f5f9ff;
      color: #000;
  }

  .sidebar-menu .sidebar-cta a:hover {
      color: #fff !important;
      background-color: #000 !important;
  }

  .sidebar-menu .btn {
      width: 100%;
      justify-content: center;
      padding: 10px !important;
  }

  /* OVERLAY */
  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 99998;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
      display: block;
  }

  .overlay.active {
      opacity: 1;
      pointer-events: auto;
  }

  @media (max-width:1300px) {
      header .header-right .btn-primary span {
          display: none;
      }

      header .header-right .btn-primary {
          padding: 20px 16px !important;
      }

      header .header-right .btn {
          font-size: 11px;
          padding: 20px 10px;
      }

      header .header-right {
          gap: 5px;
      }

      header .header-left {
          gap: 10px;
      }

      header .header-right .btn {
          padding: 20px 11px;
          height: 30px;
          min-width: 30px;
          color: #fff !important;
          background: var(--primary);
      }

      header .location-text p {
          display: none;
      }

      header .location svg {
          width: 25px;
          height: 25px;
          padding: 5px;
      }

      header .location-text span {
          font-size: 12px;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      header .nav {
          gap: 22px;
      }

      header .nav a {
          font-size: 14px;
      }

      header .header-right .btn {
          background-color: var(--secondary);
          color: #000;
      }

      header.header-dashboard .logo img {
          height: 30px;
      }

      header.header-dashboard .nav a {
          font-size: 13px;
      }

      .sidebar-menu .btn {
          font-size: 13px;
      }


  }

  @media(max-width: 992px) {

      header .nav {
          display: none;
      }

      header .logo img {
          height: 38px;
          width: auto;
      }

      header {
          padding: 10px 0px;
      }

      header .location {
          display: none;
      }

      header .header-right .btn-primary {
          display: none;
      }

      header .menu-toggle {
          display: block !important;
      }

      header.header-dashboard {
          background: #fff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      header.header-dashboard .header-right .btn-notification {
          display: none;
      }

      a.logout-seller {
          color: red;
      }

      a.logout-seller:hover {
          background-color: rgba(255, 0, 0, 0.088);
          color: red;
      }

      .sidebar-menu a:hover {
          background-color: #f5f8ff;
          color: black;
      }

      .side-bar-menu .tt-sell-banner {
          justify-content: center !important;
          padding: 16px 0;
          margin-bottom: 10px;
          border-radius: 10px;
      }

      .side-bar-menu .tt-sell-banner button {
          margin: 10px auto;
          padding: 6px 18px;
      }

      .side-bar-menu .post-property-wtp {
          background: #44b62c;
          padding: 10px 18px;
          display: flex;
          gap: 15px;
          color: #fff;
          font-size: 16px;
          border-radius: 10px;
          align-items: center;
      }

      .side-bar-menu .post-property-wtp i {
          font-size: 40px;
      }

      ul li i {
          width: 24px;
          height: auto;
      }

      .header-dashboard .btn-user {
          display: none;
      }

      header .btn-secondary .label-text {
          background: var(--secondary);
          color: #000;
      }

      header .header-right .btn {
          background-color: var(--primary) !important;
      }

      .sidebar-menu .btn {
          font-size: 12px;
      }

  }

  @media (max-width: 768px) {
      header .logo img {
          height: 32px;
          width: auto;
      }

      header .header-left {
          gap: 7px;
      }

      header .header-right .btn-secondary.buyer-cta {
          background-color: var(--secondary) !important;
          color: #000 !important;
      }

      header.header-dashboard {
          padding: 10px 0px !important;
      }

      .logout-sidebar {
          font-size: 12px !important;
      }
  }



  /* ============================= */
  /*          BANNER SECTION       */
  /* ============================= */

  .banner-section {
      margin-top: 20px;
      margin-bottom: 160px;
      position: relative;
      z-index: 20;
  }


  .banner-section .banner-bg {
      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/static/home-banner.png') center/cover no-repeat;
      background-color: #6c7a89;
      border-radius: 15px;
      padding: 70px 20px 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }

  .banner-section .banner-content {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
  }

  .banner-section .banner-title {
      color: #fff;
      font-size: 40px;
      font-weight: 600;
      margin-bottom: 25px;
  }

  .banner-section .text-yellow {
      color: #ffca28;
  }

  .banner-section .search-box {
      background: #fff;
      border-radius: 10px;
      margin-bottom: 15px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      overflow: visible;
  }

  .banner-section .search-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      padding: 0 20px;
  }

  .banner-section .tabs-left {
      display: flex;
      gap: 25px;
  }

  .banner-section .tab-radio {
      cursor: pointer;
  }

  .banner-section .tab-radio input {
      display: none;
  }

  .banner-section .tab-radio .tab-label {
      color: #555;
      font-size: 14px;
      padding: 15px 0;
      font-weight: 500;
      position: relative;
      display: inline-block;
      transition: 0.3s;
  }

  .banner-section .tab-radio input:checked+.tab-label {
      color: #2d4ea2;
  }

  .banner-section .tab-radio input:checked+.tab-label::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--primary);
  }

  .banner-section .tabs-right .post-link {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
  }

  .banner-section .free-badge {
      background: var(--primary);
      color: #fff;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 12px;
  }

  .banner-section .search-form {
      display: flex;
      padding: 15px 20px;
      gap: 15px;
      align-items: center;
  }

  .banner-section .search-field {
      display: flex;
      align-items: center;
  }

  .banner-section .select-field {
      flex: 1;
      border-right: 1px solid #eaeaea;
      padding-right: 15px;
  }

  .banner-section .select-field select {
      width: 100%;
      border: none;
      outline: none;
      color: #666;
      font-size: 15px;
      cursor: pointer;
      background: transparent;
  }

  .banner-section .custom-property-dropdown {
      position: relative;
      cursor: pointer;
      width: 100%;
  }

  .banner-section .dropdown-toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      color: #666;
      font-size: 15px;
      padding: 0 10px;
  }

  .banner-section .dropdown-toggle i {
      font-size: 12px;
  }

  .banner-section .dropdown-menu-wrapper {
      position: absolute;
      top: 40px;
      left: -20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      padding: 20px;
      width: 480px;
      z-index: 100;
      display: none;
      text-align: left;
  }

  .banner-section .dropdown-menu-wrapper.active {
      display: block;
  }

  .banner-section .dropdown-section {
      margin-bottom: 20px;
  }

  .banner-section .dropdown-section:last-child {
      margin-bottom: 0;
  }

  .banner-section .dropdown-section label {
      display: block;
      font-size: 14px;
      color: #222;
      margin-bottom: 15px;
      font-weight: 500;
  }

  .banner-section .pills-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
  }

  .banner-section .pill-radio {
      cursor: pointer;
  }

  .banner-section .pill-radio input {
      display: none;
  }

  .banner-section .pill {
      background: #fff;
      border: 1px solid #e0e0e0;
      color: #333;
      padding: 6px 12px;
      border-radius: 25px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: 0.3s;
  }

  .banner-section .pill-radio input:checked+.pill,
  .banner-section .pill-radio:hover .pill {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
  }

  .banner-section .icons-group .pill i {
      color: var(--primary);
      font-size: 14px;
  }

  .banner-section .pill-radio input:checked+.pill i,
  .banner-section .pill-radio:hover .pill i {
      color: #fff;
  }

  .banner-section .input-field {
      flex: 2;
      gap: 8px;
      color: #888;
  }

  .banner-section .input-field input {
      width: 100%;
      border: none;
      outline: none;
      font-size: 15px;
      background: transparent;
  }

  .home-suggest {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16), 0 4px 16px rgba(15, 23, 42, 0.08);
      z-index: 1200;
      max-height: 400px;
      overflow-y: auto;
      text-align: left;
      padding: 6px 0;
  }

  .home-suggest__section {
      margin-bottom: 4px;
  }

  .home-suggest__section:last-child {
      margin-bottom: 0;
  }

  .home-suggest__group {
      padding: 12px 16px 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #94a3b8;
      background: linear-gradient(to right, #f8fafc, transparent);
      margin: 4px 0 2px;
  }

  .home-suggest__status {
      padding: 16px;
      font-size: 13px;
      color: #64748b;
      text-align: center;
  }

  .home-suggest__item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 11px 16px;
      border: 0;
      background: #fff;
      cursor: pointer;
      text-align: left;
      color: #1e293b;
      transition: all 0.15s ease;
      border-radius: 0;
      position: relative;
  }

  .home-suggest__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
      border-radius: 4px;
      flex-shrink: 0;
      transition: all 0.15s ease;
  }

  .home-suggest__icon svg {
      color: var(--primary) !important;
      font-size: 20px;
  }

  .home-suggest__item.is-active .home-suggest__icon,
  .home-suggest__item:hover .home-suggest__icon {
      background: var(--primary);
      transform: scale(1.05);
  }

  .home-suggest__item.is-active .home-suggest__icon svg,
  .home-suggest__item:hover .home-suggest__icon svg {
      color: #fff !important;
  }

  .home-suggest__item.is-active,
  .home-suggest__item:hover {
      background: linear-gradient(to right, #f8fafc, #ffffff);
  }

  .home-suggest__text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
  }

  .home-suggest__label {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: #0f172a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .home-suggest__sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  /* Property Card Styles */
  .home-suggest__property-card {
      display: flex;
      align-items: center;
      gap: 12px;
      width: calc(100% - 16px);
      padding: 10px;
      margin: 6px 8px;
      border: 1px solid #e2e8f0;
      background: #fff;
      cursor: pointer;
      text-align: left;
      color: #1e293b;
      transition: all 0.2s ease;
      border-radius: 8px;
      position: relative;
  }

  .home-suggest__property-card.is-active,
  .home-suggest__property-card:hover {
      background: #f3f5ff;
      border-color: #e6e9fa;
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
      transform: translateY(-1px);
  }

  .property-card__image {
      width: 70px;
      height: 60px;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      background: #f1f5f9;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

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

  .property-card__placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      color: #cbd5e1;
      font-size: 28px;
  }

  .property-card__content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .property-card__title {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
  }

  .property-card__details {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
  }

  .property-card__badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 6px;
      background: #f1f5f9;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 500;
      color: #475569;
      white-space: nowrap;
  }

  .property-card__badge i {
      font-size: 9px;
      color: #64748b;
  }

  .property-card__location {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      color: #64748b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .property-card__location i {
      font-size: 10px;
      color: #94a3b8;
      flex-shrink: 0;
  }

  .property-card__price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      padding-left: 10px;
      border-left: 1px solid #e2e8f0;
      flex-shrink: 0;
  }

  .property-card__price-value {
      font-size: 14px;
      font-weight: 700;
      color: #059669;
      white-space: nowrap;
  }

  .property-card__view-btn {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
      color: #fff;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      transition: all 0.2s ease;
      opacity: 0.9;
      white-space: nowrap;
  }

  .property-card__view-btn i {
      font-size: 9px;
      transition: transform 0.2s ease;
  }

  .home-suggest__property-card.is-active .property-card__view-btn,
  .home-suggest__property-card:hover .property-card__view-btn {
      opacity: 1;
      transform: translateX(1px);
  }

  .home-suggest__property-card.is-active .property-card__view-btn i,
  .home-suggest__property-card:hover .property-card__view-btn i {
      transform: translateX(1px);
  }

  .home-suggest::-webkit-scrollbar {
      width: 6px;
  }

  .home-suggest::-webkit-scrollbar-track {
      background: #f8fafc;
      border-radius: 10px;
  }

  .home-suggest::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
  }

  .home-suggest::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
  }

  .banner-section .btn-field .search-btn {
      background: var(--primary);
      color: #fff;
      border-radius: 6px;
      padding: 16px 35px;
      font-size: 18px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .banner-section .popular-tags {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
  }

  .banner-section .popular-tags a {
      color: #fff;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 0, 0, 0.4);
      padding: 8px 18px;
      border-radius: 20px;
      text-decoration: none;
  }

  .banner-section .stats-bar {
      position: absolute;
      bottom: -40px;
      left: 30px;
      right: 30px;
  }

  .banner-section .stats-bar .container {
      display: flex;
      justify-content: space-between;
      background: var(--primary);
      border-radius: 10px;
      padding: 25px 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      max-width: 1500px !important;

  }

  .banner-section .stat-item {
      display: flex;
      align-items: center;
      gap: 15px;
  }

  .banner-section .stat-icon {
      width: 50px;
      height: 50px;
      background: #ffca28;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 20px;
  }

  .banner-section .stat-icon svg {
      width: 20px;
      height: 20px
  }

  .banner-section .stat-info h4 {
      color: #fff;
      font-size: 22px;
      font-weight: 600;
      margin: 0;
      line-height: 1.2;
      text-align: left;
  }

  .banner-section .stat-info p {
      color: #dfe7ff;
      font-size: 13px;
      margin: 0;
      text-align: left;
  }

  @media (max-width: 768px) {
    .banner-section .text-yellow{
        display: block!important;
    }
      .enroll-modal-title {
          margin-bottom: 50px !important;
      }

      .home-suggest__property-card.is-active,
      .home-suggest__property-card:hover {
          background: none;
      }

      .home-suggest {
          width: 100%;
          min-width: 300px;
          max-width: 100%;
          left: 0;
          right: 0;
      }

      /* Property Card Layout on Mobile */
      .home-suggest__property-card {
          padding: 4px;
          gap: 8px;
          margin: 4px 6px;
          width: calc(100% - 12px);
      }

      /* Compact Image */
      .property-card__image {
          width: 52px;
          height: 52px;
          border-radius: 6px;
      }

      /* Content & Typography */
      .property-card__content {
          gap: 2px;
      }

      .property-card__title {
          font-size: 12px;
          line-height: 1.2;
      }

      .property-card__details {
          gap: 4px;
      }

      .property-card__badge {
          font-size: 9px;
          padding: 1px 4px;
      }

      .property-card-bhk {
          display: none;
      }

      .property-card__badge {
          background: none;
      }

      .property-card__location {
          font-size: 10px;
      }

      /* Compact Price Column */
      .property-card__price {
          padding-left: 6px;
          border-left: 1px solid #f1f5f9;
          justify-content: center;
      }

      .property-card__price-value {
          font-size: 12px;
          font-weight: 700;
      }

      /* Hide the 'View ->' button on mobile to save horizontal space */
      .property-card__view-btn {
          display: none;
      }

      .home-suggest {
          min-width: 320px;
          max-width: 340px;
      }


      .home-suggest__icon {
          font-size: 14px !important;
      }

      .home-suggest__label {
          font-weight: 500;
          font-size: 13px;
      }

      .banner-section .stats-bar,
      .banner-section .search-box,
      .banner-section .popular-tags {
          display: none;
      }

      .banner-section {
          margin: 0px !important;
          margin-bottom: 10px !important;
      }

      .banner-section .banner-bg {
          padding: 20px 15px 40px 15px;
          border-radius: 0px;
          min-height: 140px;
      }

      .banner-section .search-form-mobile {
          /* position: absolute; */

          z-index: 50;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          background: transparent;
          filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
          padding: 0;
          border-radius: 0;
          box-shadow: none;
          position: relative;
          z-index: 50;
      }

      .search-field input {
          position: relative;
          z-index: 2;
          background: transparent;
      }
        .mobile-placeholder-mask {
            position: absolute;
            left: 30px;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
            z-index: 1;
        }

        .mobile-placeholder-track {
            display: inline-flex;
            width: max-content;
            animation: searchPlaceholderLoop 20s linear infinite;
        }

        .mobile-placeholder-track span {
            display: inline-block;
            padding-right: 10px;
            color: #94a3b8;
            font-size: 12.5px;
        }

        @keyframes searchPlaceholderLoop {
            from {
            transform: translateX(0);
            }

            to {
            transform: translateX(-50%);
            }
        }
      .banner-section .search-form-mobile .search-mobile-top {
          width: 100%;
          display: flex;
          align-items: center;
          background: #ffffff;
          border-radius: 28px;
          border-bottom-left-radius: 0px;
          padding: 6px 6px 6px 14px;
          position: relative;
          z-index: 2;
      }

      .banner-section .search-form-mobile .search-field {
          flex: 1;
          display: flex;
          align-items: center;
          margin-right: 8px;
          position: relative;
          min-width: 0;
      }

      .banner-section .search-form-mobile .search-field-icon {
          color: #64748B;
          font-size: 14px;
          margin-right: 8px;
          flex-shrink: 0;
      }

      .banner-section .search-form-mobile .search-field input {
          width: 100%;
          border: none;
          outline: none;
          padding: 8px 4px;
          font-size: 12.5px;
          color: #1e293b;
          background: transparent;
      }

      .banner-section .search-form-mobile .search-field input::placeholder {
          color: #94A3B8;
          font-size: 12px;
      }

      .banner-section .search-form-mobile .btn-filter-trigger {
          background: #F1F4F9;
          color: #334155;
          border: none;
          border-radius: 50%;
          width: 33px;
          height: 33px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 6px;
          cursor: pointer;
          flex-shrink: 0;
          font-size: 13.5px;
          position: relative;
          transition: background 0.2s ease, color 0.2s ease;
      }

      .banner-section .search-form-mobile .btn-filter-trigger:hover,
      .banner-section .search-form-mobile .btn-filter-trigger:active {
          background: #E2E8F0;
          color: var(--primary, #1D4ED8);
      }

      .banner-section .search-form-mobile .btn-filter-trigger.has-filters {
          background: #EEF2FF;
          color: var(--primary, #1D4ED8);
      }

      .banner-section .search-form-mobile .btn-filter-trigger .filter-badge-dot {
          position: absolute;
          top: 5px;
          right: 5px;
          width: 7px;
          height: 7px;
          background: #EF4444;
          border-radius: 50%;
          border: 1.5px solid #ffffff;
      }

      .banner-section .search-form-mobile .btn-search {
          background: var(--primary, #1D4ED8);
          color: #fff;
          border: none;
          border-radius: 20px;
          padding: 8px 16px;
          font-size: 12.5px;
          font-weight: 500;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          transition: background 0.2s ease;
      }

      .banner-section .search-form-mobile .search-mobile-bottom-row {
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          position: relative;
          z-index: 1;
          gap: 6px;
      }

      .banner-section .search-form-mobile .search-mobile-tabs {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          background: #ffffff;
          padding: 3px 8px 6px 8px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          position: relative;
          margin-top: -1px;
          z-index: 1;
          flex-shrink: 0;
          overflow: visible;
          /* overflow-x: auto;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch; */
      }

      .banner-section .search-form-mobile .search-mobile-tabs::-webkit-scrollbar {
          display: none;
      }

      /* Inverted concave curve connecting tabs to top search bar */
      .banner-section .search-form-mobile .search-mobile-tabs::after {
          content: '';
          position: absolute;
          top: 0px;
          left: 100%;
          width: 20px;
          height: 20px;
          background: radial-gradient(circle at 20px 20px, transparent 19.5px, #ffffff 20px);
          pointer-events: none;
      }

      .banner-section .search-form-mobile .tab-pill {
          border: none;
          outline: none;
          padding: 5px 14px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
          background: #F1F4F9;
          color: #334155;
          cursor: pointer;
          transition: all 0.2s ease;
          line-height: 1.2;
      }

      .banner-section .search-form-mobile .tab-pill.active {
          background: var(--primary, #1D4ED8);
          color: #ffffff;
      }

      .banner-section .search-form-mobile .search-mobile-location-btn {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgb(0 0 0 / 37%);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          color: #ffffff;
          border-radius: 30px;
          padding: 4px 12px 4px 10px;
          margin-top: 4px;
          margin-right: 2px;
          cursor: pointer;
          flex-shrink: 1;
          min-width: 0;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: all 0.2s ease;
          text-decoration: none;
      }

      .banner-section .search-form-mobile .search-mobile-location-btn:hover {
          background: rgba(30, 41, 59, 0.88);
          border-color: rgba(255, 255, 255, 0.25);
      }

      .banner-section .search-form-mobile .search-mobile-location-btn:active {
          transform: scale(0.97);
          background: rgba(15, 23, 42, 0.95);
      }

      .banner-section .search-form-mobile .location-btn-icon-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          flex-shrink: 0;
      }

      .banner-section .search-form-mobile .location-btn-icon-wrap svg {
          width: 14px;
          height: 14px;
          display: block;
      }

      .banner-section .search-form-mobile .location-btn-text {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          min-width: 0;
          overflow: hidden;
      }

      .banner-section .search-form-mobile .location-btn-title {
          font-size: 11.5px;
          font-weight: 500;
          color: #ffffff;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 130px;
          display: block;
      }

      .banner-section .search-form-mobile .location-btn-subtitle {
          font-size: 9px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.72);
          line-height: 1.1;
          letter-spacing: 0.2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 130px;
          display: block;
      }

      @media (max-width: 360px) {
          .banner-section .search-form-mobile .tab-pill {
              padding: 5px 9px;
              font-size: 11px;
          }

          .banner-section .search-form-mobile .search-mobile-location-btn {
              padding: 3px 8px 3px 7px;
              gap: 5px;
          }

          .banner-section .search-form-mobile .location-btn-title {
              max-width: 85px;
              font-size: 10.5px;
          }

          .banner-section .search-form-mobile .location-btn-subtitle {
              font-size: 8.5px;
          }
      }

      .banner-section .banner-title {
          font-size: 20px;
          margin: 10px;
          text-align: start;
          line-height: 1;
          margin-bottom: 20px;
      }

      .banner-section .search-form {
          flex-direction: column;
      }

      .banner-section .select-field {
          border-right: none;
          border-bottom: 1px solid #eaeaea;
          padding-right: 0;
          padding-bottom: 15px;
          width: 100%;
      }

      .banner-section .input-field {
          width: 100%;
          padding: 10px 0;
      }

      .banner-section .btn-field {
          width: 100%;
      }

      .banner-section .btn-field .search-btn {
          width: 100%;
          justify-content: center;
      }

      .banner-section .search-tabs {
          overflow-x: auto;
          padding-bottom: 5px;
      }

      .banner-section .tabs-left {
          gap: 15px;
      }
  }

  @media(max-width: 992px) {
      .banner-section .stat-info h4 {
          font-size: 14px;
      }

      .banner-section .stat-info p {
          font-size: 11px;
          white-space: nowrap;
      }

      .banner-section .stat-icon {
          width: 35px;
          height: 35px;
      }

      .banner-section .stat-item {
          gap: 10px;
      }

      .tt-property-card .tt-property-content .tt-hover-actions {
          opacity: 0;
      }

      .tt-why-choose .tt-image-box img {
          display: none;
      }

      .cta-two .cta-card p {
          font-size: 13px !important;
          line-height: 1.4;
      }

      footer .search-grid {
          font-size: 12px !important;
      }

      footer .footer-bottom p {
          font-size: 10px !important;
      }

      .footer-bottom-links a {
          font-size: 10px;
      }
  }

  @media(max-width: 1200px) {
      .tt-property-card:hover .tt-property-content .tt-hover-actions {
          opacity: 0;
      }

      .tt-why-choose .tt-image-box img {
          display: none;
      }

      .cta-two .cta-card p {
          font-size: 13px !important;
          line-height: 1.4;
      }
  }




  /* ============================= */
  /*   BANNER SEARCH FORM MOBILE   */
  /* ============================= */


  .mobile-filter-sidebar {
      position: fixed;
      inset: 0;
      z-index: 999999;
      visibility: hidden;
      opacity: 0;
      transition: 0.35s ease;
  }

  .mobile-filter-sidebar.active {
      visibility: visible;
      opacity: 1;
  }

  .mobile-filter-sidebar .filter-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(3px);
  }

  .mobile-filter-sidebar .filter-sidebar-inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      max-height: 85vh;
      background: #fff;
      border-radius: 20px 20px 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: 0.4s ease;
  }

  .mobile-filter-sidebar.active .filter-sidebar-inner {
      transform: translateY(0);
  }

  .mobile-filter-sidebar .filter-top-bar {
      padding: 15px 20px 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  }

  .mobile-filter-sidebar .filter-top-bar .close-filter {
      background: #f1f1f1;
      border: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #333;
      font-size: 14px;
      transition: 0.3s;
  }

  .mobile-filter-sidebar .filter-top-bar .close-filter:hover {
      background: #e0e0e0;
  }

  .mobile-filter-sidebar .filter-tabs {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 0 20px 0px;
      border-bottom: 1px solid #ececec;
  }

  .mobile-filter-sidebar .filter-tabs button {
      border: none;
      background: transparent;
      padding: 0 0 8px;
      font-size: 14px;
      font-weight: 500;
      color: #777;
      position: relative;
  }

  .mobile-filter-sidebar .filter-tabs button.active {
      color: #111;
      font-weight: 600;
  }

  .mobile-filter-sidebar .filter-tabs button.active::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 2px;
      background: #111;
  }

  .mobile-filter-sidebar .filter-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 15px 100px;
  }

  .mobile-filter-sidebar .filter-group {
      margin-bottom: 20px;
      margin-left: 5px;
      margin-right: 5px;
  }

  .mobile-filter-sidebar .filter-group h4 {
      font-size: 13px;
      font-weight: 500;
      color: #555;
      margin-bottom: 7px;
      text-align: left;
  }

  .mobile-filter-sidebar .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .mobile-filter-sidebar .filter-group svg {
      color: var(--primary);
  }

  .mobile-filter-sidebar .tag-item input {
      display: none;
  }

  .mobile-filter-sidebar .tag-item span {
      padding: 0px 10px;
      border-radius: 30px;
      border: 1px solid #e0e0e0;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 400;
      color: #222;
      transition: 0.3s ease;
      min-width: 30px;
      min-height: 30px;
  }

  .mobile-filter-sidebar .tag-item span i {
      color: var(--primary);
      font-size: 12px;
  }

  .mobile-filter-sidebar .tag-item input:checked+span {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
  }

  .mobile-filter-sidebar .tag-item input:checked+span i {
      color: #fff;
  }

  .mobile-filter-sidebar .tag-item input:checked+span svg {
      color: #fff;
  }

  .mobile-filter-sidebar .tag-icon-minus {
      display: none;
  }

  .mobile-filter-sidebar .tag-item input:checked+span .tag-icon-plus {
      display: none;
  }

  .mobile-filter-sidebar .tag-item input:checked+span .tag-icon-minus {
      display: block;
  }

  .mobile-filter-sidebar .tag-item input:checked+span img {
      filter: brightness(0) invert(1);
  }


  .mobile-filter-sidebar .budget-values {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2px;
      font-size: 13px;
      font-weight: 500;
      color: #111;
  }

  .mobile-filter-sidebar .budget-range-input {
      width: 100%;
      -webkit-appearance: none;
      height: 4px;
      background: #e0e6ff;
      border-radius: 5px;
      outline: none;
  }

  .mobile-filter-sidebar .budget-range-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--primary);
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  .mobile-filter-sidebar .filter-bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px 20px 20px;
      background: #fff;
      border-top: 1px solid #ececec;
  }

  .mobile-filter-sidebar .search-filter-btn {
      width: 100%;
      height: 48px;
      border: none;
      border-radius: 30px;
      background: var(--primary);
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }


  @media(max-width: 768px) {
      .tt-empty h3 {
          font-size: 14px !important;
      }

      .tt-empty p {
          font-size: 12px !important;
      }
  }



  /* ============================= */
  /*             FOOTER            */
  /* ============================= */

  footer {
      background-color: #F5F5F5;
      color: #303030;
      position: relative;
      padding-top: 60px;
  }

  footer .container-two {
      background: var(--primary);
      border-radius: 20px;
      padding-top: 60px;
      margin-bottom: 20px;
  }

  footer .footer-logo img {
      max-width: 180px;
  }

  footer .title {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0;
      margin-bottom: 20px;
  }

  footer ul li {
      margin-bottom: 20px;
      font-size: 14px;
  }

  footer ul li a {
      color: #303030;
      font-size: 14px;
      text-decoration: none;
      transition: 0.3s;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  footer ul li a i {
      color: #303030;
  }

  footer ul li a:hover {
      color: var(--primary);
      padding-left: 5px;
  }


  footer .footer-about {
      font-size: 14px;
      margin: 20px 0;
      line-height: 1.8;
      color: #000;
  }

  footer .footer-social {
      display: flex;
      gap: 10px;
      margin-top: 20px;
  }

  footer .footer-social a {
      width: 35px;
      height: 35px;
      /* border: 1px solid #fff; */
      background-color: #ADADAD;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #fff;
      font-size: 12px;
      transition: 0.3s;
  }

  footer .footer-social a:hover {
      background: #fff;
      color: var(--primary);
  }

  footer .footer-contact li {
      margin-bottom: 16px;
      font-size: 14px;
      line-height: 1.6;
      display: flex;
      align-items: flex-start;
      gap: 10px;
  }

  footer .footer-contact li i {
      margin-top: 4px;
      font-size: 16px;
  }

  footer .footer-searches {
      padding-top: 20px;
      margin-bottom: 20px;
      margin-top: 15px;
  }

  footer .footer-searches h4 {
      margin-bottom: 10px;
  }

  footer .search-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      font-size: 14px;
      color: #303030;
  }

  footer .search-grid span {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  footer .search-grid span i {
      font-size: 8px;
  }

  footer .footer-bottom {
      border-top: 1px solid rgba(192, 192, 192, 0.2);
      padding: 20px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #303030;
  }

  footer .footer-bottom p {
      color: 303030;
  }

  footer .footer-bottom a {
      margin-left: 15px;
      color: #303030;
      text-decoration: none;
      font-size: 15px;
  }

  footer .footer-bottom p a {
      margin: 0px;
      color: var(--primary);
  }

  footer .footer-bottom-links a:hover {
      color: var(--primary);
  }

  footer .col-md-2,
  footer .col-md-3,
  footer .col-md-5 {
      margin-bottom: 20px;
  }

  @media (max-width: 1300px) {
      footer .title {
          font-size: 16px;
          margin-bottom: 10px;
      }
  }

  @media (max-width: 768px) {

      footer .footer-logo {
          justify-content: center;
          display: flex;
          margin-bottom: 20px;
      }

      footer ul li {
          margin-bottom: 12px;
      }

      footer .title {
          font-size: 16px;
          margin-bottom: 10px;
      }

      footer .footer-social {
          justify-content: center;
          margin-top: 10px;
      }

      .footer-bottom {
          flex-direction: column;
          gap: 10px;
          text-align: center;
      }

      footer {
          padding-top: 25px;
      }

      footer .footer-about {
          display: none;
      }

      footer .footer-searches {
          margin-top: 0;
          padding-top: 0px;
      }

      footer .search-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 5px;
      }

      footer .search-grid span i {
          display: none;
      }

      footer .search-grid span {
          font-size: 11px;
      }

      footer .search-grid svg {
          font-size: 12px;
      }

      footer ul li a,
      footer .footer-contact li {
          font-size: 13px;
      }

      footer .footer-bottom a,
      footer .footer-bottom p {
          font-size: 11px;
      }

      footer .footer-bottom {
          flex-direction: column-reverse;
          padding: 12px 0px;
          gap: 0px;
      }

      footer .footer-bottom .tt-copyright-thithithara {
          order: 2;

      }

      footer .footer-bottom .tt-copyright-appziac {
          order: 1;
      }

      footer .footer-bottom .footer-bottom-links {
          order: 3;
      }

      footer .footer-bottom .tt-copyright-appziac img {
          width: 25px !important;
          height: 25px !important;
          line-height: 1.4 !important;
      }

      .footer-bottom-links {
          display: flex;
          gap: 10px;
      }

      footer .footer-bottom a {
          margin-left: 0 !important;
      }

  }


  /* ============================= */
  /*             CATEGORIES            */
  /* ============================= */

  .categories-section {
      padding-top: 65px;
  }

  .categories-section .tt-category-card {
      background: var(--primary-light);
      border: solid 1px var(--primary-light);
      padding: 25px 15px;
      border-radius: 6px;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .categories-section .swiper-slide {
      width: auto;
  }

  .categories-section .tt-icon {
      width: 65px;
      height: 65px;
      margin: auto;
      margin-bottom: 15px;
      background: #fff;
      border: solid 1px var(--border);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
  }

  .categories-section .tt-category-card h4 {
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 10px;
      color: #000;
  }

  /* Category name display - show long name on desktop, short name on mobile */
  .categories-section .tt-category-display-long {
      display: inline-block;
  }

  .categories-section .tt-category-display-short {
      display: none;
  }

  .categories-section .tt-badge {
      display: inline-block;
      padding: 5px 12px;
      font-size: 12px;
      border-radius: 20px;
      background: var(--secondary);
      color: #000;
      font-weight: 400;
  }

  .categories-section .tt-category-card:hover .tt-badge {
      background: var(--primary);
      color: #fff;
  }

  .categories-section .tt-category-card:hover {
      border: 1px solid var(--primary);
  }

  .categories-section .tt-category-card:hover .tt-icon {
      background: var(--secondary);
  }

  .categories-section .swiper-slide {
      min-width: 200px;
      width: auto !important;
  }

  @media (max-width:768px) {
      .categories-section {
          padding-top: 0px;
      }

      .categories-section .swiper-slide {
          min-width: 80px;
          max-width: 80px !important;
      }

      .categories-section .tt-category-card {
          padding: 6px 4px;
          display: flex !important;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          border-radius: 6px;
          background-color: #EEF1F8;
          height: 85px;
          overflow: hidden;
      }

      .categories-section .tt-category-display-long {
          display: none !important;
      }

      .categories-section .tt-category-display-short {
          display: inline-block !important;
      }

      .categories-section .tt-category-card h4,
      .tt-category-card h4 {
          margin-bottom: 0px;
          font-size: 11px;
          white-space: normal !important;
          word-break: break-word;
          overflow-wrap: break-word;
          text-align: center;
          width: 100%;
          line-height: 1.15;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .tt-property-listing-section .tt-listing-card .tt-location {
          margin-top: 5px !important;
      }

      .categories-section .tt-badge {
          display: none;
      }


      .categories-section .tt-icon,
      .tt-category-card .tt-icon {
          width: 32px;
          height: 32px;
          margin: 0;
          margin-bottom: 0;
          border-radius: 30px;
          padding: 2px;
          flex-shrink: 0;
          background: none;
          border: none;
      }

      .categories-section .tt-icon img,
      .tt-category-card .tt-icon img {
          width: 34px !important;
          height: 34px !important;
          object-fit: contain;
      }
      .categories-section .tt-category-card:hover .tt-icon {
        background: none!important;
      }

      /* .categories-section .tt-category-card h4,
      .tt-category-card h4 {
          margin-bottom: 0px;
          font-size: 12px;
          white-space: wrap !important;
          min-width: 0;
          line-height: 1;
      } */
  }

  /* ============================= */
  /*          PROPERTY CARD       */
  /* ============================= */

  .tt-property-card {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #E8E8E8;
      transition: 0.3s;
      padding: 14px;
  }



  .tt-property-card .tt-property-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 6/3.8;
      border-radius: 5px;
  }

  .tt-property-card .tt-property-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.4s;
  }

  .tt-property-card .tt-property-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
      z-index: 1;
      pointer-events: none;
  }

  .tt-property-card .tt-property-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.205);
      opacity: 0;
      transition: 0.4s ease;
      z-index: 1;
  }

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

  .tt-property-card:hover .tt-property-image img {
      transform: scale(1.05);
  }

  .tt-property-card .tt-property-image .tt-premium {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: #DEAE00;
      color: #fff;
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 4px;
      font-weight: 400;
      z-index: 2;
  }


  .tt-property-card .tt-property-image .tt-wishlist {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 35px;
      height: 35px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(5px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: pointer;
      z-index: 2;
  }



  .tt-property-card .tt-property-content .price-tag {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0px;
  }

  .tt-property-card .tt-property-content .price-tag .tt-price {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 0px;
      color: var(--primary);
  }

  .tt-property-card .tt-property-content .price-tag .tt-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 0px;
  }

  .tt-property-card .tt-property-content .price-tag .tt-type,
  .tt-property-card .tt-property-content .price-tag .tt-category {
      font-size: 10px;
      padding: 3px 6px;
      border-radius: 4px;
  }

  .tt-property-card .tt-property-content .price-tag .tt-type {
      background: #f2f5fc;
      color: var(--primary);
  }

  .tt-property-card .tt-property-content .price-tag .tt-category {
      background: #2d50a325;
      color: var(--primary);
  }

  /* Title */
  .tt-property-card .tt-property-content .tt-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #000;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .tt-property-card .tt-property-content .tt-location {
      font-size: 14px;
      color: #777;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
  }

  .tt-property-card .tt-property-content .tt-location i {
      margin-right: 5px;
  }

  .tt-property-card .tt-property-content .tt-features {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #555;
  }

  .tt-property-card .tt-property-content .tt-features span {
      display: flex;
      align-items: center;
      gap: 5px;
      border-right: 1px solid #ddd;
      padding-right: 10px;
      width: 33%;
      justify-content: center;
  }

  .tt-property-card .tt-property-content .tt-features span:last-child {
      border-right: none;
      padding-right: 0;
  }

  .tt-property-card .tt-property-content .tt-features span i {
      color: var(--primary);
  }


  .tt-property-card .tt-property-content .tt-hover-actions {
      position: absolute;
      width: 99%;
      display: flex;
      gap: 10px;
      justify-content: center;
      padding: 10px;
      transition: 0.3s;
      bottom: 6px;
      left: 2px;
      right: 2px;
      background-color: white;
      border-radius: 12px;
      opacity: 0;
  }

  .tt-property-card:hover .tt-hover-actions {
      opacity: 1;
  }

  .tt-property-card .tt-property-content .tt-btn {
      padding: 8px 12px;
      font-size: 13px;
      border-radius: 6px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 48%;
      justify-content: center;
  }

  .tt-property-card .tt-property-content .tt-btn.view {
      background: var(--primary);
      color: #fff;
  }

  .tt-property-card .tt-property-content .tt-btn.whatsapp {
      background: #fff;
      color: #49a72c;
      border: 1px solid #49a72c;
  }

  .tt-property-card .tt-property-content .tt-btn.whatsapp i {
      font-size: 15px;
  }

  .tt-property-card .tt-property-image .tt-whatsapp {
      display: none;
  }



  @media (max-width:1500px) {
      .tt-property-card {
          padding: 12px;
      }
  }

  @media (max-width:768px) {
      .tt-property-image .fa-whatsapp {
          font-size: 15px !important;
      }

      .tt-property-card .tt-property-image .tt-whatsapp {
          position: absolute;
          top: 48px;
          right: 8px;
          width: 35px;
          height: 35px;
          background: rgb(77, 194, 71);
          backdrop-filter: blur(5px);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          cursor: pointer;
          z-index: 2;
          font-size: 16px;
      }

      .tt-property-card .tt-property-image .tt-features {
          position: absolute;
          bottom: 6px;
          left: 6px;
          display: flex;
          gap: 3px;
          padding: 2px;
          border-radius: 5px;
      }

      .tt-property-card .tt-property-image .tt-features span {
          font-size: 11px;
          padding: 3px 6px;
          border-radius: 3px;
          color: #666;
          font-weight: 500;
          background: #fff;
      }

      .tt-property-card .tt-property-image .tt-features span i {
          color: var(--primary);
      }

      .tt-property-card .tt-property-content .tt-hover-actions {
          display: none;
          opacity: 1;
          padding: 8px;
      }

      .tt-property-card {
          padding: 8px;
      }

      .tt-property-card .tt-property-image .tt-premium {
          top: 6px;
          left: 6px;
      }

      .tt-property-card .tt-property-content .tt-btn {
          font-size: 12px;
          padding: 6px;
      }

      .tt-property-card .tt-property-image {
          aspect-ratio: 6/3.7;
      }

      /* .tt-property-card .tt-property-content {
          padding-bottom: 32px;
      } */

      .tt-property-card .tt-property-content .tt-features {
          display: none;
      }

      .tt-property-card .tt-property-content .tt-location {
          margin-bottom: 0px;
          font-size: 12px;
      }

      .tt-property-card .tt-property-content .price-tag .tt-price {
          font-size: 16px;
      }

      .tt-property-card .tt-property-content .tt-title {
          font-size: 14px;
          margin-bottom: 0px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;

      }
  }


  /* ============================= */
  /*        DISTRICT CARD (Swiper) */
  /* ============================= */

  /* slider wrapper */
  .tt-district-slider {
      padding-bottom: 4px;
  }

  /* individual card link */
  .tt-district-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      cursor: pointer;
  }

  /* square image box */
  .tt-district-image {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  /* map-pattern SVG-like CSS background for when there is no image */
  .tt-district-map-pattern {
      position: absolute;
      inset: 0;
      display: block;
      background-image:
          /* horizontal road lines */
          repeating-linear-gradient(0deg,
              transparent,
              transparent 28px,
              rgba(255, 255, 255, 0.45) 28px,
              rgba(255, 255, 255, 0.45) 30px),
          /* vertical road lines */
          repeating-linear-gradient(90deg,
              transparent,
              transparent 38px,
              rgba(255, 255, 255, 0.45) 38px,
              rgba(255, 255, 255, 0.45) 40px),
          /* diagonal accent */
          repeating-linear-gradient(45deg,
              transparent,
              transparent 20px,
              rgba(255, 255, 255, 0.15) 20px,
              rgba(255, 255, 255, 0.15) 22px);
  }

  /* centered compass / navigation icon */
  .tt-district-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 46px;
      height: 46px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .tt-district-icon svg {
      width: 22px;
      height: 22px;
      color: var(--primary, #2d4ea2);
      stroke: var(--primary, #2d4ea2);
  }

  /* district name label */
  .tt-district-name {
      font-size: 13px;
      font-weight: 600;
      color: #333;
      text-align: center;
      margin: 0;
      line-height: 1.3;
      transition: color 0.3s ease;
  }

  /* ---- hover states ---- */
  .tt-district-card:hover .tt-district-image {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  }

  .tt-district-card:hover .tt-district-icon {
      transform: translate(-50%, -50%) scale(1.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  }

  .tt-district-card:hover .tt-district-name {
      color: var(--primary, #2d4ea2);
  }

  /* ---- responsive ---- */
  @media (max-width: 768px) {
      .tt-district-icon {
          width: 36px;
          height: 36px;
      }

      .tt-district-icon svg {
          width: 17px;
          height: 17px;
      }

      .tt-district-name {
          font-size: 11px;
      }

      .tt-district-image {
          border-radius: 10px;
      }
  }


  /* ============================= */
  /*            LOCATION CARD       */
  /* ============================= */
  .tt-location-card {

      position: relative;
      display: block;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .tt-location-card .tt-image {
      width: 100%;
      height: 100%;
      aspect-ratio: 6/6;
      overflow: hidden;
  }

  .tt-location-card .tt-image img,
  .tt-location-card .tt-image span img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      transition: transform 0.5s ease !important;
  }

  .tt-location-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.75) 100%);
      z-index: 1;
      transition: background 0.35s ease;
  }

  .tt-location-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      color: #fff;
      padding: 14px;
      transition: padding-bottom 0.35s ease;
  }

  .tt-location-content h4 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 0;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  .tt-location-content .tt-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 4px 11px;
      border-radius: 20px;
      font-size: 11px;
      max-height: 40px;
      overflow: hidden;
      opacity: 1;
      margin-top: 6px;
  }

  .tt-location-content .tt-badge i {
      color: var(--secondary);
  }

  /* HOVER */
  .tt-location-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  }

  .tt-location-card:hover .tt-image img,
  .tt-location-card:hover .tt-image span img {
      transform: scale(1.08) !important;
  }

  .tt-location-card:hover::after {
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.88) 100%);
  }

  .tt-location-card:hover .tt-location-content h4 {
      margin-bottom: 8px;
  }

  .tt-location-card:hover .tt-location-content .tt-badge {
      max-height: 40px;
      opacity: 1;
      margin-top: 0;
  }

  .hide-desktop-location-swiper {
      display: none;
  }

  @media (max-width:768px) {
      .tt-location-card {
          border-radius: 8px;
          transform: none !important;
          box-shadow: none;
      }

      .tt-location-card::after {
          background: linear-gradient(to bottom, transparent 20%, #3553a6a0 100%);
      }

      .tt-location-content .tt-badge {
          display: none;
      }

      .tt-location-content h4 {
          font-size: 11px;
          margin-bottom: 0;
      }

      .hide-desktop-location-swiper {
          display: block;
      }

      .tt-location-content {
          padding: 10px 6px;
      }

      .tt-location-card:hover {
          transform: none;
          box-shadow: none;
      }

  }


  /* ============================= */
  /*            ADD BANNER         */
  /* +=============================*/

  .add-banner img {
      border-radius: 12px;
  }

  /* ============================= */
  /*           BUILDER CARD        */
  /* ============================= */

  .tt-builder-card .tt-builder-image {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 6/4;
  }

  .tt-builder-card .tt-builder-image .main-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-builder-card .tt-builder-image .logo-img {
      position: absolute;
      bottom: 26px;
      left: 10px;
      width: 100px;
      height: 70px;
      border: solid 2px white;
      border-radius: 6px;
      z-index: 99;
      overflow: hidden;
  }

  .tt-builder-card .tt-builder-image .logo-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-builder-card .tt-builder-content {
      position: relative;
      background-color: white;
      padding: 15px;
      margin: 8px 10px;
      margin-top: -20px;
      z-index: 99;
      border-radius: 9px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  /* .tt-builder-card .tt-builder-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.452), rgba(0, 0, 0, 0));
      opacity: 1;
      transition: 0.4s ease;
      z-index: 1;
  } */

  .tt-builder-card .tt-builder-content .tt-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 0px;
      color: #000;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .tt-builder-card .tt-builder-content .tt-location {
      font-size: 13px;
      color: #8C8C8C;
      margin-bottom: 5px;
      line-height: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .tt-builder-card .tt-builder-content .tt-builder-properties {
      display: flex;
      justify-content: space-between;
      /* flex-direction: column; */
      align-items: start;
  }

  .tt-builder-card .tt-builder-content .tt-builder-properties .price,
  .tt-builder-card .tt-builder-content .tt-builder-properties .rooms {
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .tt-builder-card .tt-builder-content .tt-builder-properties .price {
      color: var(--primary);
  }

  .tt-builder-card .tt-builder-content .tt-builder-properties .rooms {
      color: #666666;
  }

  @media (max-width:768px) {
      .tt-builder-card .tt-builder-content {
          padding: 12px;

      }

      .tt-builder-card .tt-builder-content .tt-builder-properties .price,
      .tt-builder-card .tt-builder-content .tt-builder-properties .rooms {
          font-size: 13px;
      }

      .tt-builder-card .tt-builder-content .tt-builder-properties .price {
          margin-bottom: 3px;
      }

      .tt-builder-card .tt-builder-image .logo-img {
          width: 80px;
          height: 60px;
      }
  }



  /* ============================= */
  /*           WHY CHOOSE        */
  /* ============================= */
  .tt-why-choose {
      padding: 50px 0;
      background: #f5f6f8;
  }

  .tt-why-choose a:active,
  .tt-why-choose a,
  .tt-why-choose a:focus {
      color: #fff;
  }

  .tt-why-choose .left {
      padding-right: 60px;
  }

  .tt-why-choose .tt-title {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 15px;
  }

  .tt-why-choose .tt-subtitle {
      color: #000;
      margin-bottom: 30px;
      line-height: 1.6;
  }

  .tt-why-choose .tt-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
  }

  .tt-why-choose .tt-stat-card {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 5px;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      transition: 0.3s;
  }

  .tt-why-choose .tt-stat-card .tt-stat-icon {
      background: var(--secondary);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      margin-bottom: 10px;
  }

  .tt-why-choose .tt-stat-card svg {
      width: 24px;
      height: 24px;
      color: #000;
  }

  .tt-why-choose .tt-stat-card:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  .tt-why-choose .tt-stat-card h3 {
      font-size: 18px;
      margin: 0;
      color: #000;
      font-weight: 600;
  }

  .tt-why-choose .tt-stat-card p {
      font-size: 15px;
      color: #666;
      line-height: 1.4;
  }

  .tt-why-choose .tt-image-box {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
  }

  .tt-why-choose .tt-image-box {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
  }

  .tt-why-choose .tt-image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-why-choose .tt-image-box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
              rgba(0, 0, 0, 0.6),
              rgba(0, 0, 0, 0.2));
      z-index: 1;
      pointer-events: none;
  }

  .tt-why-choose .tt-image-box .tt-image-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
  }

  .tt-why-choose .tt-image-box .tt-image-logo img {
      width: 140px;
  }

  .tt-why-choose .btn-primary {
      border-radius: 5px;
  }

  @media (max-width:1400px) {
      .tt-why-choose .left {
          padding-right: 0px;
      }
  }

  @media (max-width:768px) {
      .tt-why-choose .tt-image-box {
          display: none;
      }

      .tt-why-choose {
          padding: 20px 0px;
      }

      .tt-why-choose .tt-title {
          font-size: 20px;
          margin-bottom: 4px;
      }

      .tt-why-choose .tt-subtitle {
          font-size: 13px;
          margin-bottom: 15px;
      }

      .tt-why-choose .tt-stats {
          gap: 5px;
      }

      .tt-why-choose .tt-stat-card {
          padding: 8px;
          gap: 5px;
          margin-bottom: 10px;
      }

      .tt-why-choose .tt-stat-card h3 {
          font-size: 14px;
          font-weight: 600;
      }

      .tt-why-choose .tt-stat-card p {
          font-size: 10px;
          line-height: 1.2;
      }

      .tt-why-choose .tt-stat-card .tt-stat-icon {
          width: 35px;
          height: 35px;
          min-width: 35px;
          margin-bottom: 0px;
      }

      .tt-why-choose .tt-stat-card svg {
          width: 16px;
          height: 16px;
      }
  }

  /* ===================================== */
  /*           VIDEO TESTIMONIALS          */
  /* ===================================== */

  /* 
  .video-testimonials .video-testimonials-slider .swiper-slide {
      width: 320px;
  } */

  .video-testimonials .video-testimonial {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background: #000;
      cursor: pointer;
      aspect-ratio: 9/16;
  }

  .video-testimonials .video-testimonial video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .video-testimonials .video-testimonial-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
              rgba(0, 0, 0, 0.9) 5%,
              rgba(0, 0, 0, 0.4) 45%,
              rgba(0, 0, 0, 0.1) 100%);
      z-index: 1;
  }

  .text-testimonial::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
  }


  .video-testimonials .video-testimonial .video-testimonial-content {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      z-index: 2;
      color: #fff;
  }

  .video-testimonials .video-testimonial .video-testimonial-content .video-play-btn {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: 0.3s ease;
  }

  .video-testimonials .video-testimonial .video-testimonial-content .video-play-btn i {
      color: #fff;
      font-size: 16px;
  }

  .video-testimonials .video-testimonial:hover .video-testimonial-content .video-play-btn {
      transform: scale(1.08);
      background: var(--primary);
  }

  .video-testimonials .video-testimonial .video-testimonial-content h4 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 0px;
      color: #fff;
  }

  .video-testimonials .video-testimonial .video-testimonial-content p {
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
  }

  /* ===== Text Testimonials (from Testimonials module) ===== */
  .video-testimonials .text-testimonial {
      border-radius: 12px;
      padding: 30px 25px;
      min-height: 300px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
  }

  .video-testimonials {
      background: #fff;
  }

  .text-testimonial {
      background: #FFF7DA !important;
  }



  .video-testimonials .text-testimonial .text-testimonial-content {
      width: 100%;
  }

  .video-testimonials .text-testimonial .quote-icon {
      font-size: 28px;
      color: var(--primary);
      margin-bottom: 15px;
      opacity: 0.5;
  }

  .video-testimonials .text-testimonial .testimonial-text {
      font-size: 14px;
      line-height: 1.7;
      color: #555;
      margin-bottom: 18px;
      font-style: italic;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .video-testimonials .text-testimonial .testimonial-rating {
      margin-bottom: 15px;
  }

  .video-testimonials .text-testimonial .testimonial-rating i {
      font-size: 15px;
      margin-right: 2px;
  }

  .video-testimonials .text-testimonial .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      border-top: 1px solid #eee;
      padding-top: 15px;
  }

  .video-testimonials .text-testimonial .testimonial-author h4 {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: #222;
  }

  .video-testimonials .text-testimonial .testimonial-author p {
      font-size: 12px;
      color: #888;
      margin: 2px 0 0;
  }

  .text-warning {
      color: #f59e0b !important;
  }

  @media (max-width: 767px) {

      .video-testimonials .video-testimonial .video-testimonial-content {
          left: 18px;
          right: 18px;
          bottom: 18px;
      }

      .video-testimonials .video-testimonial {
          border-radius: 10px;
          aspect-ratio: 9/11 !important;
      }

      .video-testimonials .video-testimonial .video-testimonial-content h4 {
          font-size: 13px;
      }

      .video-testimonials .video-testimonial .video-testimonial-content .video-play-btn {
          width: 35px;
          height: 35px;
          margin-bottom: 10px;
          border-radius: 6px;
      }

      .video-testimonials .video-testimonial .video-testimonial-content .video-play-btn i {
          font-size: 12px;
      }

      .video-testimonials .video-testimonial .video-testimonial-content p {
          font-size: 11px;
      }
  }


  /* ===================================== */
  /*           PROPERTY SERVICES          */
  /* ===================================== */

  .property-services .property-services-slider .property-service-card {
      background: var(--primary);
  }

  /* .property-services .property-services-slider .swiper-slide:nth-child(1) .property-service-card {
      background: #FFF7DA;
  }

  .property-services .property-services-slider .swiper-slide:nth-child(2) .property-service-card {
      background: #E5FFDE;
  }

  .property-services .property-services-slider .swiper-slide:nth-child(3) .property-service-card {
      background: #DBEBFF;
  }

  .property-services .property-services-slider .swiper-slide:nth-child(4) .property-service-card {
      background: #FFDADB;
  } */

  .property-services .property-service-card {
      padding: 20px 12px;
      border-radius: 18px;
      height: 100%;
      transition: 0.35s ease;
      position: relative;
      overflow: hidden;
  }

  .property-services .property-service-card:hover {
      transform: translateY(-6px);
  }

  .property-services .property-service-card::before {
      content: "";
      position: absolute;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      top: -60px;
      right: -60px;
  }

  .property-services .property-service-card .head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  /* .property-services .property-service-card .head img {
      width: 35px;
      height: 35px;
      object-fit: contain;
  } */

  .property-services .property-service-card .head img {
      width: 45px;
      height: 45px;
      padding: 10px;
      background: var(--secondary);
      border-radius: 5px;
      object-fit: contain;
  }

  .property-services .property-service-card .head h3 {
      font-size: 16px;
      font-weight: 600;
      /* color: #111; */
      color: #fff;
      margin: 0;
      line-height: 1.3;
  }

  .property-services .property-service-card p {
      margin: 0;
      font-size: 15px;
      line-height: 1.9;
      /* color: #5E5E5E; */
      color: #dfdfdf;
      position: relative;
      z-index: 2;
  }

  .property-services .property-services-slider {
      overflow: hidden;
  }

  @media (max-width: 991px) {

      .property-services .property-service-card {
          padding: 15px;
      }

      .property-services .property-service-card .head h3 {
          font-size: 20px;
      }

      .property-services .property-service-card p {
          font-size: 12px;
          line-height: 1.8;
      }
  }

  @media (max-width: 767px) {


      .property-services .property-service-card {
          border-radius: 8px;
          padding: 12px 10px;
      }

      .property-services .property-service-card .head img {
          height: 30px;
          width: 30px;
      }

      .property-services .property-service-card .head {
          gap: 12px;
          margin-bottom: 10px;
      }

      .property-services .property-service-card .head img {
          width: 36px;
          height: 36px;
      }

      .property-services .property-service-card .head h3 {
          font-size: 15px;
      }
  }





  /* =========================== */
  /*           THARABOT          */
  /* =========================== */



  .tharabot-section {
      background: #f5f5f5;
  }

  .tharabot-section .tharabot-content {
      max-width: 640px;
  }

  .tharabot-section .tharabot-content .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      background: #f6c10e;
      color: #111;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 28px;
  }

  .tharabot-section .tharabot-content h2 {
      font-size: 40px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 15px;
      letter-spacing: -1px;
  }

  .tharabot-section .tharabot-content p {
      font-size: 15px;
      line-height: 2;
      color: #222;
      margin-bottom: 15px;
  }

  .tharabot-section .tharabot-content .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 13px 22px;
      background: #49a72c;
      color: #fff;
      border-radius: 60px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      transition: 0.35s ease;
  }

  .tharabot-section .tharabot-content .whatsapp-btn i {
      font-size: 16px;
  }

  .tharabot-section .tharabot-content .whatsapp-btn:hover {
      background: #38871f;
      transform: translateY(-4px);
  }

  .tharabot-section .tharabot-image {
      position: relative;
      text-align: center;
  }

  .tharabot-section .tharabot-image img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
  }

  @media (max-width:768px) {
      .tharabot-section .tharabot-content h2 {
          font-size: 16px;
          font-weight: 600;
      }

      .tharabot-section .tharabot-content p {
          display: none;
      }

      .tharabot-section .tharabot-content .tag {

          padding: 6px 12px;
          font-size: 10px;
          font-weight: 500;
          margin-bottom: 8px;
      }

      .tharabot-section .tharabot-content .whatsapp-btn {
          gap: 3px;
          padding: 10px 15px;
          border-radius: 60px;
          font-size: 12px;
          font-weight: 500;
          transition: 0.35s ease;
      }
  }

  /* ============================ */
  /*             BLOGS            */
  /* ============================ */


  .blog-card-spacing {
      padding: 0px 7px 20px 7px !important;
  }

  .blog-card {
      position: relative;
      transition: 0.35s ease;
      height: auto;
  }

  /* .blog-card:hover {
      transform: translateY(-1px);
  } */

  .blog-card .blog-image {
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      margin-bottom: 15px;
      aspect-ratio: 6/4;
  }

  .blog-card .blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: 0.5s ease;
  }

  .blog-card:hover .blog-image img {
      transform: scale(1.05);
  }

  .blog-card .blog-image .blog-share-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      border: 0;
      background: rgba(17, 17, 17, 0.72);
      color: #fff;
      height: 36px;
      padding: 0 12px;
      border-radius: 30px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      cursor: pointer;
      transition: 0.3s ease;
  }

  .blog-card .blog-image .blog-share-btn:hover {
      background: var(--primary);
  }

  .blog-card .blog-image .blog-share-menu {
      position: absolute;
      top: 56px;
      right: 12px;
      z-index: 3;
      width: 170px;
      border-radius: 12px;
      padding: 8px;
      background: #fff;
      border: 1px solid #e9eef9;
      box-shadow: 0 14px 32px rgba(20, 30, 55, 0.16);
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .blog-card .blog-image .blog-share-menu a,
  .blog-card .blog-image .blog-share-menu button {
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: #f5f8ff;
      color: #24324f;
      height: 36px;
      padding: 0 10px;
      text-align: left;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      cursor: pointer;
  }

  .blog-card .blog-image .blog-share-menu a:hover,
  .blog-card .blog-image .blog-share-menu button:hover {
      background: var(--primary);
      color: #fff;
  }

  .blog-card .blog-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 15px;
  }

  .blog-card .blog-meta .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #666;
      line-height: 1;
  }

  .meta-item img {
      max-width: 100% !important;
      width: revert-layer;
  }

  .blog-card .blog-meta .meta-item i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f3f5fb;
      border: 1px solid #dbe4ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 12px;
  }

  .meta-avatar {
      width: 28px;
      height: 28px;
      overflow: hidden;
      border: 1px solid #dbe4ff;
      border-radius: 50%;
  }

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

  .blog-card .blog-content h3 {
      font-size: 17px;
      line-height: 29px;
      font-weight: 600;
      color: #111;
      margin: 0;
      transition: 0.3s ease;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .blog-card .blog-content h3 a {
      color: inherit;
      text-decoration: none;
  }

  .blog-card:hover .blog-content h3 {
      color: var(--primary);
  }

  .blog-card .blog-content p {
      margin: 10px 0 16px;
      color: #666;
      font-size: 14px;
      line-height: 1.7;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .blog-card .blog-read-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 42px;
      padding: 0 18px;
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: 0.3s ease;
  }

  .blog-card .blog-read-btn:hover {
      background: #1f3f8b;
      color: #fff;
  }



  @media (max-width: 1399px) {

      .blog-card .blog-content h3 {
          font-size: 16px;
      }

      .blog-card .blog-meta {
          white-space: nowrap;
          overflow: hidden;
      }

      .blog-card .blog-meta .meta-item {
          font-size: 12px;
          min-width: 0;
          overflow: hidden;
          gap: 5px;
      }

      .blog-card .blog-meta .meta-item span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 100px;
      }

      .blog-card .blog-meta .meta-item i {
          width: 0px;
          height: 0px;
          margin: 5px 8px;
          background: none;
          border: none;

      }

      .blog-card .blog-meta {
          gap: 8px;
          margin-bottom: 5px;
      }

      .blog-card .blog-image {
          margin-bottom: 10px;
      }

      .blog-card .blog-read-btn {
          padding: 0 12px;
          height: 38px;
      }

      .blog-card .blog-content p {
          margin: 6px 0 10px;
      }

      .blog-card .blog-image .blog-share-btn {
          top: 10px;
          right: 10px;
          padding: 0px 10px;
      }

      .blog-content h3 {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }
  }


  @media (min-width: 468px) and (max-width: 767px) {
      .blog-card-spacing.custom-blog-col {
          flex: 0 0 auto;
          width: 50% !important;
          padding-left: 10px !important;
          padding-right: 10px !important;
      }
  }

  @media (max-width: 767px) {

      .blog-card .blog-meta .meta-item {
          font-size: 14px;
      }

      .blog-card .blog-content h3 {
          font-size: 13px;
          line-height: 1.5;
          font-weight: 500;
      }

      .blog-card .blog-meta .meta-item i {
          width: 20px;
          height: 20px;
          font-size: 10px;
      }

      .blog-card .blog-meta .meta-item {
          gap: 3px;
      }

      .blog-card .blog-meta .meta-item span {
          font-size: 12px;
      }

      .blog-card .blog-meta {
          gap: 5px;
          margin-bottom: 5px;
      }

      .blog-card-spacing {
          padding: 0 0 15px 0 !important;
      }

      .blog-card .blog-image {
          border-radius: 12px;
          margin-bottom: 10px;
      }

      .blog-card .blog-image .blog-share-btn {
          height: 34px !important;
          padding: 0 14px !important;
          font-size: 12px !important;
          margin-bottom: 12px !important;
      }

      .blog-card .blog-content p {
          line-height: 1.5em;
          font-size: 10px !important;
          padding: 0;
      }

      .blog-card .blog-meta .meta-item span {
          font-size: 10px;
      }

      .blog-card .blog-read-btn {
          top: 8px;
          right: 8px;
          padding: 0 14px;
          height: 30px;
          font-size: 12px;
      }

      .meta-avatar {
          width: 20px;
          height: 20px;
          border: none;
      }



  }

  /* ============================= */
  /*          CHANNELS             */
  /* ============================= */

  .partners-section .heading {
      text-align: center;
      margin-bottom: 24px;
  }

  .partners-section .heading .badge {
      border: solid 1px var(--border);
      color: var(--primary);
      padding: 6px 12px;
      font-weight: 500;
      border-radius: 20px;
      margin-bottom: 10px;
      display: inline-block;
  }

  .partners-section .heading h2 {
      font-size: 30px;
      font-weight: 600;
      margin: 0;
  }

  .partners-section .partner-logo {
      aspect-ratio: 4/2.2;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 8px;
      transition: 0.35s ease;
      border: solid 1px var(--border);
  }

  .partners-section .partner-logo:hover {
      transform: translateY(-6px);
  }

  .partners-section .partner-logo img {
      height: 100%;
      object-fit: contain;
  }



  @media (max-width:768px) {

      .partners-section .heading .badge {
          display: none;
      }

      .partners-section .heading h2 {
          font-size: 17px;
      }

      .partners-section .heading {
          margin-bottom: 12px;
      }

      .partners-section .partner-logo {
          padding: 6px;
      }

      .tt-disclaimer {
          display: none;
      }
  }

  /* ================================ */
  /*          CTA SECTION             */
  /* ================================ */

  .cta-two {
      position: relative;
      overflow: hidden;
  }


  .cta-two .cta-card {
      position: relative;
      padding: 35px 25px;
      border-radius: 15px;
      overflow: hidden;
      background: linear-gradient(135deg, #3553a6 0%, #12214d 100%);
      height: 100%;
      z-index: 1;
  }

  .cta-two .cta-card::before {
      content: "";
      position: absolute;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      right: -65px;
      bottom: -65px;
      z-index: -1;
  }

  .cta-two .cta-card::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      top: -40px;
      left: -40px;
      z-index: -1;
  }

  .cta-two .cta-card h2 {
      font-size: 26px;
      line-height: 1.3;
      font-weight: 700;
      color: #fff;
      margin-bottom: 24px;
  }

  .cta-two .cta-card p {
      font-size: 15px;
      line-height: 2;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 36px;
      padding-right: 30px;
  }

  .cta-two .cta-card .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 22px;
      border-radius: 5px;
      background: var(--secondary);
      color: #111;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      border: none;
      transition: 0.35s ease;
      box-shadow: none;
  }

  .cta-two .cta-card .btn-primary i {
      font-size: 15px;
  }

  .cta-two .cta-card .btn-primary:hover {
      background: var(--secondary);
      transform: translateY(-3px);
  }

  .cta-two .cta-card .cta-icon {
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
  }

  .cta-two .cta-card .cta-icon i {
      font-size: 45px;
      color: rgba(255, 255, 255, 0.9);
  }



  .cta-one .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background-color: #FFF6D5;
      padding: 15px 10px;
  }

  .cta-one .left h2 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 12px;
  }

  .cta-one .left p {
      font-size: 12px;
      line-height: 1.5;
      color: #666;
  }

  .cta-one .left p a {
      color: var(--primary);
  }

  .cta-one a {
      white-space: nowrap;
  }

  @media (max-width: 767px) {
      .cta-one {
          margin-bottom: 0px;
      }
  }

  @media (max-width:1300px) {
      .cta-two .cta-card h2 {
          font-size: 18px;
          font-weight: 500;
      }
  }

  @media (max-width: 767px) {
      .cta-one .left h2 {
          font-size: 12px;
      }

      .cta-one .left p {
          font-size: 10px
      }

      .cta-one .container {
          font-size: 12px;
      }

  }

  /* ================================ */
  /*             WHATSAPP             */
  /* ================================ */

  .floating-contact-buttons {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .floating-contact-buttons .floating-btn {
      position: relative;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
      transition: 0.35s ease;
      overflow: hidden;
      border: solid 2px white;
  }

  .floating-contact-buttons .floating-btn i {
      font-size: 20px;
      color: #fff;
      position: relative;
      z-index: 3;
  }

  .floating-contact-buttons .floating-btn svg {
      width: 25px;
      height: 25px;
      position: relative;
      z-index: 3;
      color: #fff;
  }

  .floating-contact-buttons .floating-btn:hover {
      transform: translateY(-6px) scale(1.05);
  }

  .floating-contact-buttons .whatsapp-btn {
      background: #49a72c;
  }

  .floating-contact-buttons .call-btn {
      background: var(--primary);
  }

  .floating-contact-buttons .floating-btn .pulse {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: inherit;
      opacity: 0.45;
      animation: floatingPulse 2s infinite;
  }

  .whatsapp-widget {
      display: none;
  }

  @keyframes floatingPulse {

      0% {
          transform: scale(1);
          opacity: 0.45;
      }

      70% {
          transform: scale(1.5);
          opacity: 0;
      }

      100% {
          transform: scale(1.5);
          opacity: 0;
      }
  }

  @media (max-width: 767px) {

      .floating-contact-buttons {
          right: 16px;
          bottom: 90px;
          gap: 12px;
      }

      .floating-contact-buttons .floating-btn {
          width: 45px;
          height: 45px;
      }

      .floating-contact-buttons .floating-btn i {
          font-size: 18px;
      }

      .whatsapp-widget {
          bottom: 80px !important;
      }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
      .floating-contact-buttons {
          bottom: 100px;
      }
  }



  /* =============================== */
  /*         FLOATING NAVBAR         */
  /* ================================*/

  .mobile-floating-navbar {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      max-width: 98%;
      background: rgb(255, 255, 255);
      backdrop-filter: blur(14px);
      border-radius: 10px;
      padding: 12px 18px;
      align-items: center;
      justify-content: space-between;
      z-index: 9999;
      display: none;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  }

  .mobile-floating-navbar .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      color: #777;
      font-size: 11px;
      font-weight: 500;
      transition: 0.3s ease;
      min-width: 58px;
  }

  .mobile-floating-navbar .nav-item i {
      transition: 0.3s ease;
      color: var(--primary);
  }

  .mobile-floating-navbar .nav-item:hover,
  .mobile-floating-navbar .nav-item.active {
      color: #000;
  }

  .mobile-floating-navbar .nav-item:hover i,
  .mobile-floating-navbar .nav-item.active i {
      transform: translateY(-2px);
  }

  .mobile-floating-navbar .nav-item.add-property {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--primary);
      margin-top: -42px;
      color: #fff;
      flex-direction: row;
  }

  .mobile-floating-navbar .nav-item.add-property i {
      font-size: 22px;
  }

  .mobile-floating-navbar .nav-item.add-property:hover {
      transform: translateY(-4px);
  }

  .mobile-floating-navbar .navbarlogo {
      max-width: 16px;
      max-height: 24px;
  }

  body:has(.mobile-filter-sidebar.active) .mobile-floating-navbar {
      display: none !important;
  }




  @media (max-width: 768px) {

      body {
          padding-bottom: 80px;
      }

      .mobile-floating-navbar {
          width: calc(100% - 18px);
          bottom: 10px;
          padding: 10px 12px;
          border-radius: 10px;
          display: flex;
      }

      .mobile-floating-navbar .nav-item {
          min-width: auto;
          font-size: 11px;
          font-weight: 400;
      }

      .mobile-floating-navbar .nav-item i {
          font-size: 18px !important;
      }

      .mobile-floating-navbar .nav-item.add-property {
          width: 52px;
          height: 52px;
          margin-top: -36px;
      }

      .mobile-floating-navbar .nav-item.add-property i {
          font-size: 20px;
          color: #fff;
      }
  }





  /* ============================ */
  /*      LOCATION MODAL        */
  /* ============================ */
  .location-modal-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .location-modal-header h3 {
      margin-bottom: 5px;
      font-size: 20px;
      font-weight: 600;
  }

  .location-modal-subtitle {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
  }

  .location-search-row {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 5px;
      background: #fff;
      margin-bottom: 10px;
  }

  .location-search-row input {
      flex: 1;
      border: none;
      padding: 8px 15px;
      font-size: 14px;
      outline: none;
      width: 100%;
  }

  .location-search-row .btn-find {
      background-color: var(--primary);
      color: #fff;
      border: none;
      padding: 10px 15px;
      border-radius: 6px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
  }

  .location-map-area {
      width: 100%;
      height: 250px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      border: 1px solid #ddd;
      margin-bottom: 10px;
  }

  .location-map-area iframe {
      width: 100%;
      height: 100%;
      border: none;
  }

  .location-map-buttons {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #fff;
      border-radius: 4px;
      display: flex;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 10;
  }

  .location-map-buttons button {
      background: transparent;
      border: none;
      padding: 8px 15px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
  }

  .location-map-buttons button.active {
      font-weight: 600;
      border-right: 1px solid #ddd;
  }

  .location-range-area {
      background: #f8f9fa;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 10px;
  }

  .location-range-area p {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
      color: #333;
  }

  .location-range-area input[type=range] {
      width: 100%;
      accent-color: #0b8e7c;
      height: 6px;
      border-radius: 5px;
      outline: none;
      cursor: pointer;
  }

  .location-modal-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 15px;
  }

  .location-modal-footer .btn-clear {
      background: none;
      border: none;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      font-weight: 500;
  }

  .location-modal-footer .btn-save {
      background-color: #1a2232;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      font-weight: 500;
  }

  @media (max-width: 998px) {
      .location-modal-subtitle {
          font-size: 12px;
          line-height: 20px;
      }

      .location-search-row input {
          font-size: 12px;
          padding: 8px 2px;
      }

      .location-search-row .btn-find {
          font-size: 11px;
          white-space: nowrap;
      }

      .location-search-row .btn-find {
          padding: 10px 8px;
      }

      .location-modal-content {
          gap: 5px;
      }

      .location-modal-footer .btn-save,
      .location-modal-footer .btn-clear,
      .location-map-buttons button {
          font-size: 12px;
      }
  }


  /* ============================== */
  /*           BREADCRUMB           */
  /* ============================== */


  .breadcrumb-area {
      padding-top: 15px;
  }

  .breadcrumb-area .container .breadcrumb-content {
      background: #F5F5F5;
      padding: 20px 15px;
      border-radius: 5px;
  }

  .breadcrumb-area .breadcrumb {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      flex-wrap: nowrap;
      overflow: hidden;
  }

  .breadcrumb-area .breadcrumb li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      flex-shrink: 0;
  }

  .breadcrumb-area .breadcrumb li:last-child {
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
  }

  .breadcrumb-area .breadcrumb li i {
      color: var(--primary);
      margin-right: 5px;
  }

  .breadcrumb-area .breadcrumb-meta-content {
      margin-top: 10px;
  }

  .breadcrumb-area .breadcrumb-meta-content h1 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 2px;
  }

  .breadcrumb-area .breadcrumb-meta-content p {
      font-size: 14px;
      margin-bottom: 0;
  }

  @media (max-width:768px) {
      .breadcrumb-area .container .breadcrumb-content {
          padding: 10px 15px;
      }

      .breadcrumb-area .breadcrumb-meta-content h1 {
          font-size: 14px;
      }

      .breadcrumb-area .breadcrumb-meta-content p {
          font-size: 11px;
          line-height: 16px;
      }

      .breadcrumb-area .breadcrumb-meta-content {
          margin-top: 5px;
      }

      .breadcrumb-area .container {
          padding: 0;
          margin: 0px;
      }

      .breadcrumb-area .breadcrumb li {
          font-size: 12px;
          white-space: nowrap;
          flex-shrink: 0;
      }

      .breadcrumb-area .breadcrumb {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
      }

      .breadcrumb-area .breadcrumb::-webkit-scrollbar {
          display: none;
      }
  }


  /* ================================ */
  /*         PROPERTY LISTING         */
  /* ================================ */



  .tt-property-listing-section .post-via-req-card {
      background-color: var(--primary);
      color: white;
      padding: 25px 12px;
      border-radius: 8px;
      margin: 15px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .tt-property-listing-section .post-via-req-card h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 15px;
      text-align: center;
  }

  .tt-property-listing-section .property-list-add img {
      max-width: 100%;
      border-radius: 8px;
  }

  .tt-property-listing-section .tt-filter-sidebar {
      background: #F6F6F6;
      padding: 20px;
      border-radius: 8px;
  }

  .tt-property-listing-section .tt-filter-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 15px;
      border-bottom: solid 1px #EBEBEB;
      margin-bottom: 15px;
  }

  .tt-property-listing-section .tt-filter-head h3 {
      font-size: 18px;
      margin: 0;
      font-weight: 600;
  }

  .tt-property-listing-section .tt-clear-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--primary);
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 13px;
      gap: 5px;
      white-space: nowrap;
      flex-shrink: 0;
      width: max-content;
  }

  .tt-property-listing-section .tt-search-box {
      position: relative;
      margin-bottom: 25px;
  }

  .tt-property-listing-section .tt-search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #777;
  }

  .tt-property-listing-section .tt-search-box input {
      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      background-color: white;
      border-radius: 8px;
      padding-left: 45px;
      outline: none;
      font-size: 12px;
  }

  .tt-filter-group .icon-checked {
      display: none;
  }

  .tt-filter-group input:checked+.filter-icon .icon-unchecked {
      display: none;
  }

  .tt-filter-group input:checked+.filter-icon .icon-checked {
      display: block;
  }

  .tt-property-listing-section .tt-filter-group {
      margin-bottom: 20px;
  }

  .tt-property-listing-section .tt-filter-group h4 {
      font-size: 14px;
      margin-bottom: 10px;
      font-weight: 500;
  }

  .tt-property-listing-section .tt-filter-group .filter-sub-group {
      margin-bottom: 15px;
  }

  .tt-property-listing-section .tt-filter-group .filter-sub-group h5 {
      font-size: 12px;
      margin-bottom: 10px;
      font-weight: 500;
  }

  .tt-property-listing-section .tt-price-range {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
  }

  .tt-property-listing-section .tt-price-range span {
      font-size: 12px;
  }

  .tt-property-listing-section .tt-dual-range-slider {
      position: relative;
      height: 36px;
      margin-top: 8px;
  }

  .tt-property-listing-section .tt-dual-range-slider .tt-range-track {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      background: #ddd;
      border-radius: 2px;
      transform: translateY(-50%);
      pointer-events: none;
  }

  .tt-property-listing-section .tt-dual-range-slider .tt-range-highlight {
      position: absolute;
      top: 0;
      height: 100%;
      background: var(--primary);
      border-radius: 2px;
      pointer-events: none;
  }

  .tt-property-listing-section .tt-dual-range-slider .tt-range-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      pointer-events: none;
      margin: 0;
      padding: 0;
      outline: none;
  }

  .tt-property-listing-section .tt-dual-range-slider .tt-range-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--primary);
      border: 2px solid #fff;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .tt-property-listing-section .tt-dual-range-slider .tt-range-input::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--primary);
      border: 2px solid #fff;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .tt-property-listing-section .tt-filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check {
      cursor: pointer;
      display: inline-block;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check input {
      display: none;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check span {
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 30px;
      padding: 6px 12px;
      font-size: 14px;
      display: flex;
      align-items: center;
      transition: 0.3s;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check input:checked+span {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
  }

  .tt-property-listing-section .tt-filter-tags .filter-check span i {
      color: var(--primary);
      margin-right: 5px;
      transition: 0.3s;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check span svg {
      color: var(--primary) !important;
      margin-right: 5px;
      transition: 0.3s;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check input:checked+span svg {
      color: #fff !important;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check input:checked+span i {
      color: #fff;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check span img {
      width: 15px;
      height: 15px;
      object-fit: cover;
      margin-right: 5px;
      transition: 0.3s;
  }

  .tt-property-listing-section .tt-filter-tags .filter-check input:checked+span img {
      filter: brightness(0) invert(1);
  }

  .tt-property-listing-section .tt-number-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .tt-property-listing-section .tt-number-filter .num-check {
      cursor: pointer;
      display: inline-block;
  }

  .tt-property-listing-section .tt-number-filter .num-check input {
      display: none;
  }

  .tt-property-listing-section .tt-number-filter .num-check span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #ddd;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
  }

  .tt-property-listing-section .tt-number-filter .num-check input:checked+span {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
  }

  .tt-property-listing-section .tt-listing-topbar {
      margin-bottom: 10px;

  }

  .tt-property-listing-section .tt-listing-topbar p {
      margin-bottom: 15px;
  }

  .tt-property-listing-section .tt-listing-topbar p span {
      color: var(--primary);
      font-weight: 600;
  }

  .tt-property-listing-section .tt-top-filters {
      display: flex;
      gap: 0;
      align-items: center;
      overflow: visible;
  }

  .tt-property-listing-section .filters-list-container {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
  }

  .tt-property-listing-section .filters-scroll-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      color: var(--primary);
      transition: all 0.2s ease-in-out;
      padding: 0;
  }

  .tt-property-listing-section .filters-scroll-btn:hover {
      background: #f8fafc;
      transform: translateY(-50%) scale(1.05);
      color: var(--primary);
      border-color: var(--primary);
  }

  .tt-property-listing-section .filters-scroll-btn.left {
      left: 4px;
  }

  .tt-property-listing-section .filters-scroll-btn.right {
      right: 4px;
  }

  .tt-property-listing-section .filters-list-fade-left,
  .tt-property-listing-section .filters-list-fade-right {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 40px;
      pointer-events: none;
      z-index: 5;
      transition: opacity 0.2s ease-in-out;
  }

  .tt-property-listing-section .filters-list-fade-left {
      left: 0;
      background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }

  .tt-property-listing-section .filters-list-fade-right {
      right: 0;
      background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }

  .tt-property-listing-section .tt-top-filters .filters-list {
      display: flex;
      gap: 10px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--primary) transparent;
      padding: 5px 0px;
  }


  /* Chrome, Edge, Safari */
  .tt-property-listing-section .tt-top-filters .filters-list::-webkit-scrollbar {
      height: 4px;
  }

  .tt-property-listing-section .tt-top-filters .filters-list::-webkit-scrollbar-track {
      background: transparent;
  }

  .tt-property-listing-section .tt-top-filters .filters-list::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 20px;
  }

  .tt-property-listing-section .tt-top-filters select,
  .tt-property-listing-section .tt-top-filters button {
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 30px;
      padding: 10px 16px;
      font-size: 14px;
      outline: none;
      cursor: pointer;
  }

  .tt-property-listing-section .tt-top-filters .filter-btn {
      display: none;
      font-size: 12px;
      min-width: 50px;
      background-color: var(--primary);
      color: white;
      margin-right: 5px;
  }

  /* Active Filters Display */
  .tt-active-filters,
  .tt-property-listing-section .tt-active-filters {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e2e8f0;
  }

  .tt-active-filters-inner {
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
      align-items: center;
      overflow-x: auto;
      max-width: 100%;
      padding-bottom: 6px;
      scrollbar-width: none;
      scrollbar-color: transparent;
  }

  /* Chrome, Edge, Safari */
  .tt-active-filters-inner::-webkit-scrollbar {
      height: 4px;
  }

  .tt-active-filters-inner::-webkit-scrollbar-track {
      background: transparent;
  }

  .tt-active-filters-inner::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 20px;
  }

  .tt-active-filters-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
  }

  .tt-filter-chip-display {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f5f8ff;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--primary);
      line-height: 1.4;
      white-space: nowrap;
      flex-shrink: 0;
  }

  .tt-filter-chip-remove {
      background: transparent;
      border: none;
      color: #0c4a6e;
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      display: flex;
      align-items: center;
      line-height: 1;
      transition: opacity 0.15s ease;
  }

  .tt-filter-chip-remove:hover {
      opacity: 0.7;
  }

  .tt-clear-active-filters {
      background: #fff;
      border: none;
      color: #0ea5e9;
      cursor: pointer;
      font-size: 12px;
      text-decoration: underline;
      padding: 0 0 0 8px;
      white-space: nowrap;
      transition: color 0.15s ease;
      flex-shrink: 0;
      margin-left: auto;
      position: sticky;
      right: 0;
      z-index: 2;
  }

  .tt-clear-active-filters:hover {
      color: #0284c7;
  }

  .tt-property-listing-section .col-md-3,
  .tt-property-listing-section .col-md-9 {
      padding: 0px;
  }

  .tt-property-listing-section .col-md-3 {
      padding-right: 15px;
  }

  .tt-property-listing-section .property-card-grid {
      display: none;
  }

  .tt-property-listing-section .property-cards-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
  }


  @media (max-width: 1260px) {
      .tt-property-listing-section .property-cards-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
      }

      .tt-property-listing-section .tt-filter-sidebar {
          padding: 12px;
      }
  }

  @media (max-width:991px) {
      .padding-main.tt-property-listing-section {
          padding: 12px 0;
      }

      .tt-property-listing-section .tt-listing-topbar {
          margin-bottom: 10px;
      }

      .tt-property-listing-section .tt-listing-topbar p {
          margin-bottom: 10px;
      }

      .tt-property-listing-section .col-md-3 {
          display: none;
      }

      .tt-property-listing-section .tt-top-filters .filter-btn {
          display: block;
      }

      .tt-property-listing-section .tt-top-filters .filters-list {
          gap: 5px;
          scrollbar-width: none;
      }

      .tt-property-listing-section .tt-top-filters select,
      .tt-property-listing-section .tt-top-filters button {
          width: max-content;
          padding: 6px;
          max-width: 150px;
          font-size: 12px;
      }
  }

  @media (max-width:768px) {

      .filters-list .filter-ownership-status,
      .filters-list .filter-construction-status,
      .filters-list .filter-furnishing-type {
          display: none !important;
      }

      .tt-property-listing-section .property-cards-list {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
      }

      .tt-property-listing-section .tt-listing-topbar {
          margin-bottom: 12px;
      }

      .tt-property-listing-section .tt-listing-topbar p {
          order: 2;
      }

      .tt-property-listing-section .tt-top-filters {
          order: 1;
      }
      .tt-filter-chip-display{
        font-size: 10px;
        padding: 3px 8px;
      }

  }

  @media(max-width: 468px) {
      .tt-property-listing-section .property-cards-list {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
      }
  }


  /* =============================== */
  /*         PROPERTY CARD           */
  /* =============================== */



  .tt-property-listing-section .tt-listing-card {
      background: #fff;
      border-radius: 14px;
      display: flex;
      /* align-items: center; */
      gap: 15px;
      padding: 10px;
      border: 1px solid #eee;
      min-width: 0;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image {
      width: 260px;
      min-width: 260px;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 6 / 3.7;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper-slide {
      height: 100%;
      position: relative;
  }

  .tt-property-listing-section .tt-listing-card .swiper-pagination {
      margin-top: -10px;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper {
      width: 100%;
      height: 100%;
  }

  .tt-property-listing-section .tt-listing-card .tt-image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%);
      z-index: 1;
      pointer-events: none;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper-button-prev,
  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper-button-next {
      color: #fff;
      transform: scale(0.6);
      opacity: 0;
      transition: 0.3s;
      z-index: 3;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image:hover .swiper-button-prev,
  .tt-property-listing-section .tt-listing-card .tt-listing-image:hover .swiper-button-next {
      opacity: 1;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper-pagination-bullet {
      background: #fff;
      opacity: 0.6;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .swiper-pagination-bullet-active {
      opacity: 1;
      background: var(--primary);
  }



  .tt-property-listing-section .tt-listing-card .tt-price-tag {
      display: none;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0px;
  }

  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-price {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 0px;
      color: var(--primary);
  }

  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 0px;
  }

  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-type,
  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-category {
      font-size: 12px;
      padding: 3px 6px;
      border-radius: 4px;
  }

  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-type {
      background: #f2f5fc;
      color: var(--primary);
  }

  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-category {
      background: #2d50a325;
      color: var(--primary);
  }

  /* Category display - show short name on mobile, full name on desktop */
  .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-category-display {
      display: inline;
  }

  @media (min-width: 769px) {
      /* On desktop, show the title (full name) via tooltip */
      .tt-property-listing-section .tt-listing-card .tt-price-tag .tt-category {
          cursor: help;
      }
  }

  @media (max-width: 768px) {
      /* On mobile/tablet, keep short name visible - no changes needed as JSX handles this */
  }

  .tt-property-listing-section .tt-listing-card .tt-badges {
      position: absolute;
      top: 7px;
      left: 7px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .tt-property-listing-section .tt-listing-card .tt-badges span {
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .tt-property-listing-section .tt-listing-card .tt-premium-badge {
      background: #DEAE00;
      color: #fff;
  }

  .tt-property-listing-section .tt-listing-card .tt-verified-badge {
      background: white;
      color: green;
      display: none;
  }

  .tt-property-listing-section .tt-listing-card .tt-image-actions {
      position: absolute;
      top: 7px;
      right: 7px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      z-index: 2;
  }

  .tt-property-listing-section .tt-listing-card .tt-image-actions span {
      width: 35px;
      height: 35px;
      background: rgba(0, 0, 0, 0.178);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      backdrop-filter: blur(5px);
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-content {
      flex: 1;
      padding: 8px 0px;
  }

  .tt-property-listing-section .tt-listing-card .tt-property-meta {
      display: flex;
      gap: 20px;
      margin-bottom: 2px;
      font-size: 13px;
  }

  .tt-property-listing-section .tt-listing-card .tt-property-top-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .tt-property-listing-section .tt-listing-card .tt-property-top-section .tt-date-posted {
      font-size: 12px;
      font-weight: 500;
      color: #777;
  }



  .tt-property-listing-section .tt-listing-card .tt-property-meta .id {
      color: var(--primary);
      font-weight: 600;
  }

  .tt-property-listing-section .tt-listing-card .tt-property-meta .verified {
      color: green;
      font-weight: 500;
      letter-spacing: .3px;
      text-transform: uppercase;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-content h3 {
      font-size: 16px;
      margin-bottom: 0px;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .tt-property-listing-section .tt-property-title-text {
      font-size: 15px;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .tt-property-listing-section .tt-listing-card .tt-location {
      color: #777;
      margin-bottom: 5px;
      font-size: 14px;
      margin-top: 20px;
  }

  .tt-property-listing-section .tt-listing-card .tt-description {
      color: #1a1a1a;
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 14px;
      line-height: 1.4;
  }

  .tt-description-mobile {
      color: #1a1a1a;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      font-size: 13px;
      line-height: 1.4;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .tt-property-features {
      display: none;
      gap: 10px;
      padding: 7px 10px;
      background-color: #fff;
      border-radius: 5px;
      width: max-content;
      position: absolute;
      bottom: 8px;
      left: 8px;
      z-index: 2;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .tt-property-features i {
      color: var(--primary);
      margin-right: 3px;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-image .tt-property-features span {
      font-size: 11px;
      color: #666666;
  }


  .tt-property-listing-section .tt-listing-card .tt-listing-image .tt-property-features {
      gap: 20px;
      flex-wrap: wrap;
      padding: 5px 10px;
      border-radius: 5px;
      width: max-content;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-content .tt-property-features {
      gap: 10px;
      padding: 5px 10px;
      /* background-color: #EAEEF6; */
      background-color: #fff;
      border: 1px solid #cdd4e3;
      border-radius: 5px;
      width: max-content;
      display: flex;
      gap: 20px;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-content .tt-property-features i {
      color: var(--primary);
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-content .tt-property-features span {
      font-size: 13px;
      color: #000;
      display: flex;
      gap: 5px;
      align-items: center;
  }

  .tt-property-features span:has(+ span) {
      border-right: 1px solid #cdd4e3;
      padding-right: 15px;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-price {
      width: 200px;
      min-width: 200px;
      border-left: 1px solid #eee;
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-price .tt-price-compact {
      font-size: 20px;
      font-weight: 600;
      color: var(--primary);
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-price .tt-timeline {
      display: none;
      font-size: 12px;
      color: #666;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-price h2 {
      font-size: 20px;
      margin-bottom: 5px;
      font-weight: 600;
  }

  .tt-property-listing-section .tt-listing-card .tt-listing-price p {
      color: #777;
      margin-bottom: 10px;
  }

  .tt-property-listing-section .tt-listing-card .tt-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
  }

  .tt-property-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: end;
  }

  .tt-property-actions .agent-contact-info {
      color: #000;
      font-size: 14px;

  }

  .tt-property-actions .agent-contact-info .phone {
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .tt-property-actions .agent-contact-info .phone svg {
      width: 15px;
      height: 15px;
      color: #43a047;
  }

  .tt-property-listing-section .tt-listing-card .tt-btn-primary,
  .tt-property-listing-section .tt-listing-card .tt-btn-whatsapp,
  .tt-property-listing-section .tt-listing-card .tt-btn-outline {
      width: 100%;
      border-radius: 5px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px;
      margin-bottom: 0;
      font-size: 13px;
  }

  .tt-property-listing-section .tt-listing-card .tt-btn-primary {
      background: var(--primary);
      color: #fff;
  }

  .tt-property-listing-section .tt-listing-card .tt-btn-whatsapp {
      border: 1px solid #49a72c;
      color: #49a72c;
      background: #fff;
  }

  .tt-property-listing-section .tt-listing-card .tt-btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
      background: #fff;
  }

  .tt-property-listing-section .property-ads {
      padding: 20px;
      margin-top: 30px;
      background: var(--primary);
      color: white;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
  }

  .tt-property-listing-section .property-ads h3 {
      font-size: 16px !important;
      font-weight: 500;
      margin-bottom: 10px;
  }

  .tt-property-listing-section .property-ads p {
      font-size: 12px;
      color: #fff;
      flex-wrap: nowrap;
      margin-bottom: 10px;
  }

  .tt-property-listing-section .property-ads button {
      padding: 8px 10px;
      border-radius: 50px;
      background-color: var(--secondary);
      color: #000;
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 10px;
  }

  .faq-property-list {
      margin-top: 20px;
      margin-bottom: 40px;
  }

  .faq-property-list .tt-faq-item p {
      padding: 15px;
      color: #777;
      font-size: 14px;
  }

  .tt-faq-list svg {
      font-size: 20px;
  }

  .faq-property-list h3 {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      font-weight: 500;
  }

  .faq-property-list .tt-builder-faq-sec {
      width: 1400px;
  }

  .post-property-free-property-list {
      padding: 10px;
      border-radius: 5px;
      background: #FFC90721;
      display: flex;
      justify-content: space-between;
      margin: 10px 0 20px 0;
  }

  .post-property-free-property-list h4 {
      font-size: 12px;
      font-weight: 500;
  }

  .post-property-free-property-list p {
      font-size: 8px;
      color: #777;
  }

  .post-property-free-property-list button {
      padding: 8px 10px;
      font-size: 10px;
      display: flex;
      gap: 4px;
      align-items: center;
      border-radius: 50px;
      background-color: var(--secondary);
  }

  .post-property-free-property-list a {
      color: blue;
  }

  .tt-discover-places h3 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 20px;
  }

  .tt-discover-places ul li {
      font-size: 12px;
      padding: 5px;
  }

  .tt-discover-places ul {
      list-style-type: disc;
      padding-left: 20px;
  }

  .tt-discover-places ul li {
      display: list-item;
  }

  .tt-discover-places i {
      font-size: 5px;
      padding-right: 8px;
  }

  .tt-property-listing-section .property-ads,
  .post-property-free-property-list

  /* .faq-property-list, 
    .post-property-free-property-list, 
    .tt-discover-places */
      {
      display: none;
  }

  .filter-sidebar-inner .filter-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }


  @media (max-width: 1260px) {
      .tt-property-listing-section .tt-listing-card {
          flex-direction: column;
          gap: 0px;
      }

      .tt-property-listing-section .tt-listing-card .tt-price-tag {
          display: flex;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-content h3 {
          font-size: 14px;
          font-weight: 500;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-content .tt-property-features {
          display: none;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-image .tt-property-features {
          display: flex;
      }

      .tt-property-listing-section .tt-listing-card .tt-verified-badge {
          display: block;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-image {
          width: 100%;
          min-width: 0;
      }

      .tt-property-listing-section .tt-listing-card .tt-property-meta {
          display: none;
      }

      .tt-property-listing-section .tt-listing-card .tt-description {
          color: #000;
          font-size: 12px;
          line-height: 18px;
          -webkit-line-clamp: 1;
      }

      .tt-property-listing-section .tt-listing-card .tt-location {
          font-size: 12px;
          line-height: 20px;
      }

      .tt-property-title-text {
          font-size: 14px;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-price .tt-timeline {
          display: block;
      }

      .tt-property-listing-section .tt-listing-card .tt-actions {
          gap: 5px;
          flex-direction: row;
          width: auto;
      }

      .tt-property-listing-section .tt-listing-card .tt-btn-outline span {
          display: none;
      }

      .tt-property-listing-section .tt-listing-card .tt-btn-primary {
          background-color: #E6EAF4;
          color: var(--primary);
          height: 38px;
          width: auto;
          border-radius: 30px;
          padding: 8px 22px;
      }

      .tt-property-listing-section .tt-listing-card .tt-btn-outline {
          width: 38px;
          min-width: 38px;
          height: 38px;
          background-color: var(--primary);
          color: white;
          border-radius: 30px;
      }

      .tt-property-listing-section .tt-listing-card .tt-btn-whatsapp {
          width: 40px;
          min-width: 40px;
          height: 40px;
          background-color: green;
          color: white;
          border-radius: 30px;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-price {
          width: 100%;
          padding-left: 0px;
          border: none;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          border-top: 1px solid #eee;
          padding-top: 10px;
      }

      .tt-property-listing-section .tt-listing-card .tt-btn-primary,
      .tt-property-listing-section .tt-listing-card .tt-btn-whatsapp,
      .tt-property-listing-section .tt-listing-card .tt-btn-outline {
          margin-bottom: 0px;
      }

      .tt-property-listing-section .tt-listing-card .tt-listing-price h2,
      .tt-property-listing-section .tt-listing-card .tt-listing-price p {
          display: none;
      }

      .faq-property-list .tt-builder-faq-sec {
          width: 760px;
          margin-bottom: 10px;
      }
  }

  @media (max-width: 767px) {

      .tt-property-listing-section .property-ads,
      .faq-property-list,
      .post-property-free-property-list,
      .tt-discover-places {
          display: block;
      }

      .post-property-free-property-list {
          display: flex;
      }

      .tt-property-listing-section .tt-faq-page {
          min-height: auto;
      }

      .faq-property-list .tt-builder-faq-sec {
          width: 100%;
      }

      .tt-discover-places ul {
          padding-left: 5px;
      }

      .tt-discover-places ul li i {
          display: none;
      }

      .tt-discover-places .col-md-4 {
          padding: 0px 5px !important;
      }

      .tt-links-section ul {
          column-count: 2;
          column-gap: 14px;
      }

      .tt-links-section ul li {
          break-inside: avoid;
      }

      .tt-discover-places h3 {
          margin: 10px 15px;
      }

      .tt-builder-faq-sec .tt-faq-number {
          background: #fff !important;
          color: #000 !important;
      }

      .post-property-free-property-list h4 {
          font-size: 11px;
      }

      .tt-property-listing-section .tt-listing-card .tt-description {
          display: none !important;
      }
  }

  @media(max-width: 768px) {
      .tt-property-listing-section .property-ads {
          margin-top: 10px;
      }

  }



  /* ============================ */
  /*         PAGINATION           */
  /* ============================ */

  .tt-pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
  }

  .tt-pagination ul {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .tt-pagination ul li a,
  .tt-pagination ul li button,
  .tt-pagination ul li span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #ddd;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      transition: 0.3s;
  }

  .tt-pagination ul li a:hover,
  .tt-pagination ul li button:hover,
  .tt-pagination ul li a.active,
  .tt-pagination ul li button.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
  }

  .tt-pagination ul li span {
      border: none;
      background: transparent;
  }

  @media (max-width: 767px) {
      .tt-pagination {
          margin-top: 15px;
      }

      .tt-pagination ul {
          gap: 5px;
      }

      .tt-pagination ul li a,
      .tt-pagination ul li span {
          width: 25px;
          height: 25px;
          font-size: 10px;
      }

      .tt-pagination ul li i {
          width: 0;
      }

      .tt-pagination ul li button {
          padding: 4px 10px !important;
          font-size: 10px;
      }

      .tt-pagination p {
          font-size: 12px !important;
      }

  }


  /* ============================================ */
  /*         PROPERTY FILTER BOTTOM BAR           */
  /* ============================================ */

  .tt-mobile-bottom-bar {
      position: fixed;
      bottom: 10px;
      left: 8px;
      right: 8px;
      border-radius: 10px;
      background: var(--primary);
      display: none;
      align-items: center;
      justify-content: space-around;
      padding: 11px 5px calc(10px + env(safe-area-inset-bottom));
      z-index: 9999;
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
  }

  .tt-mobile-bottom-bar .tt-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #fff;
      text-decoration: none;
      font-size: 11px;
      min-width: 60px;
      transition: 0.3s;
  }

  .tt-mobile-bottom-bar .tt-nav-item i {
      font-size: 18px;
  }

  .tt-mobile-bottom-bar .tt-nav-item.active i,
  .tt-mobile-bottom-bar .tt-nav-item.active span {
      color: #ffc107;
  }

  .tt-mobile-bottom-bar .tt-nav-item:hover {
      transform: translateY(-2px);
  }

  @media (max-width: 768px) {
      .tt-mobile-bottom-bar {
          display: flex;
      }


  }



  /* =============================== */
  /*         ENQUIRY MODAL           */
  /* =============================== */


  .enquiry-modal-content {
      max-width: 950px;
      padding: 0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 40px);
      overflow: hidden;
  }

  .enquiry-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 28px 20px;
      border-bottom: 1px solid #e5e7eb;
      flex-shrink: 0;
      background: #fff;
  }

  .enquiry-modal-title {
      margin: 0;
      font-size: 22px;
      font-weight: 700;
      color: #111827;
  }

  .enquiry-modal-close {
      position: relative;
      background: #f3f4f6;
      border: none;
      font-size: 18px;
      color: #6b7280;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      padding: 0;
  }

  .enquiry-modal-close:hover {
      background: #e5e7eb;
      color: #111827;
  }

  /* Modal Body & Footer Structure */
  .enquiry-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px 28px;
      background: #fff;
  }

  .enquiry-modal-footer {
      flex-shrink: 0;
      padding: 16px 28px 24px;
      background: #fff;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
  }

  .enquiry-modal-summary-box {
      background-color: #f8fafb;
      padding: 16px 20px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      gap: 20px;
      flex-wrap: wrap;
      border: 1px solid #e5e7eb;
  }

  .enquiry-modal-agent-info {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
  }

  .enquiry-modal-agent-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .enquiry-modal-agent-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .enquiry-modal-content-sample {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
  }

  .enquiry-modal-agent-label {
      font-size: 12px;
      color: #6b7280;
      display: block;
      font-weight: 500;
  }

  .enquiry-modal-agent-name {
      font-size: 15px;
      color: #111827;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
  }

  .enquiry-modal-agent-name .fa-circle-check {
      color: #22c55e;
      font-size: 13px;
  }

  .enquiry-modal-property-price {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: right;
      flex: 1;
      min-width: 200px;
  }

  .enquiry-modal-price-value {
      display: block;
      font-size: 16px;
      color: #111827;
      font-weight: 700;
  }

  .enquiry-modal-property-desc {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
  }

  .enquiry-modal-section-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 20px;
      color: #111827;
  }

  /* Enquiry Limit Badge */
  .tt-enquiry-limit-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #dbeafe;
      border: 1px solid #bfdbfe;
      color: #1e40af;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 13px;
      margin-bottom: 20px;
      font-weight: 500;
  }

  .tt-enquiry-limit-badge i {
      font-size: 14px;
      flex-shrink: 0;
  }

  .tt-enquiry-limit-badge--warn {
      background: #fef2f2;
      border-color: #fee2e2;
      color: #991b1b;
  }

  .tt-enquiry-limit-badge--warn i {
      color: #dc2626;
  }

  .enquiry-modal-row-group {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
  }

  /* Form Column Layout */
  .enquiry-modal-form {
      margin: 0;
  }

  .enquiry-form-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
  }

  .enquiry-form-column-left,
  .enquiry-form-column-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .enquiry-modal-radio-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 24px;
  }

  .enquiry-modal-radio-group-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .enquiry-modal-checkbox-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 24px;
  }

  .enquiry-modal-radio-label {
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: #374151;
      cursor: pointer;
      font-weight: 500;
      user-select: none;
  }

  .enquiry-modal-radio-label:hover {
      color: #111827;
  }

  .enquiry-modal-radio-input {
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
      flex-shrink: 0;
      cursor: pointer;
  }

  .enquiry-modal-input-group {
      margin-bottom: 0;
  }

  .enquiry-modal-input-group-large {
      margin-bottom: 0;
  }

  .enquiry-modal-input-label {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      display: block;
      margin-bottom: 8px;
  }

  .enquiry-modal-input-label-inline {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      display: block;
      margin-bottom: 12px;
  }

  .enquiry-modal-input-label-block {
      display: block;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #111827;
  }

  .enquiry-modal-input {
      background-color: #f9fafb;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 14px;
      width: 100%;
      transition: all 0.2s ease;
      box-sizing: border-box;
  }

  .enquiry-modal-input:focus {
      outline: none;
      border-color: var(--primary);
      background-color: #fff;
      box-shadow: 0 0 0 3px rgba(45, 78, 162, 0.1);
  }

  .enquiry-modal-input::placeholder {
      color: #9ca3af;
  }

  .enquiry-modal-checkbox-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 0;
  }

  .enquiry-modal-checkbox-label {
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      user-select: none;
  }

  .enquiry-modal-checkbox-label:hover {
      color: #111827;
  }

  .enquiry-modal-checkbox-input {
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
      border-radius: 4px;
      flex-shrink: 0;
      cursor: pointer;
  }

  .enquiry-modal-submit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background-color: var(--primary);
      border-color: var(--primary);
      color: #fff;
      padding: 12px 24px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      white-space: nowrap;
  }

  .enquiry-modal-submit-btn:hover:not(:disabled) {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(45, 78, 162, 0.3);
  }

  .enquiry-modal-submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  .enquiry-modal-submit-btn-full {
      width: 100%;
      padding: 12px 24px;
  }

  /* Error, Success, Limit States */
  .tt-enquiry-error {
      font-size: 13px;
      color: #dc2626;
      margin: 0;
      padding: 10px 12px;
      background: #fef2f2;
      border: 1px solid #fee2e2;
      border-radius: 6px;
  }

  .tt-enquiry-limit,
  .tt-enquiry-success {
      text-align: center;
      padding: 32px 20px;
  }

  .tt-enquiry-limit i,
  .tt-enquiry-success i {
      font-size: 56px;
      display: block;
      margin-bottom: 16px;
  }

  .tt-enquiry-limit i {
      color: #f59e0b;
  }

  .tt-enquiry-success i {
      color: #22c55e;
  }

  .tt-enquiry-limit h4,
  .tt-enquiry-success h4 {
      font-size: 20px;
      margin: 0 0 12px;
      font-weight: 700;
      color: #111827;
  }

  .tt-enquiry-limit p,
  .tt-enquiry-success p {
      color: #6b7280;
      margin: 0 0 12px;
      font-size: 14px;
      line-height: 1.6;
  }

  .tt-enquiry-remaining {
      font-size: 13px;
      color: #374151;
      margin-top: 12px !important;
  }

  .tt-enquiry-remaining--warn {
      color: #d97706;
  }

  .tt-enquiry-remaining--warn a {
      color: #d97706;
      text-decoration: underline;
      cursor: pointer;
  }

  .tt-enquiry-checking {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
  }

  .tt-page-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f4f6;
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }






  /* ============================================ */
  /*         PROPERTY DETAILS TOP SECTION         */
  /* ============================================ */


  .tt-property-details-title {
      position: sticky;
      top: 0;
      z-index: 999;
      width: 100%;
      padding: 10px 0 15px;
      background: #fff;
      /* box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08); */
  }

  .tt-property-details-title .tt-property-details-card {
      background: #fff;
      border: 1px solid #e7e7e7;
      border-radius: 12px;
      padding: 15px 5px;
  }

  .tt-property-details-title .tt-property-details-card .tt-property-meta {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
  }

  .tt-property-details-title .tt-property-details-card .tt-property-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
  }

  .tt-property-details-title .tt-property-details-card .tt-property-id {
      color: var(--primary);
  }

  .tt-property-details-title .tt-property-details-card .tt-property-premium {
      color: #f4b400;
  }

  .tt-property-details-title .tt-property-details-card .tt-property-verified {
      color: #43a047;
  }

  .tt-property-details-title .tt-property-details-card .tt-proprty-title-content {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: left;
      padding: 10px 0px 5px;
      border-top: 1px solid #e9e9e9;
      margin: 10px 0px 0px;
  }

  .tt-property-details-title .tt-left-side h1 {
      font-size: 20px;
      line-height: 1.4;
      margin-bottom: 5px;
      font-weight: 500;
  }


  .tt-property-details-title .tt-left-side .tt-location {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #777;
      font-size: 14px;
      margin: 0;
  }


  .tt-property-details-title .tt-price-content {
      display: flex;
      gap: 8px;
      flex-direction: column;
      flex-direction: column-reverse;
      padding-right: 25px;
      margin-right: 25px;
      border-right: 1px #e7e7e7 solid;

  }

  .tt-property-details-title .tt-price-content span {
      color: #777;
      display: block;
      margin-bottom: 0px;
      font-size: 14px;
  }

  .tt-property-details-title .tt-price-content h2 {
      font-size: 26px;
      color: var(--primary);
      margin: 0;
      font-weight: 600;
      line-height: 32px;
      white-space: nowrap;
  }

  .tt-property-details-title .tt-seller-card {
      background: #f7f8fc;
      border-radius: 14px;
      padding: 10px;
      width: auto;
      max-width: 100%;
  }

  .tt-property-details-title .tt-seller-card .tt-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
  }

  .tt-property-details-title .tt-seller-card .tt-user {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .tt-property-details-title .tt-seller-card .tt-user span {
      font-size: 11px;
      color: #777;
  }

  .tt-property-details-title .tt-seller-card .tt-user h4 {
      font-size: 14px;
      margin: 0;
      display: flex;
      align-items: center;
      white-space: normal;
      gap: 6px;
      word-break: break-word;
  }

  .tt-property-details-title .tt-seller-card .tt-user h4 i {
      color: #43a047;
      font-size: 14px;
  }

  .tt-property-details-title .tt-seller-card .tt-actions {
      display: flex;
      gap: 8px;
  }

  .tt-property-details-title .tt-seller-card .tt-actions button svg {
      width: 32px;
      height: 32px;
      border: 0;
      padding: 9px;
      border-radius: 8px;
      background: #12b5cb;
      color: #fff;
  }

  .tt-property-details-title .tt-seller-card .tt-actions button.wishlist svg {
      background: #ff1744;
  }

  .tt-property-details-title .tt-contact-btn {
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #fff;
      text-decoration: none;
      font-weight: 400;
      padding: 10px;
      font-size: 14px;
  }

  /* Avatar container for both agent and builder */
  .tt-property-details-title .tt-seller-card .tt-user .tt-user-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  /* Agent avatar - circular */
  .tt-property-details-title .tt-seller-card .tt-user .tt-user-avatar.tt-agent-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
  }

  .tt-property-details-title .tt-seller-card .tt-user .tt-user-avatar.tt-agent-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
  }

  /* Builder logo - square/rectangular */
  .tt-property-details-title .tt-seller-card .tt-user .tt-user-avatar.tt-builder-logo {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      padding: 4px;
      background: #fff;
      overflow: hidden;
  }

  .tt-property-details-title .tt-seller-card .tt-user .tt-user-avatar.tt-builder-logo img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      object-fit: contain;
  }

  .tt-property-image-section .tt-property-title .tt-property-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 5px 0px;
      margin-bottom: 5px;
      border-bottom: 1px #E9E9E9 solid;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-property-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-property-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-property-id {
      color: var(--primary);
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-property-premium {
      color: #f4b400;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-property-verified {
      color: #43a047;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-actions {
      display: flex;
      gap: 8px;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-actions button svg {
      width: 30px;
      height: 30px;
      border: 0;
      padding: 8px;
      border-radius: 8px;
      background: #12b5cb;
      color: #fff;
  }

  .tt-property-image-section .tt-property-title .tt-property-top .tt-actions button.wishlist svg {
      background: #ff1744;
  }

  .tt-property-image-section .tt-property-title .tt-proprty-title-content h1 {
      font-size: 14px;
      font-weight: 500;
  }

  .tt-property-image-section .tt-property-title .tt-proprty-title-content p {
      color: #777;
      display: block;
      margin-bottom: 0px;
      font-size: 12px;
      display: flex;
      gap: 5px;
      align-items: center;
  }

  .tt-property-image-section .tt-property-title .tt-proprty-title-content .tt-price-content,
  .tt-property-image-section .tt-property-title .tt-price-content {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
  }

  .tt-property-image-section .tt-property-title .tt-proprty-title-content .tt-price-content h2,
  .tt-property-image-section .tt-property-title .tt-price-content h2 {
      color: var(--primary);
      font-size: 20px;
      font-weight: 600;
  }

  .tt-property-image-section .tt-property-title .tt-proprty-title-content .tt-price-content span,
  .tt-property-image-section .tt-property-title .tt-price-content span {
      color: #777;
      display: block;
      margin-bottom: 0px;
      font-size: 12px;
  }

  @media (max-width:1300px) {
      .tt-property-details-title .tt-seller-card {
          min-width: auto;
      }

      .tt-property-details-title .tt-property-details-card {
          padding: 5px 0px;
      }

      .tt-property-details-title .tt-seller-card .tt-user img {
          display: none;
      }

      .tt-property-details-title .tt-price-content {
          padding-right: 5px;
          margin-right: 5px;
          gap: 3px;
      }

      .tt-property-details-title .tt-left-side h1 {
          font-size: 14px;
      }

      .tt-property-details-title .tt-seller-card .tt-top {
          margin-bottom: 4px;
      }

      .tt-property-details-title .tt-price-content span {
          font-size: 10px;
      }

      .tt-property-details-title .tt-price-content h2 {
          font-size: 18px;
          white-space: nowrap;
      }

      .tt-property-details-title .tt-left-side .tt-location {
          font-size: 11px;
      }

      .tt-property-details-title .tt-seller-card .tt-user h4 {
          font-size: 13px;
      }

      .tt-property-details-title .tt-contact-btn {
          font-size: 12px;
          padding: 8px;
      }

      .tt-property-details-title .tt-property-details-card .tt-proprty-title-content {
          padding: 5px 0px 5px;
          margin: 5px 0px 0px;
      }

      .tt-property-details-title .tt-property-details-card .tt-property-meta span {
          font-size: 12px;
      }

      .tt-property-details-title .tt-property-details-card .tt-property-meta {
          gap: 10px;
      }

      .tt-property-details-title .tt-seller-card {
          padding: 5px;
      }

      .tt-property-details-title .tt-left-side h1 {
          margin-bottom: 0px;
      }
  }

  @media (max-width: 991px) {

      .tt-property-details-title .tt-left-side h1 {
          font-size: 15px;
      }

      .tt-property-details-title .tt-right-side {
          flex-direction: column;
      }

      .tt-property-details-title .tt-seller-card {
          min-width: 100%;
      }
  }

  @media (max-width: 768px) {
      .tt-property-details-title {
          display: none;
      }

      .tt-property-image-section .tt-property-overview {
          margin-top: 0px;
      }

      .tt-property-image-section .tt-property-title .tt-property-top .tt-property-meta svg {
          font-size: 14px;
      }

      .tt-property-image-section .tt-property-title .tt-property-top .tt-actions {
          gap: 5px;
      }

      .tt-property-image-section .tt-property-title .tt-property-top .tt-actions button svg {
          width: 28px;
          height: 28px;
      }

      .tt-property-image-section .tt-property-title .tt-proprty-title-content p {
          font-size: 11px;
          line-height: 1.2;
          margin-bottom: 5px;
          margin-top: 5px;
      }
  }

  /* PROPERTY DETAILS IMAGE SECTION */

  .tt-property-image-section {
      margin-bottom: 15px;
  }

  .tt-property-image-section .tt-property-image-card {
      border: 1px solid #e7e7e7;
      border-radius: 12px;
      padding: 16px 6px;
      background: #fff;
  }

  .tt-property-image-section .tt-gallery-wrapper {
      display: flex;
      gap: 15px;
      /* min-height: 400px; */
  }

  .tt-property-image-section .tt-thumb-wrapper {
      width: 110px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;

  }

  .tt-property-image-section .tt-gallery-thumbs {
      width: 100%;
      /* fills tt-thumb-wrapper which is aligned stretch */
      /* display: flex;
      flex-direction: column; */
      height: 360px;
  }


  .tt-property-image-section .tt-gallery-thumbs .tt-thumb {
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: 0.3s;
      opacity: 0.6;
      height: 90px;
      margin-bottom: 8px;
  }

  .tt-property-image-section .tt-gallery-thumbs .tt-thumb:last-child {
      margin-bottom: 0;
  }

  .tt-property-image-section .tt-gallery-thumbs .tt-thumb.swiper-slide-thumb-active {
      border-color: var(--primary);
      opacity: 1;
  }

  .tt-property-image-section .tt-gallery-thumbs .tt-thumb img {
      width: 100%;
      height: 78px;
      object-fit: cover;
  }

  .tt-property-image-section .tt-main-wrapper {
      flex: 1;
      width: calc(100% - 135px);
      position: relative;
      height: 100%;
  }

  .tt-property-image-section .tt-main-wrapper .swiper-button-next,
  .tt-property-image-section .tt-main-wrapper .swiper-button-prev {
      width: 38px;
      height: 38px;
      background-color: white;
      border-radius: 50%;
      padding: 11px;
  }

  .tt-property-image-section .tt-main-wrapper .swiper-button-next svg,
  .tt-property-image-section .tt-main-wrapper .swiper-button-prev svg {
      color: var(--primary);
  }

  .tt-property-image-section .tt-main-image {
      flex: 1;
      aspect-ratio: 6/3.4;
      position: relative;
      border-radius: 14px;
      overflow: hidden;
  }


  .tt-property-image-section .tt-main-image .swiper-button-prev .tt-property-image-section .tt-main-image .swiper-button-next {
      width: 30px;
      height: 30px;
      background-color: white;
      color: var(--primary);
  }

  .tt-property-image-section .tt-main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-property-image-section .tt-rera-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgb(255, 255, 255);
      padding: 0;
      border-radius: 8px;
      font-size: 11px;
      color: #000;
      z-index: 9;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .tt-property-image-section .tt-rera-badge span {
      padding: 4px 6px;
      font-size: 12px;
  }

  .tt-property-image-section .tt-rera-badge .rera-title {
      background: var(--primary);
      color: #fff;
      border-radius: 4px 0px 0px 4px;
  }

  .tt-property-image-section .tt-rera-badge .rera-content {
      background: white;
      color: #000;
      border-radius: 0px 4px 4px 0px;
  }

  .tt-property-image-section .tt-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      color: #222;
      font-size: 18px;
      z-index: 2;
  }

  .tt-property-image-section .tt-nav-btn.prev {
      left: 15px;
  }

  .tt-property-image-section .tt-nav-btn.next {
      right: 15px;
  }

  .tt-property-image-section .tt-property-overview {
      background: #F9FAFC;
      border-radius: 8px;
      padding: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      row-gap: 25px;
  }

  .tt-property-image-section .tt-overview-item {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .tt-property-image-section .tt-overview-item .tt-icon {
      width: 50px;
      height: 50px;
      background: #EAEBED;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 18px;
      flex-shrink: 0;
  }

  .tt-property-image-section .tt-overview-item span {
      display: block;
      font-size: 13px;
      color: #777;
      margin-bottom: 4px;
  }

  .tt-property-image-section .tt-overview-item h4 {
      font-size: 14px;
      margin: 0;
      color: #222;
      line-height: 1.4;
  }

  .tt-overview-more-wrapper {
      display: none;
  }

  @media (max-width: 1199px) {
      .tt-property-image-section .tt-property-overview {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 1200px) {
      .tt-property-image-section .tt-property-image-card {
          padding: 12px 4px;
      }

      .tt-property-image-section .tt-gallery-wrapper {
          gap: 12px;
      }

      .tt-property-image-section .tt-main-image {
          aspect-ratio: 6/2.8;
      }

      .tt-property-image-section .tt-overview-item .tt-icon {
          width: 44px;
          height: 44px;
          font-size: 16px;
      }

      .tt-property-image-section .tt-overview-item span {
          font-size: 11px;
      }

      .tt-property-image-section .tt-overview-item .tt-icon svg {
          font-size: 13px;
      }

      .tt-property-image-section .tt-overview-item h4 {
          font-size: 12px;
      }

      .tt-property-image-section .tt-property-overview {
          padding: 16px;
          gap: 8px;
          row-gap: 18px;
          grid-template-columns: repeat(2, 1fr);
      }

      .tt-property-image-section .tt-rera-badge span {
          padding: 3px 5px;
          font-size: 11px;
      }
  }

  @media (max-width: 1200px) {
      .tt-property-image-section .tt-property-image-card {
          padding: 10px 0;
      }

      .tt-property-image-section .tt-gallery-wrapper {
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
      }

      .tt-property-image-section .tt-thumb-wrapper {
          display: none;
      }

      .tt-property-image-section .tt-gallery-thumbs {
          width: 100% !important;
          height: 100% !important;
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          overflow-x: auto !important;
      }

      .tt-property-image-section .tt-gallery-thumbs .tt-thumb {
          height: 100% !important;
          min-width: 100px !important;
          flex: 0 0 auto !important;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          border: 2px solid transparent;
          transition: 0.3s;
          opacity: 0.6;
          margin-bottom: 0 !important;
          margin-right: 8px !important;
      }

      .tt-property-image-section .tt-gallery-thumbs .tt-thumb:last-child {
          margin-right: 0 !important;
      }

      .tt-property-image-section .tt-gallery-thumbs .tt-thumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .tt-property-image-section .tt-main-wrapper {
          width: 100%;
          flex: 1;
          order: 1;
          height: auto;
      }

      .tt-property-image-section .tt-main-image {
          aspect-ratio: 4/2.5;
      }

      .tt-property-image-section .tt-property-overview {
          grid-template-columns: repeat(2, 1fr);
          padding: 14px;
          gap: 7px;
          row-gap: 15px;
      }

      .tt-property-image-section .tt-overview-item {
          gap: 10px;
      }

      .tt-property-image-section .tt-overview-item .tt-icon {
          width: 40px;
          height: 40px;
          font-size: 15px;
      }

      .tt-property-image-section .tt-overview-item span {
          font-size: 10px;
          margin-bottom: 2px;
      }

      .tt-property-image-section .tt-overview-item h4 {
          font-size: 10px;
      }

      .tt-property-image-section .tt-rera-badge {
          top: 6px;
          right: 6px;
          font-size: 10px;
          gap: 4px;
      }

      .tt-property-image-section .tt-rera-badge span {
          padding: 3px 4px;
          font-size: 10px;
      }
  }

  @media (max-width: 768px) {
      .tt-property-image-section .tt-property-image-card {
          border-radius: 8px;
          padding: 0;
          border: none;
      }

      .tt-property-image-section .tt-gallery-wrapper {
          gap: 10px;
      }

      .tt-property-image-section .tt-thumb-wrapper {
          display: none;
      }

      .tt-property-image-section .tt-main-image {
          aspect-ratio: 6/3.4;
          border-radius: 10px;
      }

      .tt-property-image-section .tt-property-overview {
          grid-template-columns: repeat(2, 1fr);
          padding: 10px 0px;
          gap: 3px;
          row-gap: 14px;
          border-top: 1px #E9E9E9 solid;
          border-bottom: 1px #E9E9E9 solid;
          border-radius: 0px;
          background-color: transparent;
      }

      .tt-property-image-section .tt-overview-item {
          gap: 4px;
      }

      .tt-property-image-section .tt-overview-item .tt-icon {
          width: 20px;
          height: 22px;
          font-size: 8px;
      }

      .tt-property-image-section .tt-overview-item span {
          font-size: 10px;
      }

      .tt-property-image-section .tt-overview-item h4 {
          font-size: 10px;
      }

      .tt-property-image-section .tt-property-overview .tt-overview-item.tt-overview-item-collapse {
          display: none !important;
      }

      .tt-overview-more-wrapper {
          grid-column: 1 / -1;
          display: flex;
          justify-content: end;
          align-items: center;
          padding: 0px !important;
      }

      .tt-overview-more-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          color: var(--primary);
          font-size: 12px;
          font-weight: 400;
          cursor: pointer;
          border-radius: 20px;
          transition: all 0.2s ease;
      }

      .tt-property-image-section .tt-rera-badge {
          top: 4px;
          right: 4px;
          font-size: 9px;
      }

      .tt-property-image-section .tt-rera-badge span {
          padding: 2px 3px;
          font-size: 9px;
      }

      .tt-property-image-section .tt-nav-btn {
          width: 36px;
          height: 36px;
          font-size: 16px;
      }

      .tt-property-image-section .tt-nav-btn.prev {
          left: 10px;
      }

      .tt-property-image-section .tt-nav-btn.next {
          right: 10px;
      }
  }


  /* PROPERTY ADDIONAL DETAILS */



  .tt-property-details-section .row {
      align-items: flex-start;
  }

  .tt-property-details-section .col-md-4 {
      padding-left: 7px !important;
      position: sticky;
      top: 20px;
  }

  .tt-property-details-section .col-md-8 {
      padding-right: 7px !important;
  }

  .tt-property-details-section .tt-details-card {
      background: #fff;
      border-radius: 12px;
      margin-bottom: 15px;
      border: 1px solid #e7e7e7;
      border-radius: 6px;
  }

  .tt-property-details-section .download-brochure-section .tt-details-card {
      border: none;
  }

  .tt-property-details-section .tt-details-body,
  .tt-property-details-section .tt-details-head {
      padding: 8px;
  }


  .tt-property-details-section .tt-details-head {
      background-color: #f6f6f6b0;
      border-radius: 6px 6px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .tt-property-details-section .tt-details-head a {
      background-color: var(--primary);
      color: white;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 400;
      display: flex;
      gap: 6px;
      align-items: center;
  }

  .tt-property-details-section .tt-details-head h2 {
      font-size: 16px;
      margin: 0;
      color: #000;
      font-weight: 500;
      text-transform: capitalize;
  }

  .tt-property-details-section .tt-details-body p {
      color: #777;
      font-size: 15px;
      line-height: 1.5;

  }

  .tt-property-details-section .tt-details-body .tt-description ul li {
      margin-bottom: 8px;
      font-size: 13px;
      color: #777;
  }

  .tt-property-details-section .tt-details-body .tt-additional-details-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      row-gap: 18px;
  }


  .tt-property-details-section .tt-details-body .tt-additional-details-grid .tt-item span {
      font-size: 13px;
      color: #7D7D7D;
  }

  .tt-property-details-section .tt-details-body .tt-additional-details-grid .tt-item h3 {
      font-size: 14px;
      color: #000;
  }

  .tt-property-details-section .tt-details-body .tt-amenities ul {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
  }

  .tt-property-details-section .tt-details-body .tt-amenities ul li {
      font-size: 14px;
      color: #666666;
      display: flex;
      gap: 8px;
      align-items: center;
      border: 1px solid #e7e7e7;
      padding: 6px 10px;
      border-radius: 30px;
  }

  .tt-property-details-section .tt-details-body .tt-amenities ul li img {
      width: 18px;
      height: 18px;
      object-fit: cover;
  }

  .tt-amenities-grid {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .tt-amenities-grid .tt-amenity-item {
      font-size: 13px;
      color: #666666;
      display: flex;
      gap: 8px;
      align-items: center;
      border: 1px solid #e7e7e7;
      padding: 6px 10px;
      border-radius: 30px;
  }

  .tt-amenities-grid .tt-amenity-item svg {
      color: var(--primary);
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations {
      margin-top: 20px;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations h3 {
      font-size: 15px;
      color: #000;
      margin-bottom: 10px;
      font-weight: 500;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul li {
      position: relative;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f7f7f7;
      padding: 10px;
      border-radius: 6px;
      width: 100%;
      transition: background-color 0.2s, box-shadow 0.2s;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul li:hover {
      background-color: #f1f5f9;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-name {
      position: relative;
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 13px;
      min-width: 0;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-name svg {
      width: 18px;
      height: 18px;
      object-fit: cover;
      color: var(--primary);
      flex-shrink: 0;
  }

  .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-distance {
      background: var(--primary);
      color: #fff;
      padding: 5px 10px;
      font-size: 10px;
      white-space: nowrap;
      border-radius: 4px;
      flex-shrink: 0;
  }

  .tt-nearby-cat-name {
      background: transparent !important;
      color: #1e293b !important;
      font-weight: 500;
      font-size: 13px;
      padding: 0 !important;
      border-radius: 0 !important;
      /* white-space: nowrap; */
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .tt-nearby-cat-emoji {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent !important;
      padding: 0 !important;
      font-size: 18px;
      flex-shrink: 0;
  }


  /* 
  .tt-property-details-section .tt-floor-plans .tt-floor-plans-slider {
      padding: 0 10px;
  } */


  .tt-property-details-section .tt-floor-plans .tt-floor-plan-card {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #E8E8E8;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plan-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plan-header {
      padding: 12px 16px;
      background: #F6F6F6;
      border-bottom: 1px solid #E8E8E8;
  }

  .tt-property-details-section .tt-floor-plans .tt-bhk-badge {
      display: inline-block;
      background: linear-gradient(135deg, var(--primary), #2d4ea2);
      color: #fff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plan-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: #f9f9f9;
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plan-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plan-details {
      padding: 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-title {
      margin-bottom: 12px;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-title h3 {
      font-size: 15px;
      font-weight: 600;
      color: #000;
      margin: 0;
      line-height: 1.4;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-specs {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      padding: 10px 0;
      border-top: 1px solid #E8E8E8;
      border-bottom: 1px solid #E8E8E8;
  }

  .tt-property-details-section .tt-floor-plans .tt-spec-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #555;
  }

  .tt-property-details-section .tt-floor-plans .tt-spec-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: #EAEEF6;
      border-radius: 4px;
      color: var(--primary);
      font-size: 11px;
      flex-shrink: 0;
  }

  .tt-property-details-section .tt-floor-plans .tt-spec-value {
      font-weight: 500;
      color: #333;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-price {
      margin-bottom: 12px;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-price h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
      margin: 0;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
  }

  .tt-property-details-section .tt-floor-plans .tt-plan-actions a {
      flex: 1;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .tt-property-details-section .tt-floor-plans .btn-primary-outline {
      background: transparent;
      border: 1.5px solid var(--primary);
      color: var(--primary);
  }

  .tt-property-details-section .tt-floor-plans .btn-primary-outline:hover {
      background: var(--primary);
      color: #fff;
  }

  .tt-property-details-section .tt-floor-plans .btn-primary {
      background: var(--primary);
      color: #fff;
      border: 1px solid var(--primary);
  }

  .tt-property-details-section .tt-floor-plans .tt-floor-plans .btn-primary:hover {
      background: #1e3a78;
      border-color: #1e3a78;
  }

  .price-units {
      font-size: 12px;
      color: #555;
  }

  @media (max-width: 768px) {
      .tt-amenities-grid .tt-amenity-item {
          font-size: 10px;
          padding: 3px 5px;
      }

      .price-units span {
          display: block;
      }

      .price-units .separator {
          display: none !important;
      }

      .floor-plan-card {
          border-radius: 10px;
      }

      .tt-property-details-section .tt-floor-plans .tt-floor-plan-details {
          padding: 12px;
      }

      .tt-property-details-section .tt-floor-plans .tt-plan-title h3 {
          font-size: 14px;
      }

      .tt-property-details-section .tt-floor-plans .tt-plan-specs {
          gap: 8px;
          padding: 8px 0;
          margin-bottom: 10px;
      }

      .tt-property-details-section .tt-floor-plans .tt-plan-price h4 {
          font-size: 14px;
      }

      .tt-property-details-section .tt-floor-plans .tt-plan-actions a {
          padding: 8px 10px;
          font-size: 11px;
          gap: 4px;
      }

      .tt-property-details-section .tt-floor-plans .tt-spec-item {
          font-size: 11px;
      }

      .tt-property-details-section .tt-floor-plans .tt-spec-icon {
          width: 20px;
          height: 20px;
          font-size: 9px;
      }

      .tt-builder-floor-plans {
          margin-bottom: 10px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-distance {
          font-size: 8px;
      }

      .enquiry-modal-content-sample {
          display: flex;
          align-items: center;
          gap: 5px;
      }

      .enquiry-modal-property-price {
          text-align: start;
      }

      .enquiry-modal-summary-box {
          align-items: start;
      }

      .tt-nearby-cat-emoji {
          width: 25px;
          height: 25px;
      }

      .tt-location-hover-card {
          display: none !important;
      }
  }

  /* =============================== */
  /*         BUILDER FAQ SECTION     */
  /* =============================== */

  .tt-builder-faq-container {
      width: 100%;
  }

  .tt-builder-faq-container .tt-faq-header {
      margin-bottom: 24px;
      text-align: center;
  }

  .tt-builder-faq-container .tt-faq-header h3 {
      font-size: 20px;
      font-weight: 600;
      color: #000;
      margin-bottom: 8px;
  }

  .tt-builder-faq-container .tt-faq-header p {
      font-size: 14px;
      color: #666;
      margin: 0;
  }

  .tt-builder-faq-container .tt-faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
  }

  .tt-builder-faq-container .tt-faq-item {
      border: 1px solid #E8E8E8;
      border-bottom: none;
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .tt-builder-faq-container .tt-faq-item:last-child {
      border-bottom: 1px solid #E8E8E8;
  }

  .tt-builder-faq-container .tt-faq-item:hover {
      border-color: var(--primary);
  }

  .tt-builder-faq-container .tt-faq-question {
      width: 100%;
      background: #F6F6F6;
      border: none;
      padding: 16px;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.3s ease;
      font-size: 15px;
      font-weight: 500;
      color: #000;
  }

  .tt-builder-faq-container .tt-faq-question:hover {
      background: #EAEEF6;
  }

  .tt-builder-faq-container .tt-faq-question.active {
      background: #EAEEF6;
      color: var(--primary);
  }

  .tt-builder-faq-container .tt-faq-number {
      min-width: 28px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
  }

  .tt-builder-faq-container .tt-faq-question.active .tt-faq-number {
      background: var(--primary);
  }

  .tt-builder-faq-container .tt-faq-question-text {
      flex: 1;
      line-height: 1.4;
  }

  .tt-builder-faq-container .tt-faq-icon {
      width: 20px;
      height: 20px;
      color: var(--primary);
      transition: transform 0.3s ease;
      flex-shrink: 0;
  }

  .tt-builder-faq-container .tt-faq-question.active .tt-faq-icon {
      transform: rotate(180deg);
  }

  .tt-builder-faq-container .tt-faq-answer {
      background: #fff;
      padding: 16px;
      border-top: 1px solid #E8E8E8;
      animation: slideDown 0.3s ease;
  }

  .tt-builder-faq-container .tt-faq-answer p {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: #555;
  }

  @keyframes slideDown {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (max-width: 768px) {
      .tt-builder-faq-container .tt-faq-header h3 {
          font-size: 16px;
      }

      .tt-builder-faq-container .tt-faq-header p {
          font-size: 12px;
      }

      .tt-builder-faq-container .tt-faq-question {
          padding: 14px 12px;
          font-size: 13px;
          gap: 10px;
      }

      .tt-builder-faq-container .tt-faq-number {
          min-width: 24px;
          width: 24px;
          height: 24px;
          font-size: 11px;
      }

      .tt-builder-faq-container .tt-faq-icon {
          width: 18px;
          height: 18px;
      }

      .tt-builder-faq-container .tt-faq-answer {
          padding: 12px;
      }

      .tt-builder-faq-container .tt-faq-answer p {
          font-size: 12px;
          line-height: 1.6;
      }
  }

  /* =============================== */
  /*         CONTACT AGENT CARD      */
  /* =============================== */

  .tt-property-details-section .tt-details-body .tt-agent-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-info {
      display: flex;
      align-items: center;
      gap: 15px;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-avatar img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-details span {
      font-size: 13px;
      color: #555;
      margin-bottom: 4px;
      display: block;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-details h4 {
      font-size: 16px;
      color: #000;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-details h4 i {
      color: #4CAF50;
      font-size: 14px;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-contact-info {
      border-left: 1px solid #e7e7e7;
      padding-left: 30px;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-contact-info .phone {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #555;
      font-size: 15px;
      font-weight: 400;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-contact-info p {
      font-size: 12px;
      color: #777;
      margin: 0;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions a {
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #fff;
      transition: 0.3s;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions .btn-enquire {
      background-color: var(--primary);
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions .btn-enquire:hover {
      background-color: #1e3a78;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions .btn-whatsapp {
      background-color: #4CAF50;
  }

  .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions .btn-whatsapp:hover {
      background-color: #388E3C;
  }

  .tt-property-details-section .tt-details-body .bank-logo {
      aspect-ratio: 6/3;
      padding: 8px;
      border: solid 1px #e7e7e7;
      border-radius: 5px;
      overflow: hidden;
  }

  .tt-property-details-section .tt-details-body .bank-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  /* EMI CALCULATOR */
  .tt-property-details-section .tt-emi-calculator-property {
      padding: 10px 0;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-group {
      margin-bottom: 15px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-label span {
      font-size: 13px;
      color: #000;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-label span.value {
      font-weight: 500;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-range-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      background: #e7e7e7;
      border-radius: 4px;
      outline: none;
      padding: 0;
      margin: 0;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary);
      cursor: pointer;
      box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--primary);
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-action {
      text-align: center;
      margin-top: 30px;
  }

  .tt-property-details-section .tt-emi-calculator-property .btn-check-emi {
      background-color: var(--primary);
      color: #fff;
      border: none;
      padding: 10px 30px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      transition: 0.3s;
  }

  .tt-property-details-section .tt-emi-calculator-property .btn-check-emi:hover {
      background-color: #1e3a78;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-card .tt-emi-result-top {
      background-color: #EAEEF6;
      border-radius: 3px;
      padding: 12px;
      margin-top: 20px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-bottom: 14px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-top span {
      font-size: 14px;
      color: var(--primary);
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-top strong {
      font-size: 16px;
      font-weight: 500;
      color: var(--primary);
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-details {
      margin-top: 16px;
      display: grid;
      gap: 20px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-details div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: #475569;
      padding: 0px 7px;
  }

  .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-details div strong {
      color: #0f172a;
      font-weight: 500;
  }

  /* HOME LOAN CTA */
  .tt-property-details-section .tt-home-loan-cta {
      background-color: #F6F6F6;
      padding: 25px 20px;
      border-radius: 8px;
      margin-top: 20px;
  }

  .tt-property-details-section .tt-home-loan-cta h2 {
      font-size: 18px;
      color: #000;
      margin: 0 0 15px 0;
      font-weight: 500;
  }

  .tt-property-details-section .tt-home-loan-cta p {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  .tt-property-details-section .tt-home-loan-cta .btn-read-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--primary);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: 0.3s;
  }

  .tt-property-details-section .tt-home-loan-cta .btn-read-more:hover {
      color: #1e3a78;
  }

  @media (max-width:1200px) {
      .tt-property-details-section .tt-details-body .tt-nearby-locations ul {
          grid-template-columns: auto auto;
      }

      .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions a span {
          display: none;
      }

      .tt-property-details-section .tt-details-body .tt-additional-details-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 767px) {
      .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-top span {
          font-size: 12px;
      }

      .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-top strong {
          font-size: 12px;
      }

      .tt-property-details-section .tt-emi-calculator-property .tt-emi-label span {
          font-size: 12px !important;
      }

      .tt-property-details-section .tt-emi-calculator-property .tt-emi-result-details div {
          font-size: 12px;
      }

      .tt-property-details-section .tt-details-card {
          border-radius: 0px;
          border: 1px solid #e7e7e7;
          border-radius: 5px;
      }

      .tt-property-details-section .tt-details-body {
          padding: 0px 10px 5px 10px !important;
      }

      .tt-property-details-section .tt-details-head {
          border-radius: 0px;
          padding: 8px 10px;
          margin-bottom: 10px;
      }

      .tt-property-details-section .tt-details-head h2 {
          font-size: 13px;
      }

      .tt-property-details-section .tt-details-head a {
          padding: 5px 8px;
          font-size: 10px;
      }

      .tt-property-details-section .tt-details-body {
          padding: 0px;
      }

      .tt-property-details-section .tt-details-body p {
          font-size: 12px;
          margin-bottom: 0;
          text-align: justify;
      }

      .tt-property-details-section .tt-details-body .tt-description ul li {
          font-size: 12px;
          margin-bottom: 5px;
      }

      .tt-property-details-section .tt-details-body .tt-agent-card {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
      }

      .tt-property-details-section .tt-details-body .tt-agent-card .agent-contact-info {
          border-left: none;
          padding-left: 0;
          border-top: 1px solid #e7e7e7;
          padding-top: 15px;
          width: 100%;
      }

      .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions {
          width: 100%;
          flex-direction: column;
      }

      .tt-property-details-section .tt-details-body .tt-agent-card .agent-actions a {
          width: 100%;
          justify-content: center;
      }

      .tt-property-details-section .tt-details-body .tt-additional-details-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 4px;
          row-gap: 15px;
          margin-bottom: 10px;
      }

      .tt-property-details-section .tt-details-body .tt-additional-details-grid .tt-item {
          gap: 0px;
      }

      .tt-property-details-section .tt-details-body .tt-additional-details-grid .tt-item span {
          font-size: 12px;
      }

      .tt-property-details-section .tt-details-body .tt-additional-details-grid .tt-item h3 {
          font-size: 12px;
          padding: 0 5px 0 0;
      }

      .tt-property-details-section .tt-details-body .tt-amenities ul {
          gap: 5px;
          padding: 0 0 10px 0 !important;
      }

      .tt-property-details-section .tt-details-body .tt-amenities ul li {
          font-size: 10px;
          padding: 5px 6px;
          gap: 3px;
      }

      .tt-property-details-section .tt-details-body .tt-amenities ul li img {
          height: 14px;
          width: 14px;
      }

      .tt-property-details-section .tt-details-body .tt-location-info iframe {
          height: 160px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations h3 {
          font-size: 13px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-name {
          font-size: 9px;
          gap: 5px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li {
          padding: 6px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li span {
          font-size: 10px;
          padding: 3px 6px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul {
          grid-template-columns: 1fr 1fr;
          gap: 5px;
          padding: 0 0 10px 0;
      }

      .tt-enquire-btn {
          padding: 8px;
          border-radius: 3px;
          font-size: 11px;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li .tt-location-name svg {
          height: 14px;
          width: 14px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-label span {
          font-size: 11px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-result-card .tt-emi-result-top {
          padding: 10px 6px;
          margin-top: 10px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-result-top span {
          font-size: 12px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-result-top strong {
          font-size: 12px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-action {
          margin-top: 16px;
      }

      .tt-property-details-section .tt-emi-calculator .tt-emi-result-details div strong,
      .tt-property-details-section .tt-emi-calculator .tt-emi-result-details div span {
          font-size: 12px;
      }

      .tt-property-details-section .tt-home-loan-cta {
          padding: 15px 10px;
      }

      .tt-property-details-section .tt-home-loan-cta h2 {
          margin-bottom: 0 0 10px 0;
          font-size: 16px;
      }

      .tt-property-details-section .tt-home-loan-cta p {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-property-details-section .tt-home-loan-cta .btn-read-more {
          font-size: 12px;
      }

      .tt-property-details-section .bank-approval-list .swiper-horizontal {
          margin-bottom: 10px !important;
      }

  }

  @media(max-width: 468px) {
      .tt-property-details-section .tt-details-body .tt-additional-details-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }


  /* FLOATING MOBILE AGENT CARD */

  @media (min-width: 768px) {
      .tt-floating-agent-card {
          display: none !important;
      }
  }

  @media (max-width: 768px) {
      .tt-nearby-loc-item-enhanced {
          transform: none !important;
      }

      .tt-property-details-section .tt-details-body .tt-nearby-locations ul li:hover {
          background: #f7f7f7;
      }
  }

  .tt-floating-agent-card {
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: #fff;
      border-radius: 5px;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      z-index: 9999;
  }

  .tt-floating-agent-card .tt-agent-info {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .tt-floating-agent-card .tt-agent-image img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
  }

  .tt-floating-agent-card .tt-agent-content>span {
      display: block;
      font-size: 10px;
      color: #777;
      margin-bottom: 2px;
  }

  .tt-floating-agent-card .tt-agent-content h4 {
      font-size: 13px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 4px;
  }

  .tt-floating-agent-card .tt-agent-content h4 i,
  .tt-floating-agent-card .tt-agent-content h4 svg {
      color: #43a047;
      fill: #43a047;
      font-size: 13px;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
  }

  .tt-floating-agent-card .tt-agent-content .agent-contact-info {
      color: #000;
      font-size: 12px;
      margin-top: 3px;
  }

  .tt-floating-agent-card .tt-agent-content .agent-contact-info .phone {
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .tt-floating-agent-card .tt-agent-content .agent-contact-info .phone svg {
      width: 13px;
      height: 13px;
      color: #43a047;
      flex-shrink: 0;
  }

  .tt-floating-agent-card .tt-agent-content .agent-contact-info .phone span {
      font-size: 11px;
      color: #7777;
      font-weight: 500;
      margin-bottom: 0px;
      display: inline-block;
  }

  .tt-floating-agent-card .tt-contact-btn {
      padding: 10px;
      border-radius: 3px;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 400;
  }




  /* BUILDER DETAILS */

  .tt-builder-image-section {
      padding: 15px 0px;
  }

  .tt-builder-image-section .tt-builder-image-card .left {
      border: 1px solid #e7e7e7;
      border-radius: 12px;
      padding: 12px;
      background: #fff;
  }


  .tt-builder-image-section .tt-property-image-card {
      border: 1px solid #e7e7e7;
      border-radius: 20px;
      padding: 24px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
  }

  .tt-builder-image-section .tt-property-image-card .left {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

  .tt-builder-image-section .tt-top-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding-bottom: 5px;
      border-bottom: 1px solid #e7e7e7;
      margin-bottom: 10px;
  }

  .tt-builder-image-section .tt-property-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
  }

  .tt-builder-image-section .tt-property-meta span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      color: #4a4a4a;
  }

  .tt-builder-image-section .tt-property-meta .tt-property-id {
      color: var(--primary);
  }

  .tt-builder-image-section .tt-property-meta .tt-property-premium {
      color: #f4b400;
  }

  .tt-builder-image-section .tt-property-meta .tt-property-verified {
      color: #43a047;
  }

  .tt-builder-image-section .tt-top-section .tt-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
  }

  .tt-builder-image-section .tt-top-section .tt-actions button {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: var(--primary);
      color: #fff;
  }

  .tt-builder-image-section .tt-top-section .tt-actions button.wishlist {
      background-color: #ff1744;
  }

  .tt-builder-image-section .tt-top-section .tt-actions button svg {
      width: 15px;
      height: 15px;
      color: #fff;
  }

  .tt-builder-image-section .tt-proprty-title-content {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .tt-builder-image-section .builder-logo {
      aspect-ratio: 6 / 3.5;
      width: 100px;
      min-width: 100px;
      border: solid 1px rgb(197, 197, 197);
  }

  .tt-builder-image-section .builder-logo img {
      height: 100%;
  }

  .tt-builder-image-section .tt-proprty-title-content h1 {
      font-size: 16px;
      line-height: 1.1;
      font-weight: 600;
      margin: 0;
      color: #111;
      margin-bottom: 4px;
  }

  .tt-builder-image-section .tt-proprty-title-content .tt-location {
      margin: 0;
      font-size: 13px;
      color: #606060;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      line-height: 1.4;
      margin-top: 10px;
  }



  .tt-builder-image-section .tt-price-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 0px;
  }

  .tt-builder-image-section .tt-price-box .btn-primary {
      border: 0;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 400;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }

  .tt-builder-image-section .tt-price-box .tt-price-content h2 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
      color: var(--primary);
  }

  .tt-builder-image-section .tt-price-box .tt-price-content span {
      display: block;
      font-size: 14px;
      color: #6d6d6d;
  }


  .tt-builder-image-section .tt-property-overview {
      margin: 12px 0px;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      row-gap: 22px;
      background-color: #fff;
      border: 1px solid #F2F5F9;
  }

  .tt-builder-image-section .tt-overview-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
  }

  .tt-builder-image-section .tt-overview-item .tt-icon {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      background: #E6EBF4;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 15px;
      flex-shrink: 0;
  }

  .tt-builder-image-section .tt-overview-item span {
      display: block;
      font-size: 11px;
      color: #525252;
      margin-bottom: 3px;
  }

  .tt-builder-image-section .tt-overview-item h4 {
      font-size: 12px;
      margin: 0;
      color: #000;
      line-height: 1.4;
  }


  .tt-builder-image-section .tt-property-actions {
      display: flex;
      gap: 20px;
      padding-top: 15px;
      border-top: solid 1px #e7e7e7;
  }

  .tt-property-actions a:focus {
      color: #fff;
  }


  .tt-builder-image-section .tt-rera-badge {
      padding: 0;
      border-radius: 0;
      font-size: 11px;
      color: #000;
      display: flex;
      align-items: center;
      gap: 0;
      border-bottom: solid 1px #e7e7e7;
      margin-bottom: 15px;
  }

  .tt-builder-image-section .tt-rera-badge span {
      padding: 4px 6px;
      font-size: 12px;
      background: #F2F2F2;

  }

  .tt-builder-image-section .tt-rera-badge .rera-title {
      background: var(--primary);
      color: #fff;
      border-radius: 4px 0px 0px 4px;
  }

  .tt-builder-image-section .tt-rera-badge .rera-content {
      color: #000;
      border-radius: 0px 4px 4px 0px;
  }

  @media (max-width: 1200px) {
      .tt-builder-image-section .tt-property-overview {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

  @media (max-width: 768px) {
      .tt-builder-image-section .tt-property-image-card {
          padding: 18px;
      }

      .tt-builder-image-section .tt-rera-badge span {
          font-size: 10px;
      }

      .tt-builder-image-section .tt-property-overview {
          grid-template-columns: 1fr 1fr;
      }

      .tt-builder-image-section .tt-property-meta .tt-property-id,
      .tt-builder-image-section .tt-price-box .btn-primary,
      .tt-builder-image-section .tt-rera-badge .rera-title {
          font-size: 12px;
      }

      .tt-builder-image-section .tt-property-meta span {
          gap: 5px;
      }

      .tt-builder-image-section .tt-top-section .tt-actions {
          gap: 5px;
          font-size: 13px;
      }

      .tt-builder-image-section .tt-proprty-title-content h1 {
          font-size: 14px;
          margin-bottom: 5px;
      }

      .tt-builder-image-section .tt-proprty-title-content .tt-location {
          font-size: 11px;
          line-height: 1.4;
          /* display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden; */
          margin-top: 0px;
      }

      .bread-crumb-section {
          font-size: 12px !important;
          gap: 5px !important;
          margin-bottom: 8px;
      }

      .bread-crumb-section a {
          white-space: nowrap;
      }

      .bread-crumb-section span {
          white-space: nowrap;
      }

      .bread-crumb-home,
      .bread-crumb-builders {
          overflow-x: scroll;
          width: 30px;
          scrollbar-width: none;
      }

      .bread-crumb-company,
      .breadcrumb-project {
          overflow-x: scroll;
          width: 100px;
          scrollbar-width: none;
          -ms-overflow-style: none;
      }

      .scroll-container::-webkit-scrollbar {
          display: none;
      }


      .tt-property-meta span {
          font-size: 11px !important;
      }

      .tt-builder-image-section .tt-property-actions {
          gap: 5px !important
      }

      .tt-builder-image-section .tt-price-box .tt-price-content h2 {
          font-size: 14px !important;
      }

      .tt-builder-image-section .tt-price-box .btn-primary {
          font-size: 11px;
      }

      .tt-rera-badge-builder-details {
          margin-top: 10px;
      }

      .rera-title {
          font-size: 11px
      }

      .tt-builder-image-section .tt-overview-item span {
          font-size: 9px;
      }

      .tt-builder-image-section .tt-overview-item h4 {
          font-size: 8px !important;
      }

      .tt-additional-details-grid p {
          display: flex;
          flex-direction: column;

      }

      .tt-builder-location-icon i {
          font-size: 10px !important;
      }

      .tt-builders-location-details .tt-location-info {
          margin-bottom: 10px;
      }

  }



  /* BUILDER DETAILS SWIPER */



  .tt-builder-image-section .right .gallery-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 16px;
      height: 416px;
  }

  .tt-builder-image-section .right .gallery-main-image {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
  }

  .tt-builder-image-section .right .gallery-side-images {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .tt-builder-image-section .right .gallery-side-item {
      position: relative;
      flex: 1;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
  }

  .tt-builder-image-section .right .gallery-image {
      object-fit: cover;
      transition: 0.4s ease;
  }

  .tt-builder-image-section .right .gallery-main-image:hover .gallery-image,
  .tt-builder-image-section .right .gallery-side-item:hover .gallery-image {
      transform: scale(1.05);
  }

  .tt-builder-image-section .right .view-gallery-btn {
      position: absolute;
      right: 20px;
      bottom: 20px;
      background: #ffffff;
      border: none;
      padding: 14px 22px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: 0.3s ease;
      z-index: 2;
  }

  .tt-builder-image-section .right .view-gallery-btn:hover {
      transform: translateY(-2px);
  }

  /* LIGHTBOX */

  .tt-builder-image-section .right .lightbox-modal {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.94);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .tt-builder-image-section .right .lightbox-close {
      position: absolute;
      top: 30px;
      right: 30px;
      background: transparent;
      border: none;
      color: #ffffff;
      cursor: pointer;
      z-index: 10;
  }

  .tt-builder-image-section .right .lightbox-image-wrapper {
      position: relative;
      width: 85%;
      height: 80vh;
  }

  .tt-builder-image-section .right .lightbox-image {
      object-fit: contain;
  }

  .tt-builder-image-section .right .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: none;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: #ffffff;
      cursor: pointer;
      transition: 0.3s ease;
      z-index: 10;
  }

  .tt-builder-image-section .right .lightbox-nav:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  .tt-builder-image-section .right .lightbox-prev {
      left: 30px;
  }

  .tt-builder-image-section .right .lightbox-next {
      right: 30px;
  }

  .tt-builder-image-section .right .lightbox-thumbnails {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
  }

  .tt-builder-image-section .right .thumbnail-item {
      position: relative;
      width: 80px;
      height: 80px;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      opacity: 0.6;
      border: 2px solid transparent;
      transition: 0.3s ease;
  }

  .tt-builder-image-section .right .thumbnail-item.active {
      opacity: 1;
      border-color: #ffffff;
  }

  .tt-builder-image-section .right .thumbnail-image {
      object-fit: cover;
  }

  /* Responsive */

  @media(max-width: 1500px) {
      .tt-builder-image-section .right .gallery-main-image {
          width: 350px;
          border-radius: 10px;
      }

      .tt-builder-image-section .right .gallery-side-item {
          width: 100px;
          border-radius: 10px;
      }
  }

  @media (max-width: 991px) {
      .tt-builder-image-section .right .gallery-grid {
          grid-template-columns: 1fr;
          height: auto;
      }

      .tt-builder-image-section .right .gallery-main-image {
          height: 350px;
          border-radius: 10px;
      }

      .tt-builder-image-section .right .gallery-side-images {
          flex-direction: row;
      }

      .tt-builder-image-section .right .gallery-side-item {
          height: 100px;
          border-radius: 10px;
      }

      .tt-builder-image-section .right .lightbox-image-wrapper {
          width: 95%;
          height: 65vh;
      }

      .tt-property-details-section .tt-floor-plans .tt-spec-item {
          flex-direction: column;
      }

      .tt-property-details-section .tt-floor-plans .tt-floor-plan-header {
          padding: 10px;
      }

      .tt-property-details-section .tt-floor-plans .tt-bhk-badge {
          font-size: 10px;
          padding: 8px 10px;
      }

  }

  @media (max-width: 767px) {
      .tt-builder-image-section .right .gallery-main-image {
          height: 300px;
          border-radius: 10px;
      }

      .tt-builder-image-section .right .gallery-side-item {
          height: 110px;
          border-radius: 10px;
      }

      .tt-builder-image-section .right .lightbox-nav {
          width: 45px;
          height: 45px;
      }

      .tt-builder-image-section .right .thumbnail-item {
          width: 60px;
          height: 60px;
      }

      .tt-builder-image-section .right .view-gallery-btn {
          padding: 8px 10px;
          font-size: 12px;
      }

      .tt-property-details-section .tt-floor-plans .tt-floor-plan-header {
          padding: 5px;
      }

      .tt-property-details-section .tt-floor-plans .tt-bhk-badge {
          font-size: 12px;
      }

  }



  /* ============================== */
  /*        BLOG DETAILS            */
  /* ============================== */

  .blog-details-image {
      position: relative;
  }

  .tt-share-wrapper-loan {
      position: absolute;
      bottom: 12px;
      right: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      z-index: 10;
  }

  .tt-share-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      border: none;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
  }

  .tt-share-btn:hover {
      background: var(--primary);
  }

  .tt-share-options {
      display: none;
      flex-direction: column;
      gap: 8px;
  }

  .tt-share-wrapper-loan.open .tt-share-options {
      display: flex;
  }

  .tt-share-options a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      text-decoration: none;
      transition: transform 0.3s;
  }

  .tt-share-options a:hover {
      transform: scale(1.1);
  }

  .tt-share-facebook {
      background: #1877f2;
  }

  .tt-share-whatsapp {
      background: #25d366;
  }

  .tt-share-instagram {
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  }

  /* BLOGS */

  .tt-blog-page {
      padding: 20px 0px;
  }

  .tt-blog-page.tt-blog-sidebar {
      position: sticky;
      top: 20px;
      height: auto;
      overflow-y: auto;
      scrollbar-width: none;
  }

  .tt-blog-page.tt-blog-sidebar::-webkit-scrollbar {
      display: none;
  }

  .tt-blog-page .tt-sidebar-widget {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
      border: 1px solid #ececec;
      box-shadow: 0 12px 30px rgba(16, 30, 54, 0.05);
  }

  .tt-blog-page .tt-sidebar-widget h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      margin-bottom: 12px;
  }

  .tt-blog-page .tt-sidebar-widget h4 i {
      font-size: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f3f6ff;
      color: var(--primary);
  }

  .tt-blog-page .tt-search-box {
      position: relative;
  }

  .tt-blog-page .tt-search-box input {
      width: 100%;
      height: 54px;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 0 60px 0 18px;
      outline: none;
  }

  .tt-blog-page .tt-search-box button {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
  }

  .tt-blog-page .tt-search-box button i {
      font-size: 12px;
  }

  .tt-blog-page .tt-category-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .tt-blog-page .tt-category-list li {
      margin-bottom: 8px;
  }

  .tt-blog-page .tt-category-list li:last-child {
      margin-bottom: 0;
  }

  .tt-blog-page .tt-category-list li a {
      background: #f7f8fc;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      color: #222;
      transition: 0.3s;
      font-size: 14px;
  }

  .tt-blog-page .tt-category-list li a:hover,
  .tt-blog-page .tt-category-list li a.active {
      background: var(--primary);
      color: #fff;
  }

  .tt-blog-page .tt-latest-post {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
  }

  .tt-blog-page .tt-latest-post:last-child {
      margin-bottom: 0;
  }

  .tt-blog-page .tt-latest-post .tt-thumb {
      width: 90px;
      min-width: 90px;
      border-radius: 10px;
      overflow: hidden;
  }

  .tt-blog-page .tt-latest-post .tt-thumb img {
      width: 100%;
      height: 90px;
      object-fit: cover;
      border-radius: 10px;
  }

  .tt-blog-page .tt-latest-post .tt-post-content h5 {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 8px;
  }

  .tt-blog-page .tt-latest-post .tt-post-content h5 a {
      color: #222;
      text-decoration: none;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .tt-blog-page .tt-latest-post .tt-post-content span {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #777;
  }

  .tt-blog-page .tt-sidebar-banner {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
  }

  .tt-blog-page .tt-sidebar-banner img {
      width: 100%;
      height: 420px;
      object-fit: cover;
  }

  .tt-blog-page .tt-sidebar-banner .tt-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
              rgba(0, 0, 0, 0.8),
              rgba(0, 0, 0, 0.2));
  }

  .tt-blog-page .tt-sidebar-banner .tt-banner-content {
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 25px;
      z-index: 2;
  }

  .tt-blog-page .tt-sidebar-banner .tt-banner-content h3 {
      color: #fff;
      font-size: 30px;
      line-height: 1.4;
      margin-bottom: 20px;
  }

  .tt-blog-page .tt-sidebar-banner .tt-btn-primary {
      height: 50px;
      padding: 0 22px;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
  }

  .tt-blog-page .tt-popular-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }

  .tt-blog-page .tt-popular-tags a {
      padding: 6px 10px;
      border-radius: 22px;
      border: 1px solid #dce6ff;
      background: #f7faff;
      color: #2d3c59;
      text-decoration: none;
      font-size: 12px;
      transition: 0.3s ease;
  }

  .tt-blog-page .tt-popular-tags a:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
  }

  .tt-blog-page .tt-newsletter-box p {
      color: #5d6574;
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 10px;
  }

  .tt-blog-page .tt-newsletter-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .tt-blog-page .tt-newsletter-form input {
      width: 100%;
      height: 42px;
      border: 1px solid #d9e0ee;
      border-radius: 10px;
      padding: 0 14px;
      outline: none;
  }

  .tt-blog-page .tt-newsletter-form button {
      height: 42px;
      border: 0;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
  }

  @media (max-width: 1399px) {
      .tt-blog-page .tt-latest-post .tt-post-content h5 a {
          font-size: 15px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }
  }

  @media (max-width: 991px) {

      .tt-blog-page .tt-blog-sidebar {
          margin-top: 0px;
          position: sticky;
          top: 5px;
      }

      .tt-blog-page {
          padding: 20px 0 !important;
      }

      .tt-blog-page .tt-sidebar-banner .tt-banner-content h3 {
          font-size: 26px;
      }

      .tt-blog-page .tt-latest-post .tt-post-content h5 a {
          font-size: 14px;
      }

      .tt-blog-page .tt-latest-post .tt-post-content span {
          font-size: 12px;
      }



  }

  @media (max-width: 767px) {


      .tt-blog-page .tt-sidebar-banner img {
          height: 320px;
      }

      .tt-blog-page .tt-sidebar-banner .tt-banner-content h3 {
          font-size: 24px;
      }

      .tt-blog-page {
          padding: 12px 0 !important;
      }

      .tt-blog-page .tt-blog-sidebar {
          margin-top: 10px;
      }

      .tt-blog-page .tt-sidebar-widget {
          padding: 10px;
      }

      .tt-blog-page .tt-sidebar-widget h4 {
          font-size: 12px;
          gap: 5px;
      }

      .tt-blog-page .tt-sidebar-widget h4 i {
          font-size: 12px;
          width: 24px;
          height: 24px;
      }

      .tt-blog-page .tt-search-box input {
          height: 40px;
          font-size: 13px;
          border-radius: 5px;
          padding: 0 38px 0 12px;
      }

      .tt-blog-page .tt-search-box button {
          right: 3px;
          width: 33px;
          height: 33px;
          border-radius: 5px;
      }

      .tt-blog-page .tt-category-list li a {
          font-size: 13px;
      }

      .tt-blog-page .tt-category-list li a:hover {
          background: #f7f8fc;
          color: #222;
      }

      .tt-blog-page .tt-latest-post .tt-thumb {
          width: 80px;
          min-width: 80px;
          border-radius: 5px;
      }

      .tt-blog-page .tt-latest-post .tt-thumb img {
          height: 80px;
      }

      .tt-blog-page .tt-latest-post .tt-post-content h5 {
          font-size: 13px;
      }

      .tt-blog-page .tt-latest-post .tt-post-content span {
          font-size: 11px;
          gap: 5px;
      }

      .tt-blog-page .tt-popular-tags a {
          font-size: 11px;
          padding: 5px 8px;
      }

      .tt-blog-page .tt-newsletter-box p {
          font-size: 13px;
      }

      .tt-blog-page .tt-newsletter-form {
          gap: 5px;
      }

      .tt-blog-page .tt-newsletter-form input {
          font-size: 13px;
          border-radius: 5px;
          padding: 0 12px;
      }

  }


  /* ============================== */
  /*            ABOUT US            */
  /* ============================== */

  .tt-about-page {
      overflow: hidden;
      background: #fff;
  }

  .tt-about-page .tt-bg-image {
      object-fit: cover;
  }

  .tt-about-page .row {
      display: grid;
      gap: 24px;
  }

  .tt-about-page .row.g-4 {
      gap: 24px;
  }

  .tt-about-page .row.g-5 {
      gap: 32px;
  }

  .tt-about-page .col-lg-6,
  .tt-about-page .col-lg-3,
  .tt-about-page .col-md-6 {
      width: 100%;
      max-width: none;
      padding: 0;
  }

  .tt-about-page .tt-about-hero {
      position: relative;
      min-height: clamp(560px, 86vh, 900px);
      display: flex;
      align-items: center;
  }

  .tt-about-page .tt-about-hero .tt-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(95deg, rgba(7, 15, 36, 0.82) 0%, rgba(7, 15, 36, 0.52) 48%, rgba(7, 15, 36, 0.75) 100%);
  }

  .tt-about-page .tt-about-hero .tt-hero-content {
      position: relative;
      z-index: 2;
      max-width: 780px;
  }

  .tt-about-page .tt-hero-content .tt-actions {
      display: flex;
      gap: 12px;
      justify-content: left;
  }

  .tt-about-page .tt-about-hero .tt-tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      color: #fff;
      padding: 10px 18px;
      border-radius: 999px;
      margin-bottom: 22px;
      font-size: 14px;
      letter-spacing: 0.2px;
  }

  .tt-about-page .tt-about-hero h1 {
      font-size: clamp(36px, 7vw, 68px);
      line-height: 1.08;
      color: #fff;
      margin-bottom: 20px;
  }

  .tt-about-page .tt-about-hero p {
      color: #e9edf6;
      font-size: clamp(16px, 2vw, 19px);
      max-width: 640px;
      line-height: 1.8;
      margin-bottom: 34px;
  }

  .tt-about-page .tt-cta-content .tt-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
  }

  .tt-about-page .tt-btn-primary,
  .tt-about-page .tt-btn-outline {
      padding: 12px 22px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      font-weight: 500;
      border: 1px solid transparent;
      font-size: 15px;
  }

  .tt-about-page .tt-btn-primary {
      background: var(--primary);
      color: #fff;
  }

  .tt-about-page .tt-btn-outline {
      border-color: #fff;
      color: #fff;
  }

  .tt-about-page .tt-section-heading {
      text-align: center;
      margin-bottom: 52px;
  }

  .tt-about-page .tt-section-heading span,
  .tt-about-page .tt-section-tag {
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.4px;
      text-transform: uppercase;
  }

  .tt-about-page .tt-section-heading span {
      display: inline-block;
      margin-bottom: 10px;
  }

  .tt-about-page .tt-section-heading h2 {
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.15;
  }

  .tt-about-page .tt-intro-image {
      position: relative;
  }

  .tt-about-page .tt-intro-image img {
      width: 100%;
      border-radius: 20px;
      object-fit: cover;
  }

  .tt-about-page .tt-floating-card {
      position: absolute;
      bottom: 24px;
      left: 24px;
      right: 24px;
      max-width: 360px;
      background: #fff;
      border-radius: 14px;
      padding: 18px;
      display: flex;
      gap: 14px;
      align-items: center;
      box-shadow: 0 14px 38px rgba(16, 24, 40, 0.14);
  }

  .tt-about-page .tt-floating-card svg {
      width: 1.8em;
      height: 1.8em;
      color: #f4b400;
      flex: 0 0 auto;
  }

  .tt-about-page .tt-floating-card h4 {
      font-size: 20px;
      margin-bottom: 4px;
  }

  .tt-about-page .tt-floating-card p {
      color: #666;
      line-height: 1.5;
      margin: 0;
  }

  .tt-about-page .tt-intro-content h2 {
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.2;
      margin: 12px 0 20px;
  }

  .tt-about-page .tt-intro-content p {
      color: #666;
      line-height: 1.9;
      margin-bottom: 16px;
  }

  .tt-about-page .tt-mission-card,
  .tt-about-page .tt-feature-card,
  .tt-about-page .tt-team-card,
  .tt-about-page .tt-testimonial-card,
  .tt-about-page .tt-stat-card,
  .tt-about-page .tt-process-card {
      background: #fff;
      border: 1px solid #e9edf4;
      border-radius: 18px;
      padding: 30px;
      height: 100%;
      transition: transform 0.28s ease, box-shadow 0.28s ease;
  }

  .tt-about-page .tt-mission-card:hover,
  .tt-about-page .tt-feature-card:hover,
  .tt-about-page .tt-team-card:hover,
  .tt-about-page .tt-testimonial-card:hover,
  .tt-about-page .tt-stat-card:hover,
  .tt-about-page .tt-process-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.1);
  }

  .tt-about-page .tt-mission-card .tt-icon,
  .tt-about-page .tt-feature-card .tt-icon {
      width: 66px;
      height: 66px;
      border-radius: 16px;
      background: #eef2ff;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 22px;
  }

  .tt-about-page .tt-mission-card img {
      height: 60px;
      width: 60px;
      margin-bottom: 20px;
  }

  .tt-about-page .tt-mission-card h3,
  .tt-about-page .tt-feature-card h4 {
      margin-bottom: 12px;
  }

  .tt-about-page .tt-mission-card p,
  .tt-about-page .tt-feature-card p {
      color: #667085;
      line-height: 1.8;
      margin: 0;
  }

  .tt-about-page .tt-stat-card {
      text-align: center;
      background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  }

  .tt-about-page .tt-stat-card h2 {
      font-size: clamp(36px, 4.8vw, 56px);
      color: var(--primary);
      line-height: 1.1;
      margin-bottom: 8px;
  }

  .tt-about-page .tt-stat-card p {
      color: #4b5563;
      margin: 0;
  }

  .tt-about-page .tt-team-card {
      overflow: hidden;
      padding: 0;
  }

  .tt-about-page .tt-team-image {
      position: relative;
      overflow: hidden;
  }

  .tt-about-page .tt-team-image img {
      width: 100%;
      height: 360px;
      object-fit: cover;
      transition: transform 0.45s ease;
  }

  .tt-about-page .tt-team-card:hover .tt-team-image img {
      transform: scale(1.06);
  }

  .tt-about-page .tt-team-socials {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%) translateY(12px);
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: all 0.28s ease;
  }

  .tt-about-page .tt-team-card:hover .tt-team-socials {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
  }

  .tt-about-page .tt-team-socials a {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      color: #111827;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }

  .tt-about-page .tt-team-socials a svg {
      width: 1em;
      height: 1em;
  }

  .tt-about-page .tt-team-content {
      padding: 22px;
      text-align: center;
  }

  .tt-about-page .tt-team-content h4 {
      margin-bottom: 4px;
  }

  .tt-about-page .tt-team-content p {
      color: #667085;
      margin: 0;
  }

  .tt-about-page .tt-testimonial-card {
      position: relative;
  }

  .tt-about-page .tt-testimonial-card .tt-quote {
      color: var(--primary);
      font-size: 3.1rem;
      margin-bottom: 14px;
  }

  .tt-about-page .tt-testimonial-card p {
      color: #667085;
      line-height: 1.9;
      margin-bottom: 26px;
  }

  .tt-about-page .tt-user {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .tt-about-page .tt-user img {
      border-radius: 50%;
      width: 64px;
      height: 64px;
      object-fit: cover;
  }

  .tt-about-page .tt-rating {
      display: flex;
      gap: 3px;
      color: #f4b400;
      margin-top: 4px;
  }

  .tt-about-page .tt-rating svg {
      width: 1em;
      height: 1em;
  }

  .tt-about-page .tt-process-wrapper {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
  }

  .tt-about-page .tt-process-card {
      text-align: center;
  }

  .tt-about-page .tt-process-card span {
      width: 78px;
      height: 78px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 16px;
  }

  .tt-about-page .tt-process-card h4 {
      margin: 0;
  }

  .tt-about-page .tt-about-cta {
      position: relative;
      padding: clamp(90px, 10vw, 130px) 0;
      text-align: center;
  }

  .tt-about-page .tt-about-cta .tt-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5, 12, 32, 0.68);
  }

  .tt-about-page .tt-cta-content {
      position: relative;
      z-index: 2;
      max-width: 840px;
      margin-inline: auto;
  }

  .tt-about-page .tt-cta-content h2 {
      font-size: clamp(32px, 5.5vw, 58px);
      color: #fff;
      line-height: 1.12;
      margin-bottom: 18px;
  }

  .tt-about-page .tt-cta-content p {
      color: #e2e8f0;
      line-height: 1.9;
      margin-bottom: 30px;
  }

  @media (min-width: 768px) {

      .tt-about-page .tt-feature-section .row,
      .tt-about-page .tt-stats-section .row,
      .tt-about-page .tt-team-section .row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

  @media (min-width: 992px) {

      .tt-about-page .tt-company-intro .row,
      .tt-about-page .tt-mission-section .row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          align-items: center;
      }

      .tt-about-page .tt-feature-section .row,
      .tt-about-page .tt-stats-section .row,
      .tt-about-page .tt-team-section .row {
          grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .tt-about-page .tt-testimonial-section .row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .tt-about-page .tt-intro-content p {
          font-size: 16px;
      }

      .tt-about-page .tt-mission-card p,
      .tt-about-page .tt-feature-card p {
          font-size: 16px;
      }

      .tt-about-page .tt-mission-card h3,
      .tt-about-page .tt-feature-card h4 {
          font-size: 18px;
      }
  }

  @media (max-width: 991px) {
      .tt-about-page .tt-process-wrapper {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .tt-about-page .tt-floating-card {
          position: static;
          margin-top: 10px;
          max-width: 100%;
      }
  }

  @media (max-width: 767px) {

      .tt-about-page .tt-btn-primary,
      .tt-about-page .tt-btn-outline {
          padding: 12px 22px;
          font-size: 13px;
      }

      .tt-about-page .tt-mission-card,
      .tt-about-page .tt-feature-card,
      .tt-about-page .tt-team-card,
      .tt-about-page .tt-testimonial-card,
      .tt-about-page .tt-stat-card,
      .tt-about-page .tt-process-card {
          padding: 12px;
      }

      .tt-about-page .tt-about-hero {
          min-height: 82vh;
      }

      .tt-about-page .tt-btn-primary,
      .tt-about-page .tt-btn-outline {
          width: 100%;
      }

      .tt-about-page .tt-process-wrapper {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
      }

      .tt-about-page .tt-process-card span {
          width: 45px;
          height: 45px;
          font-size: 14px;
      }

      .tt-about-page .tt-process-card {
          padding: 12px;
      }

      .tt-about-page .tt-process-card h4 {
          font-size: 14px;
      }

      .tt-about-page .tt-team-image img {
          height: 320px;
      }

      .tt-about-page .tt-floating-card {
          margin-top: 10px;
      }

      .tt-about-page .tt-floating-card svg {
          width: 1.5em;
          height: 1.5em;
      }

      .tt-about-page .tt-floating-card h4 {
          font-size: 16px;
          margin-bottom: 4px;
      }

      .tt-about-page .tt-floating-card p {
          font-size: 12px;
          line-height: 1.5rem;
      }

      .tt-intro-content {
          padding: 0 5px;
      }

      .tt-about-page .tt-section-heading span,
      .tt-about-page .tt-section-tag {
          font-size: 13px;
      }

      .tt-about-page .tt-intro-content h2 {
          font-size: 24px;
          margin: 10px 0 12px;
      }

      .tt-about-page .tt-intro-content p {
          line-height: 1.9;
          margin-bottom: 15px;
          font-size: 13px
      }

      .tt-about-page .row.g-5 {
          gap: 20px;
      }

      .padding-main.tt-mission-section {
          padding: 5px 0;
      }

      .tt-about-page .row.g-4 {
          gap: 10px;
      }

      .tt-mission-card-section {
          display: flex;
          align-items: center;
          gap: 15px;
      }

  }



  /* ========================= */
  /*     OTHER SERVICES        */
  /* ========================= */

  .tt-services-page {
      overflow: hidden;
  }

  .tt-services-page .tt-bg-image {
      object-fit: cover;
  }

  .tt-services-page .tt-services-hero {
      position: relative;
      min-height: 95vh;
      display: flex;
      align-items: center;
  }

  .tt-services-page .tt-services-hero .tt-overlay,
  .tt-services-page .tt-services-cta .tt-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
  }

  .tt-services-page .tt-services-hero .tt-hero-content {
      position: relative;
      z-index: 2;
      max-width: 820px;
  }

  .tt-services-page .tt-services-hero .tt-tag {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(10px);
      color: #fff;
      margin-bottom: 25px;
  }

  .tt-services-page .tt-services-hero h1 {
      font-size: 72px;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 25px;
  }

  .tt-services-page .tt-services-hero p {
      font-size: 18px;
      color: #ddd;
      line-height: 1.9;
      margin-bottom: 35px;
      max-width: 650px;
  }

  .tt-services-page .tt-actions {
      display: flex;
      gap: 15px;
      justify-content: center;
  }

  .tt-services-page .tt-btn-primary,
  .tt-services-page .tt-btn-outline {
      height: 54px;
      padding: 0 28px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-weight: 500;
  }

  .tt-services-page .tt-btn-primary {
      background: var(--primary);
      color: #fff;
  }

  .tt-services-page .tt-btn-outline {
      border: 1px solid #fff;
      color: #fff;
  }

  .tt-services-page .tt-section-heading {
      text-align: center;
      margin-bottom: 60px;
  }

  .tt-services-page .tt-section-heading span {
      color: var(--primary);
      display: inline-block;
      margin-bottom: 12px;
  }

  .tt-services-page .tt-section-heading h2 {
      font-size: 48px;
  }

  .tt-services-page .tt-intro-image {
      position: relative;
  }

  .tt-services-page .tt-intro-image img {
      width: 100%;
      border-radius: 20px;
  }

  .tt-services-page .tt-floating-card {
      position: absolute;
      bottom: 25px;
      left: 25px;
      background: #fff;
      padding: 20px;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .tt-services-page .tt-floating-card h4 {
      margin-bottom: 5px;
  }

  .tt-services-page .tt-intro-content h2 {
      font-size: 48px;
      margin-bottom: 25px;
      line-height: 1.3;
  }

  .tt-services-page .tt-intro-content p {
      color: #666;
      line-height: 1.9;
      margin-bottom: 20px;
  }

  .tt-services-page .tt-mini-stats {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      margin-top: 30px;
  }

  .tt-services-page .tt-mini-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 14px;
      padding: 25px 20px;
      min-width: 120px;
  }

  .tt-services-page .tt-mini-card h4 {
      color: var(--primary);
      margin-bottom: 5px;
  }

  .tt-services-page .tt-feature-box {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 18px;
      padding: 15px;
      transition: 0.4s;
      height: 100%;
  }

  .tt-services-page .tt-service-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 18px;
      padding: 20px;
      transition: 0.4s;
      margin-bottom: 20px;
  }

  .tt-services-page .tt-service-card:hover,
  .tt-services-page .tt-feature-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  }

  .tt-services-page .tt-service-card .tt-icon {
      position: relative;
      border-radius: 18px;
      margin-bottom: 25px;
      aspect-ratio: 6/3.6;
      overflow: hidden;
  }

  .tt-services-page .tt-service-card .tt-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-services-page .tt-service-card h3 {
      margin-bottom: 15px;
  }

  .tt-services-page .tt-service-card p {
      color: #666;
      line-height: 1.8;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }

  .tt-services-page .tt-read-more {
      color: var(--primary);
      text-decoration: none;
  }

  .tt-services-page .tt-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
  }

  .tt-services-page .tt-feature-box {
      display: flex;
      align-items: center;
      gap: 15px;
  }

  .tt-services-page .tt-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--primary);
  }

  .tt-services-page .tt-process-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 25px;
  }

  .tt-services-page .tt-process-card {
      text-align: center;
  }

  .tt-services-page .tt-process-card span {
      width: 80px;
      height: 80px;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 28px;
  }

  .tt-services-page .tt-stat-card {
      text-align: center;
  }

  .tt-services-page .tt-stat-card h2 {
      font-size: 56px;
      color: var(--primary);
      margin-bottom: 10px;
  }

  .tt-services-page .tt-services-cta {
      position: relative;
      padding: 120px 0;
      text-align: center;
  }

  .tt-services-page .tt-cta-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      margin: auto;
  }

  .tt-services-page .tt-cta-content h2 {
      font-size: 60px;
      color: #fff;
      margin-bottom: 25px;
  }

  .tt-services-page .tt-cta-content p {
      color: #ddd;
      line-height: 1.9;
      margin-bottom: 35px;
  }

  @media (max-width: 991px) {

      .tt-services-page .tt-services-hero h1,
      .tt-services-page .tt-cta-content h2 {
          font-size: 48px;
          margin-bottom: 20px;
      }

      .tt-services-page .tt-intro-content h2,
      .tt-services-page .tt-section-heading h2 {
          font-size: 38px;
      }

      .tt-services-page .tt-feature-grid,
      .tt-services-page .tt-process-wrapper {
          grid-template-columns: repeat(2, 1fr);
          margin-bottom: 5px;
      }

      .tt-services-page .tt-section-heading span {
          margin-bottom: 5px;
      }

      .tt-services-page .tt-section-heading {
          margin-bottom: 15px;
      }

      .tt-services-page .tt-service-card p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 0px;
      }

      .tt-services-page .tt-service-card {
          padding: 15px;
          border-radius: 10px;
      }

      .tt-services-page .tt-service-card .tt-icon {
          margin-bottom: 10px;
      }

      .tt-services-page .tt-service-card h3 {
          margin-bottom: 5px;
      }

      .tt-services-page .tt-feature-grid,
      .tt-services-page .tt-process-wrapper {
          gap: 5px;
      }
  }

  @media (max-width: 767px) {

      .tt-services-page .tt-services-hero {
          min-height: 85vh;
      }

      .tt-services-page .tt-services-hero h1,
      .tt-services-page .tt-cta-content h2 {
          font-size: 24px;
          margin-bottom: 20px;
      }

      .tt-services-page .tt-intro-content h2,
      .tt-services-page .tt-section-heading h2 {
          font-size: 24px;
      }

      .tt-services-page .tt-feature-grid,
      .tt-services-page .tt-process-wrapper {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .tt-services-page .tt-floating-card {
          position: static;
          margin-top: 20px;
      }

      .tt-services-page .tt-section-heading {
          margin-bottom: 10px;
      }

      .tt-services-page .tt-section-heading span {
          margin-bottom: 10px;
          font-size: 12px;
      }

      .tt-services-page .tt-service-card {
          padding: 10px;
          margin-bottom: 10px;
          border-radius: 10px;
      }

      .tt-services-page .tt-service-card .tt-icon {
          margin-bottom: 10px;
          border-radius: 10px;
      }

      .tt-services-page .tt-service-card h3 {
          font-size: 14px;
          margin-bottom: 10px;
      }

      .tt-services-page .tt-service-card p {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-services-page .tt-cta-content p {
          font-size: 12px;
          margin-bottom: 20px;
      }

      .tt-services-page .tt-btn-primary,
      .tt-services-page .tt-btn-outline {
          padding: 8px;
          font-size: 12px;
          height: 36px;
          border-radius: 5px;
      }

      .tt-services-page .tt-services-cta {
          padding: 70px 0;
      }

  }





  /* FAQ */

  .tt-faq-page-faq {
      min-height: auto;
  }

  .tt-faq-page-faq .tt-page-heading {
      text-align: center;
      max-width: 850px;
      margin: auto;
      margin-bottom: 60px;
  }

  .tt-faq-page-faq .tt-page-heading .tt-tag {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 30px;
      background: #eef2ff;
      color: var(--primary);
      margin-bottom: 20px;
  }

  .tt-faq-page-faq .tt-page-heading h1 {
      font-size: 58px;
      line-height: 1.2;
      margin-bottom: 20px;
  }

  .tt-faq-page-faq .tt-page-heading p {
      color: #666;
      line-height: 1.9;
      font-size: 17px;
  }

  .tt-faq-page-faq .tt-faq-search {
      max-width: 700px;
      margin: auto;
      margin-bottom: 60px;
      display: flex;
      gap: 15px;
  }

  .tt-faq-search input {
      flex: 1;
      height: 58px;
      border-radius: 12px;
      border: 1px solid #ddd;
      padding: 0 20px;
      outline: none;
      background: #fff;
  }

  .tt-faq-search button {
      height: 58px;
      padding: 0 28px;
      border: 0;
      border-radius: 12px;
      background: var(--primary);
      color: #fff;
  }

  .tt-builder-faq-sec {
      width: 100%;
      height: auto;
  }

  .tt-builder-faq-sec .tt-faq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .tt-builder-faq-sec .tt-faq-item {
      background: #fff;
      border-radius: 14px;
      border: 1px solid #e6e9f2;
      overflow: hidden;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .tt-builder-faq-sec .tt-faq-item:hover {
      border-color: #ccd7ff;
  }

  .tt-builder-faq-sec .tt-faq-question {
      width: 100%;
      background: #fff;
      border: 0;
      padding: 18px 20px;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 500;
      color: #111827;
  }

  .tt-builder-faq-sec .tt-faq-question.active {
      background: #f4f7ff;
      color: var(--primary);
  }

  .tt-builder-faq-sec .tt-faq-number {
      min-width: 30px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .tt-builder-faq-sec .tt-faq-question-text {
      flex: 1;
      line-height: 1.5;
  }

  .tt-builder-faq-sec .tt-faq-icon {
      width: 20px;
      height: 20px;
      color: var(--primary);
      transition: transform 0.25s ease;
      flex-shrink: 0;
  }

  .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-question.active .tt-faq-icon {
      transform: rotate(180deg);
  }

  .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-answer {
      background: #fff;
      border-top: 1px solid #edf1fb;
      padding: 16px 20px 18px;
      animation: slideDown 0.25s ease;
  }

  .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-answer p {
      margin: 0;
      color: #5f6b7f;
      line-height: 1.8;
  }

  .tt-faq-page-faq .tt-faq-sidebar {
      position: sticky;
      top: 20px;
  }

  .tt-faq-page-faq .tt-sidebar-card {
      background: #fff;
      border-radius: 18px;
      padding: 30px;
      border: 1px solid #ececec;
      margin-bottom: 25px;
  }

  .tt-faq-page-faq .tt-sidebar-card h3 {
      margin-bottom: 25px;
      font-size: 28px;
  }

  .tt-faq-page-faq .tt-category-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .tt-faq-page-faq .tt-category-list a {
      height: 54px;
      border-radius: 12px;
      background: #f7f8fc;
      display: flex;
      align-items: center;
      padding: 0 18px;
      text-decoration: none;
      color: #222;
      transition: 0.3s;
  }

  .tt-faq-page-faq .tt-category-list a:hover {
      background: var(--primary);
      color: #fff;
  }

  .tt-faq-page-faq .tt-contact-card {
      background: linear-gradient(135deg,
              var(--primary),
              #4f7cff);
      color: #fff;
  }

  .tt-faq-page-faq .tt-contact-card .tt-small-title {
      display: inline-block;
      margin-bottom: 12px;
      opacity: 0.8;
  }

  .tt-faq-page-faq .tt-contact-card p {
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.9;
      margin-bottom: 25px;
  }

  .tt-faq-page-faq .tt-btn-primary {
      height: 54px;
      padding: 0 24px;
      border-radius: 12px;
      background: #fff;
      color: var(--primary);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
  }

  @media (max-width: 991px) {

      .tt-faq-page-faq .tt-page-heading h1 {
          font-size: 42px;
      }

      .tt-builder-faq-sec .tt-faq-question-text {
          font-size: 13px;
      }

      .tt-faq-page-faq .tt-faq-sidebar {
          margin-top: 30px;
      }

      .tt-faq-page-faq .tt-btn-primary {
          font-size: 14px;
          white-space: nowrap;
      }

      .tt-faq-page-faq .tt-page-heading h1 {
          font-size: 28px;
      }

      .tt-faq-page-faq .tt-page-heading p {
          font-size: 14px;
      }

      .tt-faq-page-faq .tt-page-heading .tt-tag {
          font-size: 14px;
      }

      .tt-builder-faq-sec .tt-faq-question {
          padding: 10px;
      }

      .faq-property-list .tt-faq-item p {
          font-size: 11px;
          padding: 10px;
          line-height: 20px;
      }

      .tt-faq-list svg {
          font-size: 16px;
      }
  }

  @media (max-width: 767px) {
      .tt-faq-page-faq .tt-btn-primary {
          font-size: 12px;
          white-space: nowrap;
      }

      .tt-faq-page-faq .tt-page-heading h1 {
          font-size: 26px;
      }

      .tt-faq-page-faq .tt-faq-search {
          flex-direction: column;
      }

      .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-question {
          font-size: 14px;
          padding: 14px 12px;
          gap: 10px;
      }

      .tt-builder-faq-sec .tt-faq-question-text {
          font-size: 12px;
      }

      .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-number {
          min-width: 24px;
          width: 24px;
          height: 24px;
          font-size: 10px;
      }

      .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-answer {
          padding: 10px;
      }

      .tt-faq-page-faq .tt-builder-faq-sec .tt-faq-answer p {
          font-size: 11px;
          line-height: 1.7;
      }

      .tt-faq-page-faq .tt-sidebar-card {
          padding: 22px;
      }
  }


  /* ================== */
  /*     CONTACT US     */
  /* ================== */

  .tt-contact-page {
      min-height: 100vh;
  }

  .tt-contact-page .tt-page-heading {
      text-align: center;
      max-width: 850px;
      margin: auto;
      margin-bottom: 70px;
  }

  .tt-contact-page .tt-page-heading .tt-tag {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 30px;
      background: #eef2ff;
      color: var(--primary);
      margin-bottom: 20px;
  }

  .tt-contact-page .tt-page-heading h1 {
      font-size: 58px;
      margin-bottom: 20px;
      line-height: 1.2;
  }

  .tt-contact-page .tt-page-heading p {
      color: #666;
      line-height: 1.9;
      font-size: 17px;
  }

  .tt-contact-page .tt-contact-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      margin-bottom: 60px;
  }

  .tt-contact-page .tt-info-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      border: 1px solid #ececec;
      transition: 0.4s;
  }

  .tt-contact-page .tt-info-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  }

  .tt-contact-page .tt-info-card .tt-icon {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      background: #eef2ff;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 25px;
  }

  .tt-contact-page .tt-info-card h3 {
      margin-bottom: 12px;
  }

  .tt-contact-page .tt-info-card p {
      color: #666;
      line-height: 1.8;
      margin: 0;
  }

  .tt-contact-page .tt-contact-form-wrapper {
      background: #fff;
      border-radius: 20px;
      padding: 40px;
      border: 1px solid #ececec;
      height: 100%;
  }

  .tt-contact-form .alert-success {
      background: #22bb330d;
      padding: 11px 10px;
      border: 1px solid #22bb3326;
      border-radius: 5px;
      color: #22BB33;
      margin-bottom: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .tt-contact-page .tt-section-title span {
      color: var(--primary);
      display: inline-block;
      margin-bottom: 12px;
  }

  .tt-contact-page .tt-section-title h2 {
      font-size: 42px;
      margin-bottom: 35px;
  }

  .tt-contact-page .tt-input-group {
      margin-bottom: 15px;
  }

  .tt-contact-page .tt-input-group label {
      display: block;
      margin-bottom: 12px;
      font-weight: 500;
  }

  .contact-page .tt-input-group textarea {
      min-height: 160px;
  }

  .tt-contact-page .tt-input-group input,
  .tt-contact-page .tt-input-group textarea {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 14px;
      padding: 18px 20px;
      outline: none;
      background: #fff;
      transition: 0.3s;
  }

  .tt-contact-page .tt-input-group input:focus,
  .tt-contact-page .tt-input-group textarea:focus {
      border-color: var(--primary);
  }

  .tt-contact-page .tt-btn-primary {
      height: 58px;
      padding: 0 30px;
      border: 0;
      border-radius: 14px;
      background: var(--primary);
      color: #fff;
  }

  .tt-contact-page .tt-contact-image {
      position: relative;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
  }

  .tt-contact-page .tt-contact-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .tt-contact-page .tt-contact-image .tt-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
  }

  .tt-contact-page .tt-image-content {
      position: absolute;
      left: 40px;
      right: 40px;
      bottom: 40px;
      z-index: 2;
  }

  .tt-contact-page .tt-image-content span {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      backdrop-filter: blur(10px);
      margin-bottom: 20px;
  }

  .tt-contact-page .tt-image-content h3 {
      font-size: 42px;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 20px;
  }

  .tt-contact-page .tt-image-content p {
      color: #ddd;
      line-height: 1.9;
      margin-bottom: 25px;
  }

  .tt-contact-page .tt-btn-outline {
      height: 54px;
      padding: 0 28px;
      border-radius: 12px;
      border: 1px solid #fff;
      color: #fff;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
  }

  .tt-contact-page .tt-map-section {
      margin-top: 80px;
      border-radius: 20px;
      overflow: hidden;
  }

  .tt-contact-page .tt-map-section iframe {
      border: 0;
      display: block;
  }

  @media (max-width: 991px) {

      .tt-contact-page .tt-page-heading h1 {
          font-size: 42px;
      }

      .tt-contact-page .tt-contact-info-grid {
          grid-template-columns: 1fr;
          margin-bottom: 15px;
      }

      .tt-contact-page .tt-contact-image {
          min-height: 500px;
      }

      .tt-contact-page .tt-image-content h3 {
          font-size: 32px;
      }

      .tt-contact-page .tt-section-title h2 {
          margin-bottom: 15px;
      }

      .tt-contact-page .tt-info-card {
          padding: 15px;
          border-radius: 10px;
          display: flex;
          gap: 20px;
          font-size: 12px;
          align-items: center;
      }

      .tt-contact-page .tt-info-card .tt-icon {
          margin-bottom: 0;
      }

      .tt-contact-page .tt-page-heading {
          margin-bottom: 15px;
      }

      .tt-contact-page .tt-contact-image {
          min-height: 338px;
      }

      .tt-contact-page .tt-map-section {
          margin-top: 15px;
      }
  }

  @media (max-width: 767px) {

      .tt-contact-page .tt-page-heading h1 {
          font-size: 24px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-page-heading p {
          font-size: 12px;
      }

      .tt-contact-page .tt-contact-form-wrapper {
          padding: 10px;
      }

      .tt-contact-form .alert-success {
          font-size: 10px;
          padding: 5px 8px;

      }

      .tt-contact-form-wrapper {
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-section-title h2 {
          font-size: 30px;
      }

      .tt-contact-page .tt-image-content {
          left: 25px;
          right: 25px;
          bottom: 25px;
      }

      .tt-contact-page .tt-image-content h3 {
          font-size: 26px;
      }

      .tt-contact-page .tt-page-heading .tt-tag {
          padding: 8px 10px;
          margin-bottom: 20px;
          font-size: 14px;
      }

      .tt-contact-page .tt-page-heading {
          margin-bottom: 20px;
      }

      .tt-contact-page .tt-info-card .tt-icon {
          min-width: 40px;
          min-height: 40px;
          flex-shrink: 0;
          font-size: 14px;
          border-radius: 5px;
          margin-bottom: 0;
      }

      .tt-contact-page .tt-info-card {
          padding: 10px;
          border-radius: 10px;
          display: flex;
          gap: 10px;
          font-size: 12px;
          align-items: center;
      }

      .tt-contact-page .tt-info-card h3 {
          margin-bottom: 5px;
      }

      .tt-contact-page .tt-info-card p {
          font-size: 12px;
      }

      .tt-contact-page .tt-contact-info-grid {
          gap: 10px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-section-title span {
          margin-bottom: 10px;
          font-size: 12px;
      }

      .tt-contact-page .tt-section-title h2 {
          font-size: 24px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-input-group {
          margin-bottom: 5px;
      }

      .tt-contact-page .tt-input-group label {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-input-group input,
      .tt-contact-page .tt-input-group textarea {
          padding: 12px 10px;
          border-radius: 5px;
          font-size: 12px;
      }

      .tt-contact-page .tt-btn-primary {
          height: 36px;
          border-radius: 5px;
          font-size: 12px;
      }

      .tt-contact-page .tt-image-content span {
          padding: 8px 10px;
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-image-content p {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-contact-page .tt-btn-outline {
          padding: 8px 10px;
          height: 36px;
          font-size: 12px;
          border-radius: 5px;
      }

      .tt-contact-page .tt-contact-image {
          min-height: 338px;
      }

      .tt-contact-page .tt-map-section {
          margin-top: 10px;
          border-radius: 10px;
      }

  }





  /* REGISTER */

  .tt-register-page {
      background: linear-gradient(135deg, #f7f8fc, #eef2ff);
      padding: 50px 0;
      display: flex;
      align-items: center;
  }

  .tt-register-page .tt-register-wrapper {
      max-width: 1175px;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      margin: auto;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
  }

  .tt-register-page .tt-register-wrapper.login {
      max-width: 1200px;
  }

  .tt-register-page .tt-register-left {
      position: relative;
      padding: 45px;
      /* background: linear-gradient(135deg,
              var(--primary),
              #4d7cff); */
      background-image: url(../img/home/login.png);
      background-size: cover;
      background-position: right;
      color: #fff;
      display: flex;
      align-items: center;
  }

  .divider-register {
      height: 1.5px;
      width: 10%;
      background-color: var(--secondary);
      margin-top: 15px;
      opacity: 0.9;
  }

  .tt-rp-right .divider-register {
      width: 30%;
      opacity: 0.5;
  }

  .tt-rp-right span {
      text-transform: capitalize;
      opacity: 0.5;
  }

  .register-bottom-page-tag {
      font-size: 12px;
  }

  .tt-register-page .tt-register-left::before {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      top: -120px;
      right: -120px;
  }

  .tt-register-page .tt-register-left::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      bottom: -80px;
      left: -80px;
  }

  .tt-register-page .tt-register-left .tt-content {
      position: relative;
      z-index: 2;
      display: flex;
  }

  .highlight-rp {
      color: var(--secondary);
  }

  .tt-register-page .tt-register-left .tt-tag,
  .tt-register-page .tt-form-header .tt-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      padding: 0 16px;
      border-radius: 30px;
      font-size: 13px;
      margin-bottom: 16px;
  }

  .tt-register-page .tt-register-left .tt-tag {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
  }

  .tt-register-page .tt-register-left h1 {
      font-size: 30px;
      line-height: 1.2;
      margin-bottom: 18px;
  }

  .tt-register-page .tt-register-left p {
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.8;
      font-size: 14px;
      margin-bottom: 28px;
  }

  .tt-register-page .tt-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .tt-register-page .tt-feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
  }

  .tt-register-page .tt-feature-item .tt-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .tt-register-page .tt-feature-item .tt-icon-rp {
      width: 42px;
      height: 42px;
      border-radius: 100px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 18px;
  }

  .tt-register-page .tt-register-right {
      padding: 40px 45px;
  }

  .tt-register-page .tt-form-header {
      margin-bottom: 28px;
  }

  .tt-register-page .tt-form-header .tt-tag {
      background: #eef2ff;
      color: var(--primary);
  }

  .tt-register-page .tt-form-header h2 {
      font-size: 34px;
      margin-bottom: 8px;
  }

  .tt-register-page .tt-form-header p {
      color: #666;
      font-size: 14px;
  }

  .tt-register-page .tt-register-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
  }

  .tt-register-page .tt-input-group.full-width {
      grid-column: span 2;
  }

  .tt-register-page .tt-input-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
  }

  .tt-register-page .tt-input-wrapper {
      position: relative;
  }

  .tt-register-page .tt-login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      grid-column: span 2;
  }

  .tt-register-page .tt-input-icon {
      position: absolute;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      color: #888;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .tt-register-page .tt-input-wrapper input,
  .tt-register-page .tt-input-wrapper select {
      width: 100%;
      height: 54px;
      border-radius: 14px;
      border: 1px solid #ddd;
      /* background: rgba(255, 255, 255, 0.95); */
      padding: 0 18px 0 50px;
      outline: none;
      transition: 0.3s ease;
      font-size: 14px;
  }

  .tt-register-page .tt-input-wrapper input:focus,
  .tt-register-page .tt-input-wrapper select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(51, 102, 255, 0.06);
  }

  .tt-register-page .tt-mobile-group {
      display: flex;
      gap: 10px;
  }

  .tt-register-page .tt-mobile-group .tt-input-wrapper {
      flex: 1;
  }

  .tt-register-page .tt-input-icon svg {
      color: var(--primary);
  }

  .tt-register-page .tt-send-btn {
      min-width: 140px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(90deg, var(--primary), #4d7cff);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: 0.3s ease;
  }

  .tt-register-page .tt-send-btn:hover {
      background: linear-gradient(90deg, #1d3364, #1d4dd5);
      color: #fff;
  }

  .tt-register-page .tt-register-btn {
      width: 100%;
      height: 56px;
      border-radius: 14px;
      border: 0;
      background: linear-gradient(90deg, var(--primary), #4d7cff);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      transition: 0.3s ease;
  }

  .tt-register-page .tt-register-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(51, 102, 255, 0.2);
  }

  .tt-register-page .tt-bottom-text {
      text-align: center;
      font-size: 14px;
      color: #666;
  }

  .tt-register-page .tt-bottom-text a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      margin-left: 6px;
  }

  .tt-register-page .tt-login-form {
      grid-template-columns: 1fr;
  }

  .tt-register-page .tt-login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: -5px;
  }

  .tt-register-page .tt-login-options .tt-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .tt-register-page .tt-login-options .tt-checkbox input {
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
  }

  .tt-register-page .tt-login-options .tt-checkbox label {
      margin: 0;
      font-size: 14px;
      color: #666;
      cursor: pointer;
  }

  .tt-register-page .tt-login-options a {
      color: var(--primary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
  }

  .tt-register-page .tt-register-wrapper.login {
      grid-template-columns: 0.9fr 1.1fr;
      max-width: 1150px;
  }

  .tt-register-page .tt-login-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
  }

  .tt-register-page .tt-login-form .tt-input-group {
      width: 100%;
  }

  .tt-register-page .tt-login-form .tt-input-group.full-width {
      grid-column: unset;
  }

  .tt-register-page .tt-login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      width: 100%;
      margin-top: 4px;
  }

  .tt-register-page .tt-login-options .tt-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .tt-register-page .tt-login-options .tt-checkbox input {
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
      flex-shrink: 0;
  }

  .tt-register-page .tt-login-options .tt-checkbox label {
      margin: 0;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      line-height: 1;
  }

  .tt-register-page .tt-login-options a {
      color: var(--primary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
  }

  .tt-register-page .tt-login-form .tt-register-btn {
      width: 100%;
      height: 54px;
      border-radius: 14px;
      margin-top: 4px;
  }

  .tt-register-page .tt-login-form .tt-bottom-text {
      text-align: center;
      font-size: 14px;
      line-height: 1.6;
      margin-top: 4px;
  }

  .tt-register-page .tt-login-form .tt-bottom-text a {
      display: inline-block;
      margin-left: 5px;
  }


  .tt-register-page .tt-register-left .tt-tag-rp {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
  }

  .register-title-property {
      margin-top: 15px !important;
      font-size: 30px;
      font-weight: 600;
  }

  .mobile-header-logo,
  .tt-mobile-bottom {
      display: none;
  }

  .tt-signup-mobile {
      display: none;
  }


  @media (max-width: 991px) {

      .tt-register-page {
          padding: 20px 0;
      }

      .tt-register-page .tt-register-wrapper {
          grid-template-columns: 1fr;
          border-radius: 18px;
      }

      .tt-register-page .tt-register-left {
          padding: 30px;
      }

      .tt-register-page .tt-register-right {
          padding: 30px;
      }

      .tt-register-page .tt-register-left h1 {
          font-size: 30px;
      }

      .tt-register-page .tt-register-left p {
          font-size: 13px;
          margin-bottom: 20px;
      }

      .tt-register-page .tt-features {
          gap: 12px;
      }

      .tt-register-page .tt-feature-item {
          font-size: 13px;
      }

      .tt-register-page .tt-feature-item .tt-icon {
          width: 38px;
          height: 38px;
      }

      .tt-register-page .tt-form-header {
          margin-bottom: 20px;
      }

      .tt-register-page .tt-form-header h2 {
          font-size: 28px;
      }

      .tt-register-page .tt-form-header p {
          font-size: 13px;
      }

      .tt-register-page .tt-register-form {
          gap: 14px;
      }

      .tt-register-page .tt-input-group label {
          font-size: 13px;
          margin-bottom: 6px;
      }

      .tt-register-page .tt-input-wrapper input,
      .tt-register-page .tt-input-wrapper select {
          height: 50px;
          font-size: 13px;
          padding: 0 16px 0 46px;
      }

      .tt-register-page .tt-input-icon {
          left: 14px;
      }

      .tt-register-page .tt-register-btn {
          height: 52px;
          font-size: 14px;
      }

      .tt-register-page .tt-send-btn {
          min-width: 120px;
          font-size: 12px;
      }

      .tt-register-page .tt-register-wrapper.login {
          grid-template-columns: 1fr;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-left {
          padding: 30px;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-right {
          padding: 30px;
      }

      .tt-register-page .tt-feature-item .tt-icon-rp {
          width: 38px;
          height: 38px;
          font-size: 16px;
      }
  }

  @media (max-width: 767px) {

      .tt-register-page {
          padding: 10px 0;
          min-height: auto;
          background: none;
      }

      .tt-register-page .tt-features {
          gap: 5px;
      }

      .tt-register-page .container {
          padding: 0 10px;
      }

      .tt-register-page .tt-register-wrapper {
          border-radius: 0px;
      }

      .tt-register-page .tt-register-left {
          display: none;
      }

      .tt-register-page .tt-register-right {
          padding: 22px 18px;
      }

      .tt-register-page .tt-register-left h1,
      .tt-register-page .tt-form-header h2 {
          font-size: 22px;
          line-height: 1.3;
      }

      .tt-register-page .tt-register-left p {
          font-size: 12px;
          line-height: 1.5;
          margin-bottom: 12px;
      }

      .tt-register-page .tt-tag {
          height: 34px !important;
          padding: 0 14px !important;
          font-size: 12px !important;
          margin-bottom: 12px !important;
      }

      .tt-register-page .tt-register-form {
          grid-template-columns: 1fr;
          gap: 12px;
      }

      .tt-register-page .tt-input-group.full-width {
          grid-column: span 1;
      }

      .tt-register-page .tt-input-group label {
          font-size: 12px;
      }

      .tt-register-page .tt-input-wrapper input,
      .tt-register-page .tt-input-wrapper select {
          height: 48px;
          border-radius: 12px;
          font-size: 13px;
          padding: 0 14px 0 42px;
      }

      .tt-register-page .tt-input-icon svg {
          width: 18px;
          height: 18px;
      }

      .tt-register-page .tt-mobile-group {
          flex-direction: column;
          gap: 10px;
      }

      .tt-register-page .tt-send-btn {
          width: 100%;
          height: 48px;
          border-radius: 12px;
      }

      .tt-register-page .tt-register-btn {
          height: 50px;
          border-radius: 12px;
          font-size: 14px;
      }

      .tt-register-page .tt-bottom-text {
          font-size: 13px;
      }

      .tt-register-page .tt-login-options {
          align-items: flex-start;
          gap: 10px;
          margin-top: 0;
      }

      .tt-register-page .tt-login-options .tt-checkbox label,
      .tt-register-page .tt-login-options a {
          font-size: 13px;
      }

      .tt-register-page .tt-register-wrapper.login {
          border-radius: 0px;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-left,
      .tt-register-page .tt-register-wrapper.login .tt-register-right {
          padding: 22px 18px;
      }

      .tt-register-page .tt-login-form {
          gap: 14px;
      }

      .tt-register-page .tt-login-options {
          align-items: flex-start;
          gap: 12px;
      }

      .tt-register-page .tt-login-options a,
      .tt-register-page .tt-login-options .tt-checkbox label {
          font-size: 13px;
      }

      .tt-register-page .tt-login-form .tt-register-btn {
          height: 50px;
          font-size: 14px;
      }

      .tt-register-page .tt-login-form .tt-bottom-text {
          font-size: 13px;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-left,
      .tt-register-page .tt-register-right .tt-form-header .tt-tag {
          display: none !important;
      }

      .mobile-header-logo {
          display: block !important;
          width: 150px !important;
          margin-bottom: 20px;
      }

      .tt-mobile-bottom {
          display: block !important;
          position: relative;
          width: 100%;
          grid-column: 1 / -1;
          margin-top: 22px;
          border-radius: 16px;
          overflow: hidden;
      }

      .tt-mobile-bg-artwork {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: right bottom;
          pointer-events: none;
          user-select: none;
          z-index: 1;
      }

      .tt-mobile-content-wrapper {
          position: relative;
          z-index: 2;
          padding: 16px 16px 20px 16px;
          display: flex;
          flex-direction: column;
          min-height: 180px;
          justify-content: space-between;
      }

      .tt-mobile-bottom .mobile-login-text {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: #556987;
          font-size: 12.5px;
          font-weight: 500;
          margin-bottom: 20px;
          letter-spacing: -0.01em;
      }

      .tt-mobile-bottom .mobile-login-text svg {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
      }

      .tt-mobile-bottom .tt-login-text-bottom {
          max-width: 58%;
      }

      .tt-promo-slide-item {
          min-height: 52px;
          animation: ttSlideFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      @keyframes ttSlideFadeIn {
          from {
              opacity: 0;
              transform: translateY(5px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .tt-mobile-bottom .text-heading-rp {
          font-size: clamp(16px, 4.4vw, 22px);
          font-weight: 800;
          color: #003b95;
          margin: 0 0 6px 0;
          line-height: 1.25;
          letter-spacing: -0.02em;
          white-space: nowrap;
      }

      .tt-mobile-bottom .tt-login-text-bottom p {
          font-size: clamp(11.5px, 2.9vw, 13px);
          color: #64748b;
          margin: 0 0 14px 0;
          line-height: 1.35;
          font-weight: 400;
          max-width: 160px;
      }

      .tt-mobile-slider-dots {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 4px;
      }

      .tt-mobile-slider-dots .dot-pill {
          width: 32px;
          height: 7.5px;
          border-radius: 999px;
          background-color: #003b95;
          display: inline-block;
          cursor: pointer;
          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .tt-mobile-slider-dots .dot-circle {
          width: 7.5px;
          height: 7.5px;
          border-radius: 50%;
          background-color: #cbd5e1;
          display: inline-block;
          cursor: pointer;
          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .tt-mobile-slider-dots .dot-circle:hover {
          background-color: #94a3b8;
      }

      .tt-signup-mobile {
          background: #f5f8ff;
          padding: 15px;
          border-radius: 10px;
          display: block !important;
      }

      .tt-signup-badge {
          width: 20px;
          height: 20px;
          color: var(--primary);
          background: #fff !important;
          border-radius: 100%;
      }

      .tt-signup-text {
          font-size: 12px;
          font-weight: 600;
          color: #777;
          line-height: 1;
          width: 80px;
      }

      .tt-signup-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-right: 1px solid #999;
          padding-right: 10px;
      }

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

  @media (max-width: 480px) {

      .tt-register-page .tt-register-left,
      .tt-register-page .tt-register-right {
          padding: 18px 15px;
      }

      .tt-register-page .tt-register-left h1,
      .tt-register-page .tt-form-header h2 {
          font-size: 21px;
      }

      .tt-register-page .tt-feature-item {
          gap: 10px;
      }

      .tt-register-page .tt-feature-item .tt-icon {
          width: 34px;
          height: 34px;
          border-radius: 10px;
      }

      .tt-register-page .tt-feature-item .tt-icon-rp {
          width: 34px;
          height: 34px;
          font-size: 14px;
      }

      .tt-register-page .tt-feature-item span {
          font-size: 12px;
      }

      .tt-register-page .tt-input-wrapper input,
      .tt-register-page .tt-input-wrapper select {
          height: 46px;
      }

      .tt-register-page .tt-register-btn,
      .tt-register-page .tt-send-btn {
          height: 46px;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-left,
      .tt-register-page .tt-register-right .tt-form-header .tt-tag {
          display: none;
      }

      .tt-register-page .tt-register-wrapper.login .tt-register-right {
          padding: 14px 19px;
      }

      .tt-register-page .tt-login-form .tt-register-btn {
          height: 48px;
      }

      .tt-register-page .tt-login-options {
          gap: 10px;
      }

      .tt-register-page .tt-form-header {
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
      }

      .tt-register-page .tt-register-right .tt-form-header h2 {
          font-weight: 600;
      }

      .mobile-header-logo {
          display: block !important;
          width: 150px !important;
          margin-bottom: 20px;
      }

      .tt-register-page .form-group p {
          font-size: 12px !important;
      }

      .tt-register-page .tt-register-right {
          scroll-margin-top: 10px;
      }

      .tt-mobile-bottom {
          display: block !important;
          position: relative;
          width: 100%;
          grid-column: 1 / -1;
          margin-top: 22px;
          border-radius: 0px;
          overflow: hidden;
      }

      .tt-mobile-bg-artwork {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: right bottom;
          pointer-events: none;
          user-select: none;
          z-index: 1;
      }

      .tt-mobile-content-wrapper {
          position: relative;
          z-index: 2;
          padding: 16px 16px 20px 16px;
          display: flex;
          flex-direction: column;
          min-height: 180px;
          justify-content: space-between;
      }

      .tt-mobile-bottom .mobile-login-text {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: #556987;
          font-size: 12.5px;
          font-weight: 500;
          margin-bottom: 20px;
          letter-spacing: -0.01em;
      }

      .tt-mobile-bottom .mobile-login-text svg {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
      }

      .tt-mobile-bottom .tt-login-text-bottom {
          max-width: 58%;
      }

      .tt-promo-slide-item {
          min-height: 52px;
          animation: ttSlideFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      .tt-mobile-bottom .text-heading-rp {
          font-size: clamp(16px, 4.4vw, 22px);
          font-weight: 800;
          color: #003b95;
          margin: 0 0 6px 0;
          line-height: 1.25;
          letter-spacing: -0.02em;
          white-space: nowrap;
      }

      .tt-mobile-bottom .tt-login-text-bottom p {
          font-size: clamp(11.5px, 2.9vw, 13px);
          color: #64748b;
          margin: 0 0 14px 0;
          line-height: 1.35;
          font-weight: 400;
          max-width: 160px;
      }

      .tt-mobile-slider-dots {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 4px;
      }

      .tt-mobile-slider-dots .dot-pill {
          width: 32px;
          height: 7.5px;
          border-radius: 999px;
          background-color: #003b95;
          display: inline-block;
          cursor: pointer;
          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .tt-mobile-slider-dots .dot-circle {
          width: 7.5px;
          height: 7.5px;
          border-radius: 50%;
          background-color: #c4d3e5;
          display: inline-block;
          cursor: pointer;
          transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .tt-mobile-slider-dots .dot-circle:hover {
          background-color: #94a3b8;
      }
  }





  /* ======================================= */
  /*     POST PROPERTY REQUIREMENT SECTION   */
  /* ======================================= */

  .tt-postrequ-main-container {
      background-color: #f8fafc;
      min-height: 100vh;
      padding: 60px 20px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      font-family: var(--font-poppins), sans-serif;
  }

  .tt-postrequ-main-container .tt-postrequ-wrapper {
      width: 100%;
      /* max-width: 1200px; */
      margin: 0 auto;
  }

  .tt-postrequ-main-container .tt-postrequ-header {
      text-align: left;
      margin-bottom: 48px;
      padding: 0 15px;
      margin-top: 50px;
  }

  .tt-postrequ-main-container .tt-postrequ-title {
      color: #2d4ea2;
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.25;
  }

  .tt-postrequ-main-container .tt-postrequ-subtitle {
      color: #4b5563;
      font-size: 16px;
      font-weight: 400;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.5;
  }

  /* 2. Main Content Grid Layout */
  .tt-postrequ-main-container .tt-postrequ-grid {
      display: grid;
      gap: 40px;
      align-items: start;
  }

  /* Left Column: How it Works */
  .tt-postrequ-main-container .tt-postrequ-guide-col {
      padding-right: 20px;
  }

  .tt-postrequ-main-container .tt-postrequ-guide-title {
      color: #1e293b;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 10px;
  }

  .tt-postrequ-main-container .tt-postrequ-guide-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 3px;
      background-color: #2d4ea2;
      border-radius: 2px;
  }

  .tt-postrequ-main-container .tt-postrequ-steps {
      display: flex;
      flex-direction: column;
      gap: 32px;
      position: sticky;
      top: 0;
  }

  .tt-postrequ-main-container .tt-postrequ-step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
  }

  .tt-postrequ-main-container .tt-postrequ-step-number-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .tt-postrequ-main-container .tt-postrequ-step-number {
      position: absolute;
      top: -8px;
      left: -8px;
      background-color: #2d4ea2;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #f8fafc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 2;
  }

  .tt-postrequ-main-container .tt-postrequ-step-icon {
      width: 56px;
      height: 56px;
      background-color: var(--secondary);
      border: 1px solid #e2e8f0;
      color: #2d4ea2;
      font-size: 20px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
  }

  .tt-postrequ-main-container .tt-postrequ-step {
      transition: 0.3s ease-in;
  }

  .tt-postrequ-main-container .tt-postrequ-step:hover {
      transform: translateY(-4px);
  }

  .tt-postrequ-main-container .tt-postrequ-step-icon:hover {
      transform: translateY(-4px);
  }


  .tt-postrequ-main-container .tt-postrequ-step-content h3 {
      color: #1e293b;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
  }

  .tt-postrequ-main-container .tt-postrequ-step-content p {
      color: #64748b;
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
  }

  .tt-postrequ-main-container .tt-postrequ-card {
      background-color: #ffffff;
      border-radius: 16px;
      padding: 36px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(226, 232, 240, 0.8);
  }

  .tt-postrequ-main-container .tt-postrequ-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

  .tt-postrequ-main-container .tt-postrequ-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .tt-postrequ-main-container .tt-postrequ-form-label {
      color: #334155;
      font-size: 14px;
      font-weight: 600;
  }

  .tt-postrequ-main-container .tt-postrequ-pills {
      display: flex;
      gap: 12px;
  }

  .tt-postrequ-main-container .tt-postrequ-pill-label {
      flex: 1;
      text-align: center;
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
  }

  .tt-postrequ-main-container .tt-postrequ-pill-label:hover {
      border-color: #cbd5e1;
      color: #334155;
  }

  .tt-postrequ-main-container .tt-postrequ-pill-label.active {
      background-color: #2d4ea2;
      border-color: #2d4ea2;
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 4px 6px -1px rgba(45, 78, 162, 0.2);
  }

  .tt-postrequ-main-container .tt-postrequ-hidden-radio {
      display: none;
  }

  .tt-postrequ-main-container .tt-postrequ-select-wrapper {
      position: relative;
      display: flex;
      align-items: center;
  }

  .tt-postrequ-main-container .tt-postrequ-select {
      width: 100%;
      height: 48px;
      background-color: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 0 16px;
      font-size: 14px;
      color: #1e293b;
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition: all 0.2s ease;
  }

  .tt-postrequ-main-container .tt-postrequ-select:focus {
      border-color: #2d4ea2;
      box-shadow: 0 0 0 3px rgba(45, 78, 162, 0.1);
  }

  .tt-postrequ-main-container .tt-postrequ-select-chevron {
      position: absolute;
      right: 16px;
      pointer-events: none;
      color: #64748b;
      font-size: 12px;
  }

  .tt-postrequ-main-container .tt-postrequ-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .tt-postrequ-main-container .tt-postrequ-area-wrapper {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 16px;
      align-items: center;
  }

  .tt-postrequ-main-container .tt-postrequ-unit-selector {
      position: relative;
      display: flex;
      align-items: center;
  }

  .tt-postrequ-main-container .tt-postrequ-unit-select {
      width: 100%;
      height: 48px;
      background-color: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 14px;
      color: #475569;
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      font-weight: 500;
  }

  .tt-postrequ-main-container .tt-postrequ-unit-chevron {
      position: absolute;
      right: 12px;
      pointer-events: none;
      color: #64748b;
      font-size: 10px;
  }

  .tt-postrequ-main-container .tt-postrequ-area-inputs {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .tt-postrequ-main-container .tt-postrequ-area-separator {
      color: #64748b;
      font-size: 14px;
  }

  .tt-postrequ-main-container .tt-postrequ-input-text {
      width: 100%;
      height: 48px;
      background-color: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 0 16px;
      font-size: 14px;
      color: #1e293b;
      outline: none;
      transition: all 0.2s ease;
  }

  .tt-postrequ-main-container .tt-postrequ-input-text::placeholder {
      color: #94a3b8;
  }

  .tt-postrequ-main-container .tt-postrequ-input-text:focus {
      border-color: #2d4ea2;
      box-shadow: 0 0 0 3px rgba(45, 78, 162, 0.1);
  }

  .tt-postrequ-main-container .tt-postrequ-input-icon-wrapper {
      position: relative;
      display: flex;
      align-items: center;
  }

  .tt-postrequ-main-container .tt-postrequ-input-icon {
      position: absolute;
      left: 16px;
      color: #64748b;
      font-size: 16px;
  }

  .tt-postrequ-main-container .tt-postrequ-input-text.has-icon {
      padding-left: 44px;
  }

  /* Divider Line */
  .tt-postrequ-main-container .tt-postrequ-divider {
      display: flex;
      align-items: center;
      text-align: center;
      margin: 12px 0;
  }

  .tt-postrequ-main-container .tt-postrequ-divider::before,
  .tt-postrequ-main-container .tt-postrequ-divider::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid #e2e8f0;
  }

  .tt-postrequ-main-container .tt-postrequ-divider-text {
      padding: 0 16px;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
  }

  .tt-postrequ-main-container .tt-postrequ-phone-group {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 12px;
  }

  .tt-postrequ-main-container .tt-postrequ-country-select-wrapper {
      position: relative;
      display: flex;
      align-items: center;
  }

  .tt-postrequ-main-container .tt-postrequ-country-select {
      width: 100%;
      height: 48px;
      background-color: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 13px;
      color: #475569;
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      font-weight: 500;
  }

  .tt-postrequ-main-container .tt-postrequ-country-chevron {
      position: absolute;
      right: 12px;
      pointer-events: none;
      color: #64748b;
      font-size: 10px;
  }


  .tt-postrequ-main-container .tt-postrequ-submit-btn {
      background-color: #2d4ea2;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      height: 52px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 6px -1px rgba(45, 78, 162, 0.2), 0 2px 4px -1px rgba(45, 78, 162, 0.1);
      margin-top: 8px;
  }

  .tt-postrequ-main-container .tt-postrequ-submit-btn:hover {
      background-color: #1e3a8a;
      box-shadow: 0 10px 15px -3px rgba(45, 78, 162, 0.3), 0 4px 6px -2px rgba(45, 78, 162, 0.15);
      transform: translateY(-1px);
  }

  .tt-postrequ-main-container .tt-postrequ-submit-btn:active {
      transform: translateY(0);
      box-shadow: 0 4px 6px -1px rgba(45, 78, 162, 0.2);
  }

  /* ======================================= */
  /*         RESPONSIVE MEDIA QUERIES        */
  /* ======================================= */


  @media (min-width: 768px) and (max-width: 1024px) {

      .tt-postrequ-main-container .tt-postrequ-guide-col {
          padding-right: 0;
      }

      .tt-postrequ-main-container .tt-postrequ-header {
          margin-bottom: 30px;
      }

      .tt-postrequ-main-container {
          padding: 30px 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-steps {
          display: flex;
          flex-wrap: wrap;
          gap: 24px;
      }

      .tt-postrequ-main-container .tt-postrequ-steps.row {
          margin-left: 0px;
          margin-right: 0px;
      }

      .tt-postrequ-main-container .tt-postrequ-steps.row>.col-12,
      .tt-postrequ-main-container .tt-postrequ-steps.row>.col-md-4 {
          padding-left: 8px;
          padding-right: 8px;
      }

      .tt-postrequ-main-container .tt-postrequ-step-number-wrapper {
          margin-bottom: 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-step-number {
          left: 50%;
          transform: translateX(12px);
      }

      .tt-postrequ-main-container .tt-postrequ-card {
          padding: 32px;
      }

      .tt-postrequ-main-container .tt-postrequ-main-container {
          padding: 50px 20px;
      }
  }

  @media (max-width: 767px) {
      .tt-postrequ-main-container {
          padding: 0px 0px;
      }

      .tt-postrequ-main-container .tt-postrequ-header {
          margin-bottom: 32px;
      }

      .tt-postrequ-main-container .tt-postrequ-title {
          font-size: 24px;
      }

      .tt-postrequ-main-container .tt-postrequ-subtitle,
      .tt-postrequ-main-container .tt-postrequ-form-label {
          font-size: 13px;
      }

      .tt-postrequ-main-container .tt-postrequ-divider-text {
          font-size: 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-form {
          gap: 15px;
      }

      .tt-postrequ-main-container .tt-postrequ-select,
      .tt-postrequ-main-container .tt-postrequ-unit-select,
      .tt-postrequ-main-container .tt-postrequ-input-text,
      .tt-postrequ-main-container .tt-postrequ-country-select {
          height: 36px;
          font-size: 13px;
      }

      .tt-postrequ-main-container .tt-postrequ-submit-btn {
          height: 36px;
          font-size: 13px;
      }


      .tt-postrequ-main-container .tt-postrequ-grid {
          grid-template-columns: 1fr;
          gap: 36px;
      }

      .tt-postrequ-main-container .tt-postrequ-guide-col {
          order: 1;
          margin-bottom: 20px;
      }

      .tt-postrequ-main-container .tt-postrequ-form-col {
          order: 2;
      }

      .tt-postrequ-main-container .tt-postrequ-steps {
          gap: 24px;
          align-items: center;
      }

      .tt-postrequ-main-container .tt-postrequ-step {
          gap: 16px;
          align-items: center;
      }

      .tt-postrequ-main-container .tt-postrequ-step-icon {
          width: 40px;
          height: 40px;
          font-size: 14px;
      }

      .tt-postrequ-main-container .tt-postrequ-step-content h3 {
          font-size: 14px;
      }

      .tt-postrequ-main-container .tt-postrequ-step-content p {
          font-size: 13px;
      }

      .tt-postrequ-main-container .tt-postrequ-card {
          padding: 24px 16px;
          border-radius: 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-pills {
          gap: 8px;
      }

      .tt-postrequ-main-container .tt-postrequ-pill-label {
          padding: 8px 12px;
          font-size: 13px;
      }

      .tt-postrequ-main-container .tt-postrequ-row-2col {
          grid-template-columns: 1fr;
          gap: 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-area-wrapper {
          grid-template-columns: 1fr;
          gap: 12px;
      }

      .tt-postrequ-main-container .tt-postrequ-phone-group {
          grid-template-columns: 90px 1fr;
          gap: 8px;
      }

      .requirement-subheading {
          font-size: 11px !important;
          margin-top: 0px !important;
      }

      .post-new-req-button {
          font-size: 11px !important;
      }

      .req-submission {
          bottom: auto !important;
          top: 16px !important;
          right: 12px !important;
          left: 12px !important;
          min-width: unset !important;
          max-width: unset !important;
          width: calc(100% - 24px) !important;
      }
  }

  .req-submission {
      bottom: 28px;
      right: 24px;
      min-width: 300px;
      max-width: 380px;
  }

  .tt-skeleton-card {
      pointer-events: none;
      animation: tt-shimmer 1.4s ease-in-out infinite;
  }

  .tt-skeleton-card .tt-listing-image,
  .tt-skeleton-card .tt-listing-content>div,
  .tt-skeleton-card .tt-listing-price>div {
      background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important;
      background-size: 200% 100% !important;
      animation: tt-shimmer 1.4s ease-in-out infinite !important;
  }

  @keyframes tt-shimmer {
      0% {
          background-position: 200% 0;
      }

      100% {
          background-position: -200% 0;
      }
  }

  /* PRIVACY POLICY */

  .privacy-policy p {
      margin-bottom: 10px;
  }

  .privacy-policy h2 {
      font-size: 50px;
      font-weight: 600;
      padding: 40px;
      text-align: center;
      color: var(--primary);
  }

  .privacy-policy section {
      padding: 20px 0px;
  }

  .privacy-policy h3 {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 20px;
  }

  .privacy-policy li {
      font-size: 15px;
      list-style-type: disc;
      margin: 0 0 15px 40px;
  }

  .privacy-policy ul {
      margin-top: 20px;
  }

  .privacy-policy .table-of-content h3 {
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 20px;
      color: var(--secondary);
  }

  .privacy-policy .table-of-content li {
      list-style-type: square;
      color: #777;
      padding: 10px 0px 10px 5px;
      border-bottom: 1px solid #d3d3d3;
      padding-bottom: 20px;
      font-size: 20px;
      transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
  }

  .privacy-policy .table-of-content li a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease-in-out;
  }

  .privacy-policy .table-of-content li:hover,
  .privacy-policy .table-of-content li:hover a {
      font-weight: 600;
      color: #000;
  }

  .privacy-policy .table-of-content li.toc-active,
  .privacy-policy .table-of-content li.toc-active a {
      color: #000;
      font-weight: 700;
  }

  .privacy-policy .table-of-content {
      position: sticky;
      top: 20px;
  }

  .privacy-policy section[id] {
      scroll-margin-top: 30px;
  }

  @media(max-width: 1024px) {
      .privacy-policy h2 {
          padding: 15px;
      }
  }

  @media (max-width:767px) {
      .privacy-policy .table-of-content {
          display: none;
      }

      .privacy-policy p {
          margin-bottom: 6px;
          font-size: 14px;
      }

      .privacy-policy h2 {
          font-size: 26px;
          padding: 10px;
      }

      .privacy-policy section {
          padding: 10px 0px;
      }

      .privacy-policy h3 {
          font-size: 18px;
          margin-bottom: 10px;
      }

      .privacy-policy li {
          font-size: 14px;
          margin: 0 0 8px 20px;
      }

      .privacy-policy ul {
          margin-top: 10px;
      }

      .privacy-policy .table-of-content h3 {
          font-size: 15px;
          margin-bottom: 10px;
      }

      .privacy-policy .table-of-content li {
          padding-bottom: 10px;
          font-size: 13px;
      }

      .privacy-policy .privacy-policy-section {
          padding: 15px;
          border-radius: 10px;
          box-shadow: 0px 10px 12px 2px #959595;
      }
  }

  /* ============================= */
  /*      LOAN / MY PROPERTIES     */
  /* ============================= */

  .loan-section .tt-property-image,
  .property-add-success-page .tt-property-image {
      width: 190px;
      height: 130px;
      object-fit: cover;

  }

  .loan-section .tt-property-image img,
  .property-add-success-page .tt-property-image img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
  }

  .tt-product-details .property-id {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      flex-wrap: nowrap;
  }

  .loan-section .tt-product-details .property-id p,
  .property-add-success-page .tt-product-details .property-id p {
      font-size: 14px;
      font-weight: 500;
      color: var(--primary);
      text-transform: uppercase;
  }

  .tt-product-details .property-id .edit {
      font-size: 14px;
      color: var(--primary);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
  }


  .tt-product-details h4 {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
  }

  .loan-section .tt-product-details p,
  .property-add-success-page .tt-product-details p {
      font-size: 13px;
      color: #777;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
  }

  .tt-product-details .bedrooms,
  .tt-product-details .bathrooms,
  .tt-product-details .sqft {
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 5px;
  }

  .tt-product-details .sqft i,
  .tt-product-details .bedrooms i,
  .tt-product-details .bathrooms i {
      font-size: 13px;
      color: var(--primary);
  }


  .tt-product-details .views-enquiries {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .plan-section {
      border-radius: 6px;
      background: #ffc90717;
      padding: 10px;
      margin-top: 10px;
  }

  .plan-section .current-plan {
      display: flex;
      gap: 20px;
      font-size: 13px;
      align-items: center;
  }

  .plan-section .current-plan p {
      font-size: 13px;
      color: #fff;
      background: var(--primary);
      border-radius: 50px;
      padding: 0px 15px;
  }

  .plan-section .upgrade-plan {
      display: flex;
      gap: 20px;
      align-items: center;
      font-size: 13px;
  }

  .plan-section .upgrade-plan p {
      font-size: 13px;
  }

  .plan-section .upgrade-plan button {
      background: var(--secondary);
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 15px;
      border-radius: 5px;
  }

  .plan-section {
      display: flex;
      justify-content: space-between;
  }

  .tt-property-section-details {
      display: flex;
      align-items: center;
      gap: 20px;
  }

  .loan-section .tt-property-section,
  .property-add-success-page .tt-property-section {
      padding: 15px;
      border-radius: 20px;
      border: 1px solid #eee;
      box-shadow: 0 2px 10px 1px #eee;
      background: #fff;
  }

  .loan-section .tt-product-details,
  .property-add-success-page .tt-product-details {
      flex: 1;
      min-width: 0;
  }

  .breadcrumb-area-loan-section .breadcrumb-content li a {
      color: #fff;
  }

  .breadcrumb-area-loan-section .breadcrumb-content li i {
      color: #fff !important;
  }

  .breadcrumb-area-loan-section .fa-angles-right {
      color: #fff;
  }

  .breadcrumb-area-loan-section .breadcrumb-content li {
      color: var(--secondary)
  }

  .breadcrumb-area-loan-section .breadcrumb-content {
      background: linear-gradient(45deg, #3553a6 0%, #12214d 100%) !important;
      border-radius: 10px !important;
  }

  .breadcrumb-area-loan-section .breadcrumb-content h2 {
      font-size: 26px;
      font-weight: 500;
      color: #d1d5db;
      margin-top: 20px;
  }

  .loan-section .padding-main {
      padding: 20px 0 !important;
  }

  /* LOAN APPLICATION */

  .tt-loan-application-form h3 {
      font-size: 20px;
      font-weight: 500;
      border-left: 4px solid var(--primary);
      padding-left: 10px;
      margin: 30px 0 10px;
  }

  .tt-loan-application-form p {
      font-size: 14px;
      color: #777;
      margin-bottom: 20px;
  }

  .tt-application-form-details h4 {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 20px;
      border-bottom: 2px dotted #d3d3d3;
      padding-bottom: 20px;
  }

  .tt-application-form-details .tt-loan-application {
      display: flex;
      align-items: center;
  }

  .tt-application-form-details .tt-loan-application {
      font-size: 14px;
      margin-bottom: 20px;
  }

  .tt-application-form-details .tt-loan-application span {
      color: red;
  }

  .tt-application-form-details input {
      border: 1px solid #d3d3d3;
      border-radius: 6px;
      padding: 15px 10px;
      margin-bottom: 20px;
      font-size: 14px;
      width: 100%;

  }

  .tt-application-form-details input:focus {
      outline: none;
      border-color: var(--primary);
  }

  .tt-application-form-details select {
      font-size: 14px;
      color: #000;
      border: 1px solid #d3d3d3;
      padding: 15px 10px;
      border-radius: 6px;
      width: 100%;
  }

  .tt-application-form-details select:focus {
      outline: none;
      border-color: var(--primary);
  }

  .tt-loan-submit-button button {
      font-size: 16px;
      padding: 15px 0;
      width: 100%;
      text-align: center;
      background: var(--primary);
      margin-top: 30px;
      border-radius: 6px;
      color: #fff;
  }

  .tt-loan-submit-button button:hover {
      background: #000;
      color: #fff;
  }

  .tt-application-form-details {
      border: 1px solid #eee;
      box-shadow: 0 2px 10px #eee;
      padding: 20px;
      border-radius: 20px;
  }

  .tt-emi-calculator h3 {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 10px;
      border-left: 4px solid var(--primary);
      padding-left: 10px;
      margin-top: 10px;
  }

  .tt-emi-calculator {
      padding: 20px;
      background-color: #f5f8ff;
      margin-top: 20px;
      border-radius: 20px;
      position: sticky;
      top: 50px;
  }

  .tt-details-card .tt-details-head p {
      font-size: 14px;
      color: #777;

  }

  .tt-monthly-card-section h5 {
      font-size: 14px;
      font-weight: 600;
      color: #777;
      margin-bottom: 10px;
      white-space: nowrap;
  }

  .tt-monthly-card-section h4 {
      font-size: 30px;
      font-weight: 500;
  }

  .tt-monthly-card-section1 {
      padding: 20px;
      border-radius: 10px;
  }

  .tt-monthly-card-section1 {
      background-color: var(--primary);
      color: #fff;
  }


  .tt-monthly-card-section2,
  .tt-monthly-card-section3 {
      background-color: #fff;
      border: 1px solid #eee;
      color: #000;
      padding: 20px;
      border-radius: 10px;
  }

  .tt-details-card .card1 h5 {
      color: var(--secondary);
  }

  .tt-monthly-card-section h2 {
      font-size: 18px;
      font-weight: 600;
  }

  .tt-form-section {
      margin-top: 30px;
  }

  .tt-emi-calculator .tt-emi-label span {
      font-size: 14px;
  }

  .tt-emi-calculator .tt-emi-label {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: space-between;
  }

  .tt-range-slider {
      width: 100%;
      margin: 10px;
  }

  .tt-emi-calculator .tt-emi-label .value {
      background: var(--secondary);
      padding: 10px 10px;
      border-radius: 6px;
      color: #000;
      width: 100px;
  }

  .tt-emi-action .btn-check-emi {
      background: var(--primary);
      color: #fff;
      padding: 12px 50px;
      border-radius: 5px;
      font-size: 14px;
      margin-top: 20px;
      text-align: end;
  }

  @media(max-width: 767px) {

      .loan-section .tt-product-details .property-id p,
      .property-add-success-page .tt-product-details .property-id p {
          font-size: 12px;
          margin-bottom: 5px;
      }

      .loan-section .tt-property-image,
      .property-add-success-page .tt-property-image {
          width: 100px;
          height: 80px;
      }

      .tt-product-details .property-id .edit {
          font-size: 12px;
          gap: 5px;
          margin-bottom: 5px;
      }

      .tt-product-details h4 {
          font-size: 13px;
          margin-bottom: 2px;
      }

      .loan-section .tt-product-details p,
      .property-add-success-page .tt-product-details p {
          font-size: 11px;
          gap: 5px;
          margin-bottom: 5px;
      }

      .tt-product-details .views-enquiries {
          display: none;
      }

      .plan-section .current-plan {
          gap: 5px;
          font-size: 11px;
      }

      .plan-section .current-plan p {
          font-size: 11px;
          padding: 0px 8px;
      }

      .plan-section .upgrade-plan {
          gap: 5px;
          font-size: 11px;
      }

      .plan-section .upgrade-plan p {
          display: none;
      }

      .plan-section .upgrade-plan button {
          gap: 5px;
          padding: 5px 8px;
      }

      .loan-section .tt-property-section,
      .property-add-success-page .tt-property-section {
          padding: 10px;
      }

      /* LOAN APPLICATION */

      .tt-loan-application-form h3 {
          margin: 15px 0 10px;
          font-size: 16px;
      }

      .tt-loan-application-form p {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-application-form-details h4 {
          font-size: 14px;
          margin-bottom: 10px;
          padding-bottom: 10px;
      }

      .tt-application-form-details .tt-loan-application {
          font-size: 12px;
          margin-bottom: 10px;
      }

      .tt-application-form-details input,
      .tt-application-form-details select {
          border-radius: 5px;
          padding: 8px 10px;
          margin-bottom: 10px;
          font-size: 12px;
      }

      .tt-loan-submit-button button {
          font-size: 12px;
          padding: 10px;
          margin-top: 15px;
          border-radius: 5px;
      }

      .tt-application-form-details {
          padding: 10px;
          border-radius: 10px;
      }

      .tt-emi-calculator h3 {
          font-size: 16px;
          margin-bottom: 5px;
          margin-top: 5px;
      }

      .tt-emi-calculator {
          padding: 10px;
          margin-top: 10px;
          border-radius: 10px;
          top: 20px;
      }

      .tt-monthly-card-section1,
      .tt-monthly-card-section2,
      .tt-monthly-card-section3 {
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 5px;
      }

      .tt-monthly-card-section h5 {
          font-size: 12px;
          margin-bottom: 5px;
      }

      .tt-monthly-card-section h2 {
          font-size: 14px;
      }

      .tt-details-body .tt-emi-calculator {
          margin-top: 0px;
      }

      .tt-emi-calculator .tt-emi-label span {
          font-size: 12px;
      }

      .tt-emi-calculator .tt-emi-label .value {
          padding: 5px 8px;
          font-size: 12px;
      }

      .tt-range-slider {
          margin: 5px;
          width: calc(100% - 10px);
      }

      .breadcrumb-area-loan-section .breadcrumb-content h2 {
          font-size: 20px;
          margin-bottom: 6px;
      }
  }

  @media(max-width: 998px) {
      .tt-monthly-card-section h5 {
          font-size: 13px;
          margin-bottom: 10px;
      }

      .tt-monthly-card-section1,
      .tt-monthly-card-section2,
      .tt-monthly-card-section3 {
          padding: 10px;
          margin-bottom: 10px;
      }

      .tt-emi-calculator {
          padding: 10px;
          margin-top: 10px;
          border-radius: 10px;
          top: 20px;
      }

      .tt-monthly-card-section h5 {
          font-size: 12px;
          margin-bottom: 5px;
      }

      .tt-monthly-card-section h2 {
          font-size: 14px;
      }

      .tt-details-body .tt-emi-calculator {
          margin-top: 0px;
      }

      .tt-emi-calculator .tt-emi-label span {
          font-size: 12px;
      }

      .tt-emi-calculator .tt-emi-label .value {
          padding: 5px 8px;
          font-size: 12px;
      }

      .tt-range-slider {
          margin: 5px;
          width: calc(100% - 10px);
      }

      .breadcrumb-area-loan-section .breadcrumb-content h2 {
          font-size: 20px;
          margin-bottom: 6px;
          margin-top: 5px;
      }

      .tt-monthly-card-section {
          margin-bottom: 5px;
      }
  }

  @media (min-width: 998px) and (max-width: 1500px) {
      .col-loan-emi {
          flex: 0 0 100% !important;
          max-width: 100% !important;
          width: 100% !important;
      }

      .col-loan-emi {
          margin-bottom: 10px !important;
      }
  }

  @media (min-width: 468px) and (max-width: 767px) {
      .service-card {
          flex: 0 0 auto !important;
          width: 50% !important;
      }
  }

  @media (min-width: 468px) and (max-width: 768px) {
      .tt-register-page .tt-register-wrapper {
          max-width: 550px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          width: 100% !important;
      }
  }


  /* BLOG DETAILS PAGE */

  .tt-blog-details h1 {
      font-size: 40px;
      font-weight: 500;
      border-left: 4px solid var(--primary);
      padding-left: 20px;
      margin-bottom: 20px;
  }

  .tt-blog-details p {
      font-size: 16px;
      color: #777;
      margin-bottom: 20px;
      font-weight: 500;
  }

  .tt-blog-details .blog-details-image {
      width: 100%;
      height: 600px;
      object-fit: cover;

  }

  .tt-blog-details .blog-details-image img {
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .blog-details-image {
      position: relative;
      display: inline-block;
      width: 100%;
  }

  .blog-details-image .tt-blog-img {
      width: 100%;
      border-radius: 10px;
      display: block;
  }

  .tt-share-wrapper-loan {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      z-index: 10;
  }

  .tt-share-btn {
      width: 38px;
      height: 38px;
      background: #fff;
      box-shadow: 0 4px 4px #d3d3d375;
      backdrop-filter: blur(4px);
      border: none;
      border-radius: 50%;
      color: #000;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
  }

  .tt-share-btn:hover {
      background: var(--primary);
      color: #fff;
  }

  .tt-share-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      /* overflow: hidden; */
      max-height: 0;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease;
  }

  .tt-share-wrapper-loan.open .tt-share-options {
      max-height: 150px;
      opacity: 1;
  }

  .tt-share-options a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-decoration: none;
      transition: transform 0.2s;
  }

  .tt-share-options a:hover {
      transform: scale(1.1);
  }

  .tt-share-facebook {
      background: #1877f2;
  }

  .tt-share-whatsapp {
      background: #25d366;
  }

  .tt-share-instagram {
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }

  .tt-blog-details .tt-publish-details i {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f3f5fb;
      border: 1px solid #dbe4ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 12px;
  }

  .tt-blog-details .tt-publish-details span {
      font-size: 13px;
      color: #666;
      font-weight: 500;
  }

  .tt-blog-details .blog-item-data {
      display: flex;
      gap: 5px;
      align-items: center;
      font-size: 13px;
  }

  .tt-blog-details .tt-publish-details {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: nowrap;
      margin-top: 15px;

  }

  .blog-details-contents .mb3 {
      font-size: 14px;
      color: #222;
      margin-top: 20px;
      text-transform: capitalize;
  }

  .blog-details-contents h4 {
      font-size: 20px;
      font-weight: 500;
      margin-top: 20px;
      text-transform: capitalize;
  }

  .blog-details-contents ul {
      margin-top: 10px;
  }

  .blog-details-contents ul li {
      font-size: 14px;
      list-style-type: disc;
      margin-left: 40px;
      line-height: 1.5rem;

  }

  .blog-details-contents h3 {
      font-size: 24px;
      font-weight: 600;
      margin-top: 20px;
  }

  .blog-details-contents .faq-q {
      color: #222;
      font-size: 16px;
      margin-top: 20px;
  }

  .blog-details-contents .faq-a {
      color: #222;
      border-bottom: 1px solid #d3d3d3;
      padding-bottom: 20px;
      font-weight: 400;
  }

  .tt-news-field .blog-text-heading {
      width: 100%;
      background: #fff;
      box-shadow: 0 10px 12px 2px #eee;
      border-radius: 10px;
  }

  /* .tt-news-field .blog-text-heading h4{
        font-size: 16px;
        font-weight: 600;
        border-left: 3px solid var(--primary);
        padding-left: 15px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    } */

  .blog-img-hover-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      cursor: pointer;
  }

  .blog-image-details h4 {
      font-size: 15px;
      font-weight: 500;
      border-left: 3px solid var(--primary);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      padding: 0px 10px;

  }

  .blog-img-hover-wrap img {
      width: 100%;
      display: block;
      transition: transform 0.4s ease;
  }

  .blog-img-hover-wrap:hover img {
      transform: scale(1.08);
  }

  .blog-img-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.35s ease;
      border-radius: 8px;
  }

  .blog-img-hover-wrap:hover .blog-img-overlay {
      opacity: 1;
  }

  .blog-img-overlay span {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.5px;
      border: 1.5px solid #fff;
      padding: 8px 22px;
      border-radius: 30px;
      transition: background 0.3s ease;
  }

  .blog-img-hover-wrap:hover .blog-img-overlay span {
      background: rgba(255, 255, 255, 0.15);
  }

  .blog-details-contents {
      border-bottom: 2px dotted #777;
      padding-bottom: 20px;
      text-align: justify;
      margin-top: 20px;
  }

  .tt-trending-properties {
      margin-top: 30px;
      padding: 20px;
      border-radius: 14px;
      background: #f5f8ff;
      border: 1px solid #e4ecff;
  }


  .tt-trending-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: var(--primary);
      font-size: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 20px;
  }

  .tt-trending-header i {
      padding: 20px;
      border-radius: 5px;
      background: #fff;
      color: var(--primary);
  }

  .tt-trending-header h4 {
      font-size: 18px;
      font-weight: 600;
      color: #222;
      margin: 0;
  }

  .tt-trending-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
  }

  .tt-trending-tab {
      padding: 7px 18px;
      border-radius: 50px;
      border: 2px solid var(--primary);
      background: transparent;
      color: var(--primary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      outline: none;
      transition: background 0.25s, color 0.25s;
  }

  .tt-trending-tab.active,
  .tt-trending-tab:hover {
      background: var(--primary);
      color: #fff;
  }

  .tt-trending-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }

  .tt-trending-option-item {
      padding: 7px 14px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #dbe4ff;
      color: #444;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
  }

  .tt-trending-option-item:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: #eef2ff;
  }

  .tt-news-field .blog-image-details {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      margin-top: 20px;
  }

  .tt-news-field .blog-img-hover-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      aspect-ratio: 6/4;
  }

  .tt-news-field .blog-img-hover-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      display: block;
  }

  .tt-news-field .blog-img-hover-wrap:hover img {
      transform: scale(1.05);
  }

  .tt-news-field .blog-img-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 8px;
  }

  .tt-news-field .blog-img-hover-wrap:hover .blog-img-overlay {
      opacity: 1;
  }

  .tt-news-field .blog-img-overlay a {
      color: #fff;
      padding: 8px 18px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
  }

  @media(max-width:767px) {
      .tt-blog-details h1 {
          font-size: 16px;
          padding-left: 10px;
          margin-bottom: 10px;
      }

      .tt-blog-details p {
          font-size: 12px;
          margin-bottom: 10px;
          line-height: 20px;
      }

      .tt-blog-details .blog-details-image {
          width: 100%;
          height: 250px;
      }

      .tt-share-btn,
      .tt-share-options a {
          width: 34px;
          height: 34px;
          font-size: 14px;
      }

      /* .tt-share-wrapper{
        top: 40vh;
        right:23px;
      } */
      .tt-blog-details .tt-publish-details i {
          width: 20px;
          height: 20px;
          font-size: 10px;
      }

      .tt-blog-details .tt-publish-details span {
          font-size: 10px;
      }

      .tt-blog-details .blog-item-data {
          gap: 3px;
          font-size: 10px;
      }

      .tt-blog-details .tt-publish-details {
          margin-top: 10px;
      }

      .blog-details-contents .mb3 {
          font-size: 12px;
          margin-top: 10px;
      }

      .blog-details-contents h4 {
          font-size: 16px;
          margin-top: 10px;
      }

      .blog-details-contents ul li {
          font-size: 10px;
          margin-left: 20px;
          line-height: 1.4rem;
      }

      .blog-details-contents h3 {
          font-size: 18px;
          margin-top: 10px;
      }

      .blog-details-contents .faq-q {
          font-size: 12px;
          margin-top: 10px;
      }

      .blog-details-contents .faq-a {
          margin-bottom: 10px;
      }

      .blog-details-contents {
          margin-top: 10px;
      }

      .tt-news-field {}

      .tt-trending-properties {
          padding: 10px;
          margin-top: 15px;
      }

      .blog-card-blog-details {
          display: none;
      }

      .tt-trending-tab {
          padding: 6px 12px;
          font-size: 12px;
      }

      .tt-trending-option-item {
          font-size: 12px;
          padding: 6px 10px;
      }

      .tt-trending-header i {
          padding: 10px;
          font-size: 14px;
      }

      .blog-image-details h4 {
          font-size: 12px;
          padding-left: 5px;
      }

      .tt-trending-header h4 {
          font-size: 16px;
      }

      .tt-trending-header {
          gap: 5px;
          padding-bottom: 8px;
      }

  }

  @media (max-width: 767.98px) {

      .blog-details-contents,
      .blog-details-contents p,
      .blog-details-contents span,
      .blog-details-contents div,
      .blog-details-contents li {
          font-size: 13px !important;
          line-height: 1.6 !important;
      }

      .blog-details-contents h1 {
          font-size: 20px !important;
      }

      .blog-details-contents h2 {
          font-size: 18px !important;
      }

      .blog-details-contents h3 {
          font-size: 16px !important;
      }

      .blog-details-contents h4 {
          font-size: 14px !important;
      }
  }


  @media (min-width: 768px) and(max-width: 997px) {
      .tt-blog-details h1 {
          font-size: 16px;
          padding-left: 10px;
          margin-bottom: 10px;
      }

      .tt-blog-details p {
          font-size: 12px !important;
          margin-bottom: 10px;
          line-height: 20px;
      }

      .tt-blog-details .blog-details-image {
          width: 100%;
          height: 300px;
      }

  }

  @media (min-width: 998px) and (max-width: 1300px) {
      .tt-blog-details h1 {
          font-size: 24px;
          padding-left: 10px;
          margin-bottom: 10px;
      }

      .tt-blog-details p {
          font-size: 14px;
          margin-bottom: 10px;
          line-height: 20px;
      }

      .tt-blog-details .blog-details-image {
          width: 100%;
          height: 400px;
      }

      .tt-trending-header {
          padding-bottom: 10px;
      }

  }


  /* ============================= */
  /*            ERROR PAGE         */
  /* ============================= */

  @keyframes errorBounce {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-30px);
      }
  }

  .error_page {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f8f9ff;
  }

  .error_page_bg {
      position: absolute;
      font-size: 32vw;
      font-weight: 900;
      color: rgba(45, 78, 162, 0.06);
      letter-spacing: -20px;
      user-select: none;
      line-height: 1;
      pointer-events: none;
      animation: errorBounce 3s ease-in-out infinite;
  }

  .error_page_content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 40px 20px;
      max-width: 500px;
  }

  .error_page_content h2 {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 15px;
  }

  .error_page_content p {
      font-size: 15px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 30px;
  }

  .error_page_content .btn-primary {
      padding: 14px 35px;
      font-size: 15px;
      border-radius: 30px;
  }

  .error_page_content .error_code {
      font-size: 72px;
      font-weight: 800;
      color: var(--primary);
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -2px;
  }

  .error_page_content .btn-search-back .btn-primary {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
  }

  .error_page_content .btn-search-back .btn-primary:hover {
      background: #000;
      color: #fff;
      border: none;
  }

  .tt-404-action {
      display: flex;
      text-align: center;
      justify-content: center;
      gap: 20px;
      text-transform: uppercase;
  }


  @media (max-width: 768px) {
      .error_page_bg {
          font-size: 50vw;
          letter-spacing: -8px;
      }

      .error_page_content h2 {
          font-size: 24px;
      }

      .error_page_bg {
          font-size: 50vw;
          letter-spacing: -8px;
      }

      .error_page_content h2 {
          font-size: 24px;
      }
  }


  /* ============================= */
  /*   RECOMMENDED FILTER PILLS    */
  /* ============================= */

  /* Override heading-one flex so left side can stack title + pills */
  .recommended-heading {
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
  }

  .recommended-heading-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
      min-width: 0;
      align-items: start;
  }

  .recommended-heading-left h2 {
      margin: 0;
  }

  /* Pills row */
  .filter-recommended {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
  }

  /* Individual pill button */
  .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 30px;
      border: 1.5px solid #d0d5dd;
      background: #fff;
      color: #444;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      line-height: 1;
  }

  .filter-pill:hover {
      border-color: var(--primary, #2d4ea2);
      color: var(--primary, #2d4ea2);
      background: #f0f4ff;
  }

  .filter-pill.active {
      background: var(--primary, #2d4ea2);
      color: #fff;
      border-color: var(--primary, #2d4ea2);
  }

  .filter-pill.active:hover {
      background: #1e3a8a;
      border-color: #1e3a8a;
      color: #fff;
  }

  .filter-pill.has-arrow i {
      font-size: 10px;
      margin-left: 2px;
      transition: transform 0.2s ease;
  }

  /* Budget dropdown wrapper */
  .filter-pill-dropdown {
      position: relative;
  }

  /* Budget options panel */
  .filter-budget-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      padding: 6px;
      min-width: 180px;
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 2px;
  }

  .budget-option {
      display: block;
      width: 100%;
      text-align: left;
      padding: 9px 14px;
      border: none;
      background: transparent;
      border-radius: 7px;
      font-size: 13.5px;
      color: #333;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
  }

  .budget-option:hover {
      background: #f0f4ff;
      color: var(--primary, #2d4ea2);
  }

  .budget-option.selected {
      background: var(--primary, #2d4ea2);
      color: #fff;
      font-weight: 500;
  }

  .heading-slide-actions .slider-buttons svg {
      display: none !important;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {

      .recommended-heading .heading-slide-actions {
          align-self: flex-end;
      }

      .filter-pill {
          font-size: 11px;
          padding: 5px 8px;
      }
  }


  /* Recommended + Popular Locations mobile order */
  .recommended-locations-wrapper {
      display: flex;
      flex-direction: column;
  }

  @media (max-width: 768px) {
      .locations-order {
          order: -1;
      }

      .recommended-order {
          order: 1;
      }

      .location-see-more {
          display: none;
      }
  }

  @media (min-width: 768px) {
      .tt-property-details-section .row {
          align-items: flex-start;
      }

      .tt-property-details-section .col-md-8,
      .tt-property-details-section .col-md-4,
      .top-sticky {
          position: sticky;
          top: 90px;
          z-index: 10;
      }
  }

  .emi-loan-calculator-details {
      position: static;
  }


  /* ============================== */
  /*         AUTHOR PROFILE         */
  /* ============================== */


  .tt-author-hero {
      position: relative;
      background: linear-gradient(135deg, #1a2f6e 0%, #2d4ea2 100%);
      overflow: hidden;
      margin-top: 10px;
  }

  .tt-author-cover {
      position: absolute;
      inset: 0;
      z-index: 0;
  }

  .tt-author-cover-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(13, 24, 60, 0.88) 0%, rgba(13, 24, 60, 0.60) 100%);
      z-index: 1;
  }

  .tt-author-hero-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      gap: 28px;
      padding: 52px 0 36px;
  }

  .tt-author-avatar-wrap {
      flex-shrink: 0;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid #fff;
      overflow: hidden;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
      background: #e9edf4;
  }

  .tt-author-avatar {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }

  .tt-author-hero-info {
      flex: 1;
      padding-bottom: 4px;
  }

  .tt-author-name {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 4px;
      line-height: 1.2;
  }

  .tt-author-designation {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.72);
      margin: 0 0 14px;
      font-weight: 400;
  }

  .tt-author-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
  }

  .tt-author-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.85);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 5px 12px;
      border-radius: 20px;
  }

  .tt-author-meta-item i {
      font-size: 11px;
      color: var(--secondary);
  }

  .tt-author-social {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
  }

  .tt-author-social-link {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.22);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      text-decoration: none;
      transition: 0.3s ease;
  }

  .tt-author-social-link:hover {
      background: var(--secondary);
      border-color: var(--secondary);
      color: #000;
      transform: translateY(-2px);
  }

  .tt-author-stats-bar {
      background: #fff;
      border-bottom: 1px solid #eaeaea;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      position: sticky;
      top: 0;
      z-index: 9999999;
  }

  .tt-author-stats-grid {
      display: flex;
  }

  .tt-author-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 22px 16px;
      border-right: 1px solid #eaeaea;
      text-align: center;
  }

  .tt-author-stat:last-child {
      border-right: none;
  }

  .tt-author-stat-value {
      font-size: 26px;
      font-weight: 700;
      color: var(--primary);
      line-height: 1;
      margin-bottom: 5px;
      display: block;
  }

  .tt-author-stat-label {
      font-size: 12px;
      color: #777;
  }

  .tt-author-body {
      padding: 32px 0 48px;
      background: #f7f8fc;
  }

  .tt-author-section {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #eaeaea;
      padding: 24px;
      margin-bottom: 20px;
  }

  .tt-author-section-title {
      font-size: 15px;
      font-weight: 600;
      color: #111;
      margin: 0 0 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f0f0f0;
  }

  .tt-author-section-title i {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #eef2ff;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
  }

  .tt-author-blog-count {
      margin-left: auto;
      background: var(--primary);
      color: #fff;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 10px;
      border-radius: 20px;
  }

  .tt-author-bio {
      font-size: 14px;
      line-height: 1.9;
      color: #555;
  }

  .tt-author-bio p {
      margin-bottom: 12px;
  }

  .tt-author-bio p:last-child {
      margin-bottom: 0;
  }

  .tt-author-expertise-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px;
  }

  .tt-author-expertise-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: #f7f8fc;
      border: 1px solid #eaeaea;
      border-radius: 10px;
      padding: 14px;
  }

  .tt-author-expertise-item>i {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #eef2ff;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
  }

  .tt-author-expertise-item strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #222;
      margin-bottom: 3px;
  }

  .tt-author-expertise-item p {
      font-size: 13px;
      color: #666;
      margin: 0;
      line-height: 1.5;
  }

  .tt-author-sidebar-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #eaeaea;
      padding: 24px;
      text-align: center;
      margin-bottom: 20px;
      position: sticky;
      top: 150px;
      z-index: 10;
      align-self: flex-start;
  }

  .tt-author-sidebar-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 14px;
      border: 3px solid #eef2ff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  }

  .tt-author-sidebar-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }

  .tt-author-sidebar-card h4 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 4px;
      color: #111;
  }

  .tt-author-sidebar-designation {
      font-size: 12px;
      color: var(--primary);
      font-weight: 500;
      margin: 0 0 10px;
  }

  .tt-author-sidebar-bio {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 14px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .tt-related-author-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      text-decoration: none;
      transition: 0.2s;
  }

  .tt-related-author-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }

  .tt-related-author-item:hover {
      opacity: 0.75;
  }

  .tt-related-author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid #eef2ff;
  }

  .tt-related-author-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }

  .tt-related-author-placeholder {
      width: 100%;
      height: 100%;
      background: #eef2ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 16px;
  }

  .tt-related-author-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
  }

  .tt-related-author-info strong {
      font-size: 13px;
      font-weight: 600;
      color: #111;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .tt-related-author-info span {
      font-size: 11px;
      color: #888;
  }

  .tt-related-author-count {
      color: var(--primary) !important;
      font-weight: 500 !important;
  }


  @media (max-width: 991px) {
      .tt-author-hero-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          padding: 32px 0 24px;
      }

      .tt-author-name {
          font-size: 20px;
      }

      .tt-author-stat {
          flex: 1 1 45%;
          border-right: none;
          border-bottom: 1px solid #eaeaea;
      }

      .tt-author-stat:nth-child(odd) {
          border-right: 1px solid #eaeaea;
      }

      .tt-author-stat:last-child {
          border-bottom: none;
      }

      .tt-author-stat:nth-child(3) {
          border-bottom: none !important;
      }
  }

  @media (max-width: 767px) {
      .tt-author-avatar-wrap {
          width: 80px;
          height: 80px;
      }

      .tt-author-name {
          font-size: 16px;
      }

      .tt-author-stat-value {
          font-size: 20px;
      }

      .tt-author-stat {
          flex: 1 1 45%;
          padding: 14px 10px;
      }

      .tt-author-section {
          padding: 10px;
          border-radius: 8px;
          margin-bottom: 10px;
      }

      .tt-author-expertise-grid {
          grid-template-columns: 1fr;
          gap: 10px
      }

      .tt-author-body {
          padding: 14px 0 10px !important;
      }

      .tt-author-sidebar-card {
          padding: 16px;
      }

      .tt-author-designation {
          font-size: 12px;
          margin-bottom: 5px;
      }

      .tt-author-section-title {
          font-size: 12px;
          gap: 5px;
          padding-bottom: 10px;
          margin-bottom: 10px;
      }

      .tt-author-expertise-item {
          padding: 8px;
          gap: 5px;
      }

      .tt-author-expertise-item>i {
          width: 32px;
          height: 32px;
      }

      .tt-author-expertise-item strong {
          font-size: 12px;
          font-weight: 500;
      }

      .tt-author-expertise-item p {
          font-size: 12px;
      }

      .tt-author-section-title i {
          width: 28px;
          height: 28px;
      }

      .tt-status-categories-covered {
          border-bottom: none;
      }

      .tt-author-body .padding-main {
          padding: 10px 0 !important;
      }

      .tt-author-bio {
          font-size: 12px;
      }

      .tt-author-section {
          margin-bottom: 10px;
      }

      .meta-item a {
          font-size: 10px;
      }

      .tt-author-body .col-md-9 {
          padding: 0;
      }

      .blog-card .blog-meta .meta-item i {
          margin: 0;
      }

      .tt-author-blog-count {
          padding: 2px 8px;
      }
  }

  /* Author Avatar Modal */
  .tt-author-avatar-wrap {
      cursor: default;
  }

  .tt-author-modal-overlay {
      display: none;
  }

  @media (max-width: 991px) {
      .tt-author-avatar-wrap {
          cursor: pointer;
      }

      .tt-author-right-side {
          display: none;
      }

      .tt-author-modal-overlay {
          display: flex;
          align-items: center;
          justify-content: center;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.5);
          z-index: 99999;
          padding: 16px;
      }

      .tt-author-modal-card {
          background: #fff;
          border-radius: 14px;
          padding: 28px 24px 24px;
          text-align: center;
          width: 100%;
          max-width: 340px;
          position: relative;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      }

      .tt-author-modal-close {
          position: absolute;
          top: 12px;
          right: 14px;
          background: none;
          border: none;
          font-size: 18px;
          color: #888;
          cursor: pointer;
          line-height: 1;
          padding: 0;
      }

      .tt-author-modal-close:hover {
          color: #111;
      }

      .tt-author-modal-card .tt-author-sidebar-avatar {
          margin: 0 auto 14px;
      }

      .tt-author-modal-card h4 {
          font-size: 16px;
          font-weight: 600;
          margin: 0 0 4px;
          color: #111;
      }
  }

  /* Builder details swiper and single image fallback */
  .tt-builder-swiper-wrapper,
  .single-image-container {
      position: relative;
      width: 100%;
      height: 416px;
      border-radius: 20px;
      overflow: hidden;
  }

  .tt-builder-swiper {
      width: 100%;
      height: 100%;
  }

  .swiper-image-slide-container {
      position: relative;
      width: 100%;
      height: 100%;
  }

  .tt-builder-swiper .swiper-button-next,
  .tt-builder-swiper .swiper-button-prev {
      color: var(--primary) !important;
      background: rgba(255, 255, 255, 0.9) !important;
      width: 44px !important;
      height: 44px !important;
      border-radius: 50% !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
  }

  .tt-builder-swiper .swiper-button-next:after,
  .tt-builder-swiper .swiper-button-prev:after {
      font-size: 16px !important;
      font-weight: bold !important;
  }

  .tt-builder-swiper .swiper-button-next:hover,
  .tt-builder-swiper .swiper-button-prev:hover {
      background: #fff !important;
      transform: scale(1.05);
  }

  .tt-builder-swiper .swiper-pagination-bullet-active {
      background: var(--primary) !important;
      width: 24px !important;
      border-radius: 4px !important;
      transition: all 0.3s ease !important;
  }

  @media (max-width: 768px) {

      .tt-builder-image-section .tt-builder-swiper-wrapper,
      .tt-builder-image-section .single-image-container {
          margin-left: 0px !important;
          border-radius: 0 !important;
          height: 280px !important;
      }
  }


  /* ============================= */
  /*        BUILDER INFO CARD      */
  /* ============================= */

  .bic-builder-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px;
      border-radius: 12px;
      border: 1.5px solid #e5e7eb;
      background: #fff;
      text-decoration: none;
      transition: all 0.2s;
      min-width: 0;
      overflow: hidden;
  }

  .bic-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      overflow: hidden;
  }

  .bic-logo-wrap {
      width: 90px;
      height: 90px;
      border-radius: 10px;
      flex-shrink: 0;
      border: 1.5px solid #e5e7eb;
      overflow: hidden;
      background: #eff6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      object-fit: contain;
  }

  .bic-logo-img {
      object-fit: contain;
      width: 100%;
      height: 100%;
  }

  .bic-logo-icon {
      color: #2563eb;
      font-size: 20px;
  }

  .bic-name-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px;
  }

  .bic-company-name {
      font-weight: 700;
      font-size: 15px;
      color: #111;
  }

  .bic-verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #28a74514;
      color: #28a745;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 400;
  }

  .bic-verified-icon {
      font-size: 10px;
  }

  .bic-project-name {
      font-size: 12px;
      color: #6b7280;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: normal;
      min-width: 0;
  }

  .bic-project-name svg {
      color: var(--primary);
      flex-shrink: 0;
  }

  .bic-project-name p {
      overflow-wrap: break-word;
      word-break: break-word;
      min-width: 0;
  }

  .bic-rera i {
      color: #000 !important;
  }

  .bic-icon-mr {
      margin-right: 5px;
  }

  .bic-rera {
      font-size: 11px;
      color: #9ca3af;
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .bic-icon-mr-sm {
      margin-right: 4px;
  }

  .bic-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      flex-shrink: 0;
  }

  .bic-project-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--primary);

      border-radius: 20px;
      font-size: 11px;
      font-weight: 400;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
  }

  .bic-project-link-icon {
      font-size: 9px;
  }

  .bic-arrow-wrap {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .bic-arrow-icon {
      color: #2563eb;
      font-size: 12px;
  }

  @media (max-width: 768px) {
      .bic-name-row {
          flex-direction: column;
          align-items: flex-start;
      }

      .bic-verified-badge {
          order: -1;
      }

      .bic-project-name p,
      .bic-rera p {
          overflow-wrap: break-word;
          word-break: break-word;
          min-width: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .bic-project-name,
      .bic-rera {
          min-width: 0;
          align-items: start;
      }

      .bic-left>div:last-child {
          min-width: 0;
          overflow: hidden;
      }

      .bic-builder-link {
          padding: 0px;
          border: none;
      }

  }

  .tt-details-card {
      width: 100% !important;
  }

  .ap-notif-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  @keyframes apFadeIn {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .ap-notif-header-card {
      position: relative;
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
      border-radius: 20px;
      padding: 32px 40px;
      color: #ffffff;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
  }

  .ap-notif-header-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
      pointer-events: none;
  }

  .ap-notif-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      position: relative;
      z-index: 2;
  }

  .ap-notif-title-row h1 {
      font-size: 24px;
      font-weight: 600;
      color: #ffffff;
      margin: 0 0 4px;
  }

  .ap-notif-para {
      color: rgba(255, 255, 255, 0.85);
      font-size: 12px;
      margin: 0;
  }

  .ap-notif-badge-unread {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 30px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 400;
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }

  .ap-notif-badge-unread.all-read {
      background: rgba(16, 185, 129, 0.2);
      border-color: rgba(16, 185, 129, 0.3);
  }

  .ap-notif-btn-header {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 12px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 00;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
  }

  .ap-notif-btn-header:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
  }

  .ap-notif-btn-header.primary {
      background: #ffffff;
      color: var(--primary);
      border: none;
  }

  .ap-notif-btn-header.primary:hover {
      background: #f8fafc;
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  }

  .ap-notif-tabs-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 0;
      margin-top: 8px;
      scrollbar-width: none;
  }

  .ap-notif-tabs-row::-webkit-scrollbar {
      display: none;
  }

  .ap-notif-tab-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      border-radius: 50px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 400;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
  }

  .ap-notif-tab-btn:hover {
      background: #f8fafc;
      color: #334155;
      border-color: #cbd5e1;
  }

  .ap-notif-tab-btn.active {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  }

  .ap-tab-count {
      margin-left: 4px;
      background: rgba(37, 99, 235, 0.08);
      color: var(--primary);
      padding: 2px 6px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 500;
  }

  .ap-notif-tab-btn.active .ap-tab-count {
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
  }

  .ap-notif-list-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .ap-notif-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 24px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
  }

  .ap-notif-card:hover {
      border-color: #bfdbfe;
      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.04);
      transform: translateY(-2px);
  }

  .ap-notif-card.unread {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, #ffffff 100%);
      border-color: #dbeafe;
  }

  .ap-notif-card.unread::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 4px;
      background: var(--primary);
  }

  .ap-notif-icon-box {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      transition: transform 0.2s ease;
  }

  .ap-notif-card:hover .ap-notif-icon-box {
      transform: scale(1.05);
  }

  .icon-match {
      background: #eff6ff;
      color: var(--primary);
  }

  .icon-price {
      background: #fef2f2;
      color: #ef4444;
  }

  .icon-sub {
      background: #fffbeb;
      color: #d97706;
  }

  .icon-enquiry {
      background: #faf5ff;
      color: #8b5cf6;
  }

  .icon-system {
      background: #f0fdf4;
      color: #16a34a;
  }

  .icon-default {
      background: #f1f5f9;
      color: #475569;
  }

  .ap-notif-body {
      flex: 1;
      min-width: 0;
  }

  .ap-notif-title-line {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 4px;
  }

  .ap-notif-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
      line-height: 1.4;
  }

  .ap-notif-message {
      font-size: 12px;
      color: #475569;
      margin: 0 0 8px;
      line-height: 1.5;
  }

  .ap-notif-time-badge {
      font-size: 11px;
      font-weight: 400;
      color: #94a3b8;
      display: inline-flex;
      align-items: center;
      gap: 4px;
  }

  .ap-notif-time-badge.mobile-only {
      display: none;
  }

  .ap-notif-action-col {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      align-self: center;
      z-index: 5;
  }

  .ap-notif-action-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .ap-notif-action-btn:hover {
      background: #f1f5f9;
      color: #1e293b;
      border-color: #cbd5e1;
  }

  .ap-notif-action-btn.danger:hover {
      background: #fef2f2;
      color: #ef4444;
      border-color: #fca5a5;
  }

  .ap-notif-empty {
      text-align: center;
      padding: 60px 40px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
  }

  .ap-notif-empty-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #f8fafc;
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 8px;
  }

  .ap-notif-empty-icon.pulse {
      background: #eff6ff;
      color: var(--primary);
      animation: apPulseBell 2s infinite;
  }

  @keyframes apPulseBell {
      0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3);
      }

      70% {
          transform: scale(1.05);
          box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
      }

      100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
      }
  }

  .ap-notif-empty h4 {
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
  }

  .ap-notif-empty p {
      font-size: 14px;
      color: #64748b;
      margin: 0;
      max-width: 320px;
      line-height: 1.5;
  }

  .ap-notif-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;
  }

  .ap-pagination-btn {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .ap-pagination-btn:hover:not(:disabled) {
      background: #f1f5f9;
      color: #1e293b;
      border-color: #cbd5e1;
  }

  .ap-pagination-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }

  .ap-pagination-info {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
  }

  .ap-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(4px);
      animation: apFadeInModal 0.2s ease-out;
  }

  @media (max-width: 991px) {
      body.ap-modal-open .mobile-floating-navbar {
          display: none !important;
      }
  }

  @keyframes apFadeInModal {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .ap-modal-card {
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 20px;
      background: #ffffff;
      padding: 32px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      animation: apSlideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes apSlideUpModal {
      from {
          transform: translateY(20px);
          opacity: 0;
      }

      to {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .ap-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
  }

  .ap-modal-title {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
  }

  .ap-modal-close-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: transparent;
      cursor: pointer;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
  }

  .ap-modal-close-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
      border-color: #cbd5e1;
  }

  .ap-pref-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .ap-pref-subtitle {
      color: #475569;
      font-size: 14.5px;
      margin: 0;
      line-height: 1.5;
  }

  .ap-pref-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .ap-pref-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      transition: all 0.2s ease;
  }

  .ap-pref-item:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
  }

  .ap-pref-label {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      line-height: 1.4;
      padding-right: 12px;
  }

  .ap-toggle-switch {
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #cbd5e1;
      position: relative;
      cursor: pointer;
      transition: background 0.2s ease;
      border: none;
      outline: none;
      flex-shrink: 0;
  }

  .ap-toggle-switch.active {
      background: var(--primary);
  }

  .ap-toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .ap-toggle-switch.active .ap-toggle-knob {
      transform: translateX(20px);
  }

  .ap-pref-save-btn {
      width: 100%;
      height: 48px;
      background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
      color: #ffffff;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s ease;
  }

  .ap-pref-save-btn:hover:not(:disabled) {
      opacity: 0.95;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  }

  .ap-pref-save-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  /* Responsive adjustments */
  @media (max-width: 991px) {
      .ap-notif-header-card {
          padding: 28px 32px;
      }

      .ap-notif-title-row h1 {
          font-size: 20px;
      }

      .ap-modal-header .ap-modal-title {
          font-weight: 600 !important;
      }

      .ap-pref-subtitle {
          font-size: 13px;
      }

      .ap-modal-header {
          margin-bottom: 15px;
      }
  }

  @media (max-width: 767px) {
      .ap-notif-list-container {
          gap: 5px;
      }

      .ap-notif-header-card {
          padding: 18px;
          border-radius: 16px;
      }

      .ap-notif-title-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }

      .ap-notif-badge-unread {
          padding: 4px 10px;
          font-size: 11px;
      }

      .ap-notif-btn-header {
          max-width: 100%;
          justify-content: center;
          padding: 4px 10px;
          font-size: 11px;
          border-radius: 10px;
      }

      .ap-notif-btn-header.primary {
          max-width: 100%;
      }

      .ap-notif-card {
          padding: 16px;
          border-radius: 12px;
          gap: 12px;
      }

      .ap-notif-icon-box {
          width: 38px;
          height: 38px;
          font-size: 15px;
      }

      .ap-notif-title {
          font-size: 12px;
      }

      .ap-notif-message {
          font-size: 10px;
          margin-bottom: 5px;
      }

      .ap-modal-card {
          padding: 24px;
          border-radius: 16px;
      }
  }

  @media (max-width: 575px) {
      .ap-notif-container {
          gap: 5px
      }

      .ap-notif-header-card {
          padding: 20px;
      }

      .ap-notif-title-row h1 {
          font-size: 20px;
      }

      .ap-notif-para {
          font-size: 11px;
          line-height: 1.4;
      }

      .ap-notif-tabs-row {
          gap: 6px;
      }

      .ap-notif-tab-btn {
          padding: 4px 10px;
          font-size: 10px;
          border-radius: 50px;
      }

      .ap-tab-count {
          padding: 1px 5px;
          font-size: 10px;
      }

      .ap-notif-card {
          flex-direction: column;
          align-items: stretch;
          gap: 5px;
      }

      .ap-notif-card.unread::before {
          width: 3px;
      }

      .ap-notif-icon-box {
          display: none;
      }

      .ap-notif-action-col {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 4px;
          border-top: 1px solid #f1f5f9;
          padding-top: 8px;
      }

      .ap-notif-action-btn {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          font-size: 12px;
      }

      .ap-notif-time-badge.desktop-only {
          display: none;
      }

      .ap-notif-time-badge.mobile-only {
          display: inline-flex;
          margin-right: auto;
          font-size: 11px;
      }

      .ap-pref-item {
          padding: 10px 14px;
          border-radius: 10px;
      }

      .ap-pref-label {
          font-size: 13px;
          font-weight: 400 !important;
      }

      .ap-pref-save-btn {
          height: 44px;
          font-size: 12px;
          border-radius: 10px;
          font-weight: 400 !important;
      }

      .ap-pref-item {
          border-radius: 5px;
      }
  }

  /* Responsive adjustments for Builder Dashboard Header between 998px and 1399px */
  @media (min-width: 998px) and (max-width: 1399px) {

      header.header-dashboard .nav a.nav-item-builder-properties,
      header.header-dashboard .nav a.nav-item-builder-leads {
          display: none !important;
      }
  }

  /* Responsive adjustments for Seller Dashboard Header between 1024px and 1399px */
  @media (min-width: 1024px) and (max-width: 1399px) {

      header.header-dashboard .nav a.nav-item-seller-enquiries,
      header.header-dashboard .nav a.nav-item-seller-notifications {
          display: none !important;
      }
  }


  /* ======================================= */
  /*   ENQUIRY MODAL RESPONSIVE STYLES      */
  /* ======================================= */

  @media (max-width: 1024px) {
      .enquiry-modal-content {
          max-width: 90%;
          max-height: calc(100vh - 30px);
      }

      .enquiry-form-columns {
          gap: 24px;
      }
  }

  @media (max-width: 768px) {
      .enquiry-modal-content {
          max-width: 95%;
          max-height: calc(100vh - 20px);
          border-radius: 12px;
      }

      .enquiry-modal-header {
          padding: 20px 20px 16px;
      }

      .enquiry-modal-title {
          font-size: 20px;
      }

      .enquiry-modal-close {
          width: 36px;
          height: 36px;
          font-size: 16px;
      }

      .enquiry-modal-body {
          padding: 20px;
      }

      .enquiry-modal-footer {
          padding: 12px 20px 16px;
      }

      .enquiry-form-columns {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .enquiry-modal-summary-box {
          padding: 14px 16px;
          gap: 12px;
      }

      .enquiry-modal-property-price {
          min-width: auto;
          text-align: right;
      }

      .tt-enquiry-limit-badge {
          padding: 10px 12px;
          font-size: 12px;
          margin-bottom: 16px;
      }

      .enquiry-modal-section-title {
          font-size: 16px;
          margin-bottom: 16px;
      }

      .enquiry-form-column-left,
      .enquiry-form-column-right {
          gap: 16px;
      }

      .enquiry-modal-input-label,
      .enquiry-modal-input-label-inline,
      .enquiry-modal-input-label-block {
          font-size: 13px;
          margin-bottom: 6px;
      }

      .enquiry-modal-radio-group {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .enquiry-modal-radio-group-wrap {
          gap: 8px;
      }

      .enquiry-modal-checkbox-grid {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .enquiry-modal-radio-label {
          font-size: 13px;
          gap: 6px;
      }

      .enquiry-modal-radio-input {
          width: 16px;
          height: 16px;
      }

      .enquiry-modal-input {
          padding: 8px 10px;
          font-size: 13px;
      }

      .enquiry-modal-submit-btn {
          padding: 10px 20px;
          font-size: 14px;
      }

      .enquiry-modal-submit-btn-full {
          width: 100%;
      }

      .tt-enquiry-error {
          font-size: 12px;
          padding: 8px 10px;
          margin-bottom: 12px;
      }

      .tt-enquiry-limit,
      .tt-enquiry-success {
          padding: 24px 16px;
      }

      .tt-enquiry-limit i,
      .tt-enquiry-success i {
          font-size: 48px;
          margin-bottom: 12px;
      }

      .tt-enquiry-limit h4,
      .tt-enquiry-success h4 {
          font-size: 18px;
          margin-bottom: 10px;
      }

      .tt-enquiry-limit p,
      .tt-enquiry-success p {
          font-size: 13px;
          margin-bottom: 8px;
      }
  }

  @media (max-width: 480px) {
      .enquiry-modal-content {
          max-width: 100%;
          max-height: calc(100vh - 16px);
          border-radius: 16px 16px 0 0;
      }

      .enquiry-modal-header {
          padding: 16px;
          gap: 12px;
      }

      .enquiry-modal-title {
          font-size: 18px;
      }

      .enquiry-modal-body {
          padding: 16px;
      }

      .enquiry-modal-footer {
          padding: 12px 16px;
      }

      .enquiry-modal-summary-box {
          flex-direction: column;
          padding: 12px;
          gap: 8px;
          text-align: center;
      }

      .enquiry-modal-agent-info {
          flex-direction: column;
          gap: 8px;
          width: 100%;
      }

      .enquiry-modal-agent-avatar {
          width: 45px;
          height: 45px;
      }

      .enquiry-modal-content-sample {
          text-align: center;
      }

      .enquiry-modal-property-price {
          width: 100%;
          text-align: center;
          min-width: auto;
      }

      .enquiry-modal-price-value {
          font-size: 14px;
      }

      .enquiry-modal-property-desc {
          font-size: 12px;
      }

      .tt-enquiry-limit-badge {
          padding: 10px;
          font-size: 12px;
          margin-bottom: 12px;
      }

      .enquiry-modal-section-title {
          font-size: 15px;
          margin-bottom: 14px;
      }

      .enquiry-form-column-left,
      .enquiry-form-column-right {
          gap: 14px;
      }

      .enquiry-modal-input-label,
      .enquiry-modal-input-label-inline,
      .enquiry-modal-input-label-block {
          font-size: 12px;
          margin-bottom: 6px;
      }

      .enquiry-modal-radio-group {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .enquiry-modal-input {
          padding: 8px 10px;
          font-size: 13px;
      }

      .enquiry-modal-radio-label,
      .enquiry-modal-checkbox-label {
          font-size: 12px;
      }

      .enquiry-modal-submit-btn {
          width: 100%;
          padding: 11px 16px;
          font-size: 13px;
          gap: 6px;
      }

      .tt-enquiry-error {
          font-size: 11px;
          padding: 8px;
          margin-bottom: 10px;
      }

      .tt-enquiry-limit,
      .tt-enquiry-success {
          padding: 20px 12px;
      }

      .tt-enquiry-limit i,
      .tt-enquiry-success i {
          font-size: 40px;
          margin-bottom: 10px;
      }

      .tt-enquiry-limit h4,
      .tt-enquiry-success h4 {
          font-size: 16px;
          margin-bottom: 8px;
      }

      .tt-enquiry-limit p,
      .tt-enquiry-success p {
          font-size: 12px;
          margin-bottom: 8px;
      }
  }


  /* ============================================================
   SIGN-IN POST PROPERTY PAGE  (spp-* prefix)
   ============================================================ */

  .spp-step1-row {
      align-items: flex-start;
  }

  .spp-hero-banner {
      background: #FFC9070D;
      border-radius: 12px;
      padding: 32px 28px 0 28px;
      margin-bottom: 28px;
      display: flex;
      align-items: flex-end;
      gap: 16px;
      overflow: hidden;
      min-height: 200px;
      border: 1px solid #f9f9f9;
  }

  .spp-hero-text {
      flex: 1;
      padding-bottom: 24px;
  }

  .spp-hero-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 10px;
  }

  .spp-hero-highlight {
      color: var(--primary);
  }

  .spp-hero-benefits {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .spp-hero-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 7px;
      line-height: 1.45;
  }

  .spp-hero-benefits li i {
      color: #34d399;
      margin-top: 2px;
      flex-shrink: 0;
      font-size: 13px;
  }

  .spp-hero-img-wrap {
      flex-shrink: 0;
      align-self: flex-end;
  }

  .spp-hero-img {
      width: 250px;
      height: auto;
      object-fit: contain;
      display: block;
  }

  .spp-section {
      margin-bottom: 28px;
  }

  .spp-step-card {
      text-align: left;
      padding: 16px 20px;
      background-color: #f3f5ff;
      border-radius: 15px;
      min-height: 170px;
  }

  .spp-step-num {
      width: 44px;
      height: 44px;
      color: transparent;
      font-size: 35px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      -webkit-text-stroke: 1px var(--primary);
  }

  .spp-step-card h4 {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 10px;
      line-height: 1.3;
  }

  .spp-step-card p {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.45;
      margin: 0;
  }

  .status-card-login {
      padding: 30px 0px;
      background: #f5f8ff;
      border-radius: 14px;
      padding: 20px 18px;
      margin: 50px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
  }

  .spp-stat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
  }

  .spp-stat-item > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }

  .spp-stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--secondary);
      color: #000 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
  }

  .spp-stat-item strong {
      display: block;
      font-size: 24px;
      font-weight: 700;
      color: #111827;
      line-height: 1;
  }

  .spp-stat-item span {
      font-size: 14px;
      color: #6b7280;
  }


  .spp-tip-card {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 12px 10px;
      height: 100%;
  }


  .spp-tip-text strong {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 3px;
      line-height: 1.3;
  }

  .spp-tip-text p {
      margin: 0;
      font-size: 11px;
      color: #6b7280;
      line-height: 1.4;
  }

  .spp-faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .spp-faq-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 14px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 14px;
      color: #374151;
      cursor: pointer;
      transition: border-color 0.2s;
  }

  .spp-faq-row:hover {
      border-color: var(--primary, #2563eb);
  }

  .spp-faq-row i {
      color: #9ca3af;
      font-size: 12px;
      flex-shrink: 0;
      margin-left: 8px;
  }

  .spp-faq-row {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      cursor: default;
  }

  .spp-faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 13px 14px;
      background: none;
      border: none;
      font-size: 14px;
      color: #374151;
      cursor: pointer;
      text-align: left;
      gap: 8px;
  }

  .spp-faq-question i {
      color: #9ca3af;
      font-size: 12px;
      flex-shrink: 0;
      margin-left: 0;
  }

  .spp-faq-question:hover,
  .spp-faq-question:hover i {
      color: var(--primary, #2563eb);
  }

  .spp-faq-answer {
      padding: 10px 14px 13px;
      font-size: 13px;
      color: #6b7280;
      line-height: 1.6;
      border-top: 1px solid #f3f4f6;
  }

  .spp-testi-card {
      background: #f5f6f8;
      border-radius: 10px;
      padding: 18px 16px;
      height: 100%;
  }

  .spp-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 20px;
  }

  .spp-stars i {
      color: #f59e0b;
      font-size: 13px;
  }

  .spp-testi-card p {
      font-size: 14px;
      color: #4b5563;
      line-height: 1.6;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
  }

  .spp-testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: #000;
      font-weight: 500;
      border-top: 1px solid #d3d3d3;
      padding-top: 16px;
  }

  .spp-testi-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: #e2e8f0;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .spp-testi-author-info {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .spp-signin-card {
      background: #fff;
      border: 2px solid var(--primary);
      border-radius: 14px;
      padding: 24px 20px 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      margin-bottom: 20px;
  }

  .spp-signin-title {
      font-size: 16px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f1f5f9;
  }

  .spp-field-group {
      margin-bottom: 16px;
      scroll-margin-top: 16px;
  }

  .spp-field-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
  }

  .spp-toggle-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .spp-tab {
      padding: 11px 18px;
      border-radius: 24px;
      border: 1.5px solid #d1d5db;
      background: #fff;
      color: #374151;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      font-family: inherit;
      white-space: nowrap;
      line-height: 1.4;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .spp-tab:hover {
      border-color: #3b82f6;
      color: #1e40af;
      background: #eff6ff;
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
      transform: translateY(-2px);
  }

  .spp-tab:active {
      transform: translateY(0);
  }

  .spp-tab--active {
      border-color: #1e40af !important;
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
      color: #fff !important;
      box-shadow: 0 6px 16px rgba(30, 58, 138, 0.3) !important;
      font-weight: 700;
  }

  .pp-signin-right-bar {
      position: sticky;
      top: 10px;
  }

  .spp-phone-wrap {
      display: flex;
      align-items: center;
      border: 1.5px solid #e2e8f0;
      border-radius: 100px;
      overflow: hidden;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
  }

  .spp-phone-wrap:focus-within {
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  }

  .spp-phone-flag {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px;
      background: #f8fafc;
      height: 42px;
      flex-shrink: 0;
  }

  .spp-flag-emoji {
      font-size: 16px;
      line-height: 1;
  }

  .spp-phone-code {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
  }

  .spp-phone-input {
      flex: 1;
      border: none;
      outline: none;
      padding: 0 12px;
      font-size: 14px;
      height: 42px;
      color: #111827;
      font-family: inherit;
      background: transparent;
  }

  .spp-phone-input::placeholder {
      color: #9ca3af;
      font-size: 12px;
  }

  .spp-password-wrap {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
  }

  .spp-password-wrap .spp-phone-input {
      width: 100% !important;
      padding-right: 44px !important;
  }

  .spp-password-toggle {
      position: absolute !important;
      right: 12px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      padding: 6px !important;
      margin: 0 !important;
      color: #64748b !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 15px !important;
      line-height: 1 !important;
      transition: color 0.15s ease !important;
      z-index: 2 !important;
  }

  .spp-password-toggle:hover {
      color: var(--primary, #2563eb) !important;
  }

  .spp-btn-primary {
      width: 100%;
      padding: 14px;
      background: linear-gradient(45deg, #2D51A3, #111E3D);
      color: #fff;
      border: none;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      margin-top: 6px;
      letter-spacing: 0.01em;
  }

  .spp-btn-primary:hover {
      background: #162d4a;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(30, 58, 95, 0.35);
  }

  .spp-help-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid #f1f5f9;
  }

  .spp-help-label {
      font-size: 12px;
      color: #6b7280;
  }

  .spp-help-call {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      background: #f3f4f6;
      border-radius: 20px;
      padding: 4px 11px;
      text-decoration: none;
      transition: all 0.18s ease;
      white-space: nowrap;
      border: 1px solid #e5e7eb;
  }

  .spp-help-call:hover {
      background: #e5e7eb;
      color: #111827;
  }

  .spp-help-wa {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      background: #25d366;
      border-radius: 20px;
      padding: 4px 11px;
      text-decoration: none;
      transition: all 0.18s ease;
      white-space: nowrap;
  }

  .spp-help-wa:hover {
      background: #1ebe5c;
      color: #fff;
  }

  .spp-whatsapp-banner .tt-whatsapp-banner,
  .spp-sidebar-banner .tt-whatsapp-banner {
      background: #f8f2d9;
      border-radius: 14px;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      font-size: 14px;
      display: flex;
  }

  .spp-whatsapp-banner .tt-whatsapp-banner h4,
  .spp-sidebar-banner .spp-sidebar-banner h4 {
      font-size: 16px;
      font-weight: 600;
  }

  .spp-whatsapp-banner .tt-whatsapp-btn,
  .spp-sidebar-banner .tt-whatsapp-btn {
      color: #fff;
      white-space: nowrap;
      background: #44b62c;
      border: none;
      border-radius: 30px;
      padding: 10px 18px;
  }

  .tt-call-btn {
      background-color: #fff;
      color: #000;
      white-space: nowrap;
      border: none;
      border-radius: 30px;
      padding: 10px 18px;
  }

  .spp-step2-row {
      align-items: flex-start;
  }

  .spp-help-section {
      display: flex;
      gap: 10px;
  }
  .spp-help-section .tt-call-btn{
    color: #000;
    background: #fff;
  }

  .spp-form-card {
      background: #fff;
      border-radius: 16px;
      padding: 28px 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .spp-form-title {
      font-size: 22px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 24px;
      line-height: 1.3;
  }

  .spp-form-block {
      margin-bottom: 24px;
      padding: 16px;
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
      border-radius: 12px;
      border: 1px solid #dbeafe;
      transition: all 0.3s ease;
  }

  .spp-form-block:hover {
      border-color: #93c5fd;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  }

  .spp-form-lbl {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .spp-form-lbl span {
      color: #ef4444;
      font-weight: 700;
  }

  .spp-cat-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .spp-cat-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      min-height: 42px;
      border: 1.5px solid #d1d5db;
      border-radius: 24px;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all 0.25s ease;
      background: #fff;
      user-select: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      position: relative;
      white-space: nowrap;
      flex-shrink: 0;
  }

  .spp-cat-chip input[type="radio"] {
      display: none;
  }

  .spp-cat-chip:hover {
      border-color: #3b82f6;
      color: #1e40af;
      background: #eff6ff;
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
      transform: translateY(-2px);
  }

  .spp-cat-chip--active,
  .spp-cat-chip:has(input:checked) {
      border-color: #1e40af;
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      color: #fff;
      box-shadow: 0 6px 16px rgba(30, 58, 138, 0.3);
  }

  .spp-input {
      width: 100%;
      height: 42px;
      padding: 0 13px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: #fff;
  }

  .spp-input:focus {
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  }

  .spp-input::placeholder {
      color: #9ca3af;
      font-size: 12px;
  }

  .spp-consent-block {
      margin-bottom: 18px;
  }

  .spp-consent {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      color: #4b5563;
      cursor: pointer;
      line-height: 1.45;
  }

  .spp-consent input[type="checkbox"] {
      margin-top: 2px;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      accent-color: var(--primary, #2563eb);
  }

  .spp-btn-continue {
      width: 100%;
      padding: 13px;
      background: var(--primary, #2563eb);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
  }

  .spp-btn-continue:hover {
      background: #142e6a;
      transform: translateY(-1px);
  }

  .spp-step2-btn-actions {
      margin-top: 32px;
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
  }

  .spp-step2-btn-continue {
      padding: 13px 24px;
      font-size: 15px !important;
      font-weight: 700;
      line-height: 1.4;
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      color: #fff;
      border: none;
      border-radius: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
  }

  .spp-step2-btn-continue:hover:not(:disabled) {
      box-shadow: 0 8px 20px rgba(30, 58, 138, 0.35);
      transform: translateY(-2px);
  }

  .spp-step2-btn-continue:active:not(:disabled) {
      transform: translateY(0);
  }

  .spp-step2-btn-continue:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  .spp-step2-btn-reset {
      color: #374151;
      background: #f3f4f6;
      border: 1.5px solid #d1d5db;
      border-radius: 24px;
      padding: 13px 24px;
      font-size: 15px;
      font-weight: 600;
      width: auto;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: inherit;
      line-height: 1.4;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .spp-step2-btn-reset:hover:not(:disabled) {
      background: #e5e7eb;
      border-color: #9ca3af;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .spp-step2-btn-reset:active:not(:disabled) {
      transform: scale(0.98);
  }

  .spp-step2-btn-reset:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  .spp-step2-btn-reset i {
      font-size: 14px;
  }
  .spp-hero-mobile-section{
    display: none;
  }
  .spp-hero-mobile{
    display: flex;
    background: #f5f8ff;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
  }
  .spp-hero-mobile .spp-hero-mobile-content{
    color: #000;
    font-weight: 600;
    font-size: 16px;
  }
  .spp-hero-mobile .spp-hero-mobile-desc{
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin-top: 5px;
  }
  .spp-hero-mobile-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
  }
  .spp-hero-mobile-img-wrap{
    width: 200px;
    height: auto;
  }

  /* ── Mobile How It Works Section ── */
  .spp-how-works-desktop {
    display: block;
  }
  .spp-m-how-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 4px;
  }
  .spp-m-how-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
  }
  .spp-m-how-badge {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    letter-spacing: -0.1px;
  }
  .spp-m-how-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
  }
  .spp-m-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
    position: relative;
  }
  .spp-m-icon-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
  }
  .spp-m-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #edf3ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
  .spp-m-line {
    position: absolute;
    top: 50%;
    left: calc(50% + 52px);
    width: calc(100% - 99px);
    height: 1.5px;
    background-color: #e2e8f0;
    transform: translateY(-50%);
    z-index: 1;
  }
  .spp-m-step-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
  }
  .spp-m-step-desc {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1.35;
  }
  .spp-section-mobile{
    margin-bottom: 20px;
  }

  /* ── Mobile Ad Banner ── */
  .add-section-mobile {
    display: none;
    margin: 18px 0;
  }
  .add-section-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f0f6ff;
    background-image: 
      linear-gradient(90deg, #f0f6ff 0%, rgba(240, 246, 255, 0.96) 44%, rgba(240, 246, 255, 0.4) 62%, rgba(240, 246, 255, 0) 80%),
      url('/assets/img/static/signin-pp.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    padding: 24px 20px;
  }
  .add-section-content {
    position: relative;
    z-index: 2;
    max-width: 65%;
  }
  .add-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #0b3d91;
    line-height: 1.25;
    margin: 0 0 14px 0;
    letter-spacing: -0.3px;
  }
  .add-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .add-section-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 400;
    color: #1e293b;
    line-height: 1.3;
  }
  .add-section-list li i {
    color: #0b3d91;
    font-size: 16px;
    flex-shrink: 0;
  }

  .bottom-section-text{
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  

  @media(max-width: 768px) {
    .spp-hero-mobile-section{
        display: block!important;
    }
    .spp-hero-banner{
        display: none;
    }
    .spp-how-works-desktop {
        display: none !important;
    }
    .spp-section-mobile {
        display: block !important;
        background: #ffffff;
        border-radius: 12px;
        padding: 16px 8px 18px;
        margin-bottom: 16px;
        border: 1px solid #edf2f7;
    }
    .add-section-mobile {
        display: block !important;
    }
      .spp-step2-btn-reset {
          font-size: 12px;
          padding: 8px 10px;
      }

      .spp-step2-btn-continue {
          padding: 8px 10px;
          font-size: 12px;
      }
      .spp-m-line{
        left: calc(50% + 32px);
        width: calc(100% - 64px);
        height: 1px;
        }
        .spp-m-step-title {
            font-size: 12px;
        }
        .spp-m-step-desc {
            font-size: 11px;
        }
        .spp-m-circle{
            width: 50px;
            height: 50px;
        }
        
        .bottom-section-text{
            font-size: 11px;
        }
  }

  @media (max-width: 498px) {
    .spp-m-circle {
      width: 44px;
      height: 44px;
      font-size: 17px;
    }
    .spp-m-line {
      left: calc(50% + 28px);
      width: calc(100% - 56px);
    }
    .spp-m-step-title {
      font-size: 10px!important;
    }
    .spp-m-step-desc {
      font-size: 10px;
    }
    .add-section-banner {
      padding: 18px 14px;
    }
    .add-section-content {
      max-width: 68%;
    }
    .add-section-title {
      font-size: 17px;
      margin-bottom: 12px;
    }
    .add-section-list {
      gap: 8px;
    }
    .add-section-list li {
      font-size: 11.5px;
    }
    .add-section-list li i {
      font-size: 14px;
    }
  }

  .spp-sidebar {
      position: sticky;
      top: 80px;
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .spp-wa-card {
      background: #fff;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
  }

  .spp-wa-title {
      font-size: 13px;
      font-weight: 600;
      color: #111827;
      margin: 0;
      flex: 1;
      line-height: 1.4;
  }

  .spp-wa-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #25d366;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s;
      font-family: inherit;
  }

  .spp-wa-btn:hover {
      background: #1ebe5c;
      color: #fff;
  }

  .tt-sell-banner {
      margin-bottom: 10px;
      background: var(--primary);
      color: #fff;
      border-radius: 14px;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding: 10px 0 10px 25px;
      display: flex;
  }

  .tt-sell-banner button {
      color: var(--primary);
      background: #fff;
      border: none;
      border-radius: 6px;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      padding: 10px 18px;
      display: flex;
  }

  .tt-sell-banner img {
      max-width: 120px;
  }

  .spp-sell-card {
      background: var(--primary, #2563eb);
      color: #fff;
      border-radius: 10px;
      padding: 16px 12px 0 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      overflow: hidden;
      min-height: 100px;
  }

  .spp-sell-card-body {
      padding-bottom: 16px;
      flex: 1;
  }

  .spp-sell-card-body h4 {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.35;
  }

  .spp-enquire-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      color: var(--primary, #2563eb);
      border-radius: 20px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.18s ease;
      white-space: nowrap;
  }

  .spp-enquire-btn:hover {
      background: #eff6ff;
      color: #1d4ed8;
  }

  .spp-sell-img {
      width: 80px;
      height: auto;
      object-fit: contain;
      flex-shrink: 0;
      align-self: flex-end;
  }

  .spp-big-house {
      display: flex;
      justify-content: center;
  }

  .spp-big-house-img {
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
  }

  /* ══ RESPONSIVE ═══════════════════════════════════════════ */
  @media (max-width: 1300px) {
      .spp-hero-title {
          font-size: 20px !important;
      }

      .spp-hero-img {
          width: 120px;
      }

      .spp-hero-desc {
          font-size: 13px !important;
      }

      .spp-hero-benefits li {
          font-size: 13px !important;
      }

      .spp-step-card {
          min-height: 100px !important;
          margin-bottom: 10px;
      }

      .spp-tip-card strong {
          margin-bottom: 5px !important;
      }

      .sell-tip {
          margin-bottom: 10px !important;
      }
  }

  @media (max-width: 991px) {

      .spp-hero-desc,
      .spp-hero-benefits li {
          font-size: 13px;
      }

      .spp-stat-icon {
          width: 35px;
          height: 35px;
          font-size: 12px;
      }

      .spp-stat-item strong {
          font-size: 15px;
      }

      .spp-stat-item {
          line-height: 1rem;
      }

      .status-card-login {
          padding: 0px 0px 30px;
      }

      .spp-tip-card strong {
          font-size: 13px !important;
          margin-bottom: 5px;
      }

      .spp-whatsapp-banner {
          display: none;
      }

  }



  @media (max-width: 768px) {
      .spp-page-step1 {
          padding: 20px 0 40px;
      }

      .spp-page-step2 {
          padding: 20px 0 40px;
      }

      .spp-hero-banner {
          padding: 24px 18px 0;
          min-height: 160px;
      }

      .spp-hero-title {
          font-size: 1.2rem;
      }

      .spp-hero-img {
          width: 90px;
      }

      .spp-signin-card {
          position: static;
          margin-top: 0px !important;
          margin-bottom: 10px;
      }

      .spp-sidebar {
          position: static;
          margin-top: 24px;
      }

      .spp-form-card {
          padding: 20px 16px;
      }

      .spp-stats-row {
          gap: 14px;
      }

      .spp-big-house {
          display: none;
      }

      .spp-wa-card {
          flex-direction: column;
          align-items: flex-start;
      }

      .spp-hero-desc {
          font-size: 13px;
      }

      .spp-hero-benefits {
          margin-bottom: 0px !important;
      }

      .spp-hero-text {
          padding-bottom: 0px;
          ;
      }

      .spp-step-card {
          padding: 12px 14px;
          min-height: 120px;
          margin-bottom: 10px;
      }

      .spp-step-num {
          font-size: 24px;
          margin-bottom: 15px;
      }

      .spp-stat-item strong {
          font-size: 20px;
      }

      .spp-section-title {
          font-size: 18px !important;
      }

  }

  @media (min-width: 481px) and (max-width: 800px) {
      .status-card-login {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 0 !important;
      }

      .status-card-login .spp-stat-item {
          flex: 1 1 0 !important;
          width: auto !important;
          max-width: none !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          gap: 6px !important;
          border-right: 1px solid #d1d9e6;
          padding: 0 8px !important;
      }

      .status-card-login .spp-stat-item:last-child {
          border-right: none;
      }

      .status-card-login .spp-stat-item > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
      }

      .status-card-login .spp-stat-icon {
          width: 40px !important;
          height: 40px !important;
          font-size: 16px !important;
          margin-bottom: 4px;
      }

      .status-card-login .spp-stat-item strong {
          font-size: 18px !important;
          font-weight: 700 !important;
          line-height: 1.2 !important;
          white-space: nowrap;
      }

      .status-card-login .spp-stat-item .spp-stat-icon-text {
          font-size: 11px !important;
          color: #6b7280 !important;
          line-height: 1.2 !important;
          white-space: nowrap;
      }
  }

  @media (max-width: 480px) {
      .spp-hero-banner {
          flex-direction: column;
          align-items: flex-start;
          padding: 20px 16px 16px;
          margin-bottom: 10px;
      }

      .spp-hero-img-wrap {
          display: none;
      }

      .spp-tab {
          padding: 5px 11px;
          font-size: 12px;
      }

      .spp-cat-chip {
          padding: 5px 11px;
          font-size: 12px;
      }

      .spp-form-title {
          font-size: 17px;
      }

      .status-card-login {
          padding: 12px 0px;
          gap: 0;
          margin-bottom: 15px;
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          border-radius: 12px;
          padding: 14px 10px !important;
          background: #f5f8ff;
          margin-top: 0px;
      }

      .status-card-login .spp-stat-item {
          flex: 1 1 0 !important;
          width: auto !important;
          max-width: none !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          gap: 6px !important;
          border-right: 1px solid #d1d9e6;
          padding: 0 8px !important;
      }

      .status-card-login .spp-stat-item:last-child {
          border-right: none;
      }

      .status-card-login .spp-stat-icon {
          width: 36px !important;
          height: 36px !important;
          font-size: 14px !important;
      }

      .status-card-login .spp-stat-item strong {
          font-size: 16px !important;
          font-weight: 700 !important;
          line-height: 1.2 !important;
      }

      .status-card-login .spp-stat-item .spp-stat-icon-text {
          font-size: 10px !important;
          color: #6b7280 !important;
          line-height: 1.2 !important;
      }

      .spp-section {
          margin-bottom: 10px;
      }
      .spp-tips,
      .spp-faq-section{
        display: none;
      }

      .spp-stat-icon {
          font-size: 12px!important;
          width: 35px;
          height: 35px;
      }

      .spp-tip-card {
          padding: 6px 8px !important;

      }

      .spp-tip-card strong {
          font-size: 13px !important;
          margin-bottom: 5px !important;
      }

      .spp-tip-card p {
          font-size: 12px !important;
      }
  }

  .spp-hero-content {
      padding-right: 20px;
  }

  .spp-hero-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary);
      line-height: 1.2;
      margin-bottom: 12px;
  }

  .spp-hero-highlight {
      color: var(--primary, #2563eb);
  }

  .spp-hero-desc {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 14px;
      line-height: 1.6;
  }

  .spp-hero-benefits {
      list-style: none;
      padding: 0;
      margin-bottom: 32px;
  }

  .spp-hero-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
      color: #374151;
      margin-bottom: 8px;
  }

  .spp-hero-benefits li i {
      color: #10b981;
      margin-top: 2px;
      flex-shrink: 0;
  }

  /* ── Section Titles ────────────────────────────────────── */
  .spp-section-title {
      font-size: 20px;
      font-weight: 500;
      color: #111827;
      margin-bottom: 18px;
  }

  /* ── How it works ──────────────────────────────────────── */
  .spp-how-section {
      margin-bottom: 32px;
  }

  .spp-stats-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 32px;
  }

  .spp-stat-card {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .spp-stat-card strong {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: #111827;
  }

  .spp-stat-card p {
      margin: 0;
      font-size: 12px;
      color: #6b7280;
  }

  /* ── Tips Section ──────────────────────────────────────── */
  .spp-tips-section {
      margin-bottom: 32px;
  }

  .sell-tip {
      margin-bottom: 20px;
  }

  .spp-tip-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #fff;
      border: 1px solid #f3f5ff;
      border-radius: 10px;
      padding: 14px 12px;
      height: 100%;
  }

  .spp-tip-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #f3f5ff;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
  }

  .spp-tip-card strong {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 15px;
  }

  .spp-tip-card p {
      margin: 0;
      font-size: 13px;
      color: #6b7280;
      line-height: 1.4;
  }

  /* ── FAQ Section ───────────────────────────────────────── */
  .spp-faq-section {
      margin-bottom: 32px;
  }

  .spp-faq-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      color: #374151;
      cursor: pointer;
      transition: border-color 0.2s;
  }

  .spp-faq-item:hover {
      border-color: var(--primary, #2563eb);
  }

  .spp-faq-item i {
      color: #9ca3af;
      font-size: 12px;
      flex-shrink: 0;
      margin-left: 8px;
  }

  /* ── Testimonials ──────────────────────────────────────── */
  .spp-testimonial-section {
      margin-bottom: 32px;
  }

  .spp-testimonial-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      height: 100%;
  }

  .spp-testimonial-card p {
      font-size: 13px;
      color: #4b5563;
      line-height: 1.6;
      margin-bottom: 12px;
  }

  .spp-testimonial-author {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #374151;
      font-weight: 600;
  }

  .spp-verified {
      color: #10b981;
  }


  .spp-signin-title {
      font-size: 21px;
      font-weight: 700;
      text-align: center;
      color: var(--primary);
      margin-bottom: 20px;
  }

  /* ── Toggle Button Group (shared) ──────────────────────── */
  .spp-field-group {
      margin-bottom: 18px;
  }

  .spp-form-group {
      margin-bottom: 20px;
  }

  .spp-field-label,
  .spp-form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 8px;
  }

  .spp-toggle-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
  }

  .spp-toggle-btn {
      padding: 7px 16px;
      border-radius: 20px;
      border: 1.5px solid #e5e7eb;
      background: #fff;
      color: #374151;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      white-space: nowrap;
  }

  .spp-toggle-btn:hover {
      border-color: var(--primary, #2563eb);
      color: var(--primary, #2563eb);
  }

  .spp-toggle-btn.active {
      border-color: var(--primary, #2563eb);
      background: var(--primary, #2563eb);
      color: #fff;
  }

  /* ── Phone Input ───────────────────────────────────────── */
  .spp-phone-input {
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #fff;
      transition: border-color 0.2s;
  }

  .spp-phone-input:focus-within {
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }

  .spp-phone-prefix {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      background: #f9fafb;
      border-right: 1.5px solid #e5e7eb;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      height: 44px;
      white-space: nowrap;
      flex-shrink: 0;
  }

  .spp-phone-field {
      flex: 1;
      border: none;
      outline: none;
      padding: 0 14px;
      font-size: 14px;
      height: 44px;
      color: #111827;
      font-family: inherit;
      background: transparent;
  }

  /* ── CTA Button ────────────────────────────────────────── */
  .spp-cta-btn {
      width: 100%;
      padding: 13px;
      background: var(--primary, #2563eb);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      margin-top: 4px;
  }

  .spp-cta-btn:hover {
      background: var(--primary-hover, #1d4ed8);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }

  .spp-cta-full {
      margin-top: 0;
  }

  /* ── Help Row ──────────────────────────────────────────── */
  .spp-help-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
      font-size: 13px;
      color: #6b7280;
  }

  .spp-help-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      background: #f3f4f6;
      border-radius: 20px;
      padding: 5px 12px;
      text-decoration: none;
      transition: all 0.2s ease;
      white-space: nowrap;
  }

  .spp-help-link:hover {
      background: #e5e7eb;
      color: #111827;
  }

  .spp-help-link--wa {
      background: #dcfce7;
      color: #15803d;
  }

  .spp-help-link--wa:hover {
      background: #bbf7d0;
      color: #14532d;
  }

  /* ── Step 2 — Property Form Section ───────────────────── */
  .spp-step2-section {
      padding: 40px 0 60px;
  }

  .spp-step2-form-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 32px 28px;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  }

  .spp-step2-title {
      font-size: 22px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 24px;
  }

  /* ── Property Category Grid ────────────────────────────── */
  .spp-category-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .spp-category-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border: 1.5px solid #e5e7eb;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all 0.2s ease;
      background: #fff;
      user-select: none;
  }

  .spp-category-item input[type="radio"] {
      display: none;
  }

  .spp-category-item:hover {
      border-color: var(--primary, #2563eb);
      color: var(--primary, #2563eb);
      background: #eff6ff;
  }

  .spp-category-item:has(input:checked) {
      border-color: var(--primary, #2563eb);
      background: var(--primary, #2563eb);
      color: #fff;
  }

  .spp-category-item i {
      font-size: 13px;
  }

  /* ── Form Input ────────────────────────────────────────── */
  .spp-form-input {
      width: 100%;
      height: 44px;
      padding: 0 14px;
      border: 1.5px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: #fff;
  }

  .spp-form-input:focus {
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }

  /* ── Consent Row ───────────────────────────────────────── */
  .spp-consent-row {
      margin-top: 8px;
  }

  .spp-consent-label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      color: #4b5563;
      cursor: pointer;
  }

  .spp-consent-label input[type="checkbox"] {
      margin-top: 2px;
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      accent-color: var(--primary, #2563eb);
  }

  /* ── Step 2 Sidebar ────────────────────────────────────── */
  .spp-step2-sidebar {
      position: sticky;
      top: 80px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .spp-sidebar-block {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 12px;
      margin: 0 !important;
  }

  .spp-sidebar-banner {
      margin-top: 0 !important;
  }

  /* House illustration */
  .spp-house-image-wrap {
      display: flex;
      justify-content: center;
      padding: 16px 0;
  }

  .spp-house-img {
      max-width: 260px;
      width: 100%;
      height: auto;
      object-fit: contain;
  }

  /* ── Responsive ────────────────────────────────────────── */
  @media (max-width: 768px) {
      .spp-hero-title {
          font-size: 1.2rem;
      }

      .spp-signin-card {
          position: static;
          margin-top: 28px;
      }

      .spp-step2-sidebar {
          position: static;
          margin-top: 24px;
      }

      .spp-step2-form-card {
          padding: 20px 16px;
      }

      .spp-stats-row {
          gap: 14px;
      }

      .spp-stat-card strong {
          font-size: 16px;
      }

      .spp-house-image-wrap {
          display: none;
      }

      .spp-hero-section,
      .spp-step2-section {
          padding: 24px 0 40px;
      }

      .spp-step1-row {
          display: flex;
      }

      .spp-hero-content {
          order: 2;
      }

      .pp-signin-right-bar {
          margin-top: 0px;
          position: static;
      }
  }

  @media (max-width: 480px) {
      .spp-toggle-group {
          gap: 6px;
      }

      .spp-toggle-btn {
          padding: 6px 12px;
          font-size: 12px;
      }

      .spp-category-grid {
          gap: 7px;
      }

      .spp-category-item {
          padding: 6px 11px;
          font-size: 12px;
      }

      .spp-step2-title {
          font-size: 18px;
      }

      .spp-tip-icon {
          width: 32px;
          height: 32px;
          font-size: 12px;
      }

      .spp-faq-question {
          padding: 8px 10px;
          font-size: 13px;
      }

      .spp-testi-card p {
          font-size: 13px;
      }

      .spp-testi-avatar {
          width: 38px;
          height: 38px;
      }

      .spp-btn-primary {
          padding: 12px;
          font-size: 13px;
      }

      .spp-whatsapp-banner .tt-whatsapp-banner {
          display: none;
      }

      .spp-page .col-md-7,
      .spp-page .col-md-4,
      .spp-page .col-md-5 {
          padding: 0px;
      }

      .sell-tip {
          margin-bottom: 6px;
      }

      /* .spp-step1-row {
          display: flex;
      }

      .spp-hero-content {
          order: 2;
      }

      .pp-signin-right-bar {
          margin-top: 0px;
          position: static;
      } */

  }



  /* ============================= */
  /*   SIGN IN STEP 2 - NEW SECTIONS */
  /* ============================= */

  .spp-section-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f0f0f0;
  }

  .spp-section-title {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      flex: 1;
  }

  .spp-field-group {
      margin-bottom: 16px;
  }

  .spp-field-group textarea.spp-input {
      min-height: 100px;
      padding: 10px 13px;
      resize: vertical;
      font-family: inherit;
  }

  .spp-section-info {
      font-size: 13px;
      color: #666;
      margin-bottom: 16px;
  }


  /* ============================================================
   PROPERTY POSTING FLOW (ppf-* prefix)
   Multi-step card-based form with progress tracking
   ============================================================ */

  .ppf-progress-container {
      margin-bottom: 40px;
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .ppf-progress-track {
      height: 4px;
      background: #e5e7eb;
      border-radius: 2px;
      margin-bottom: 24px;
      overflow: hidden;
  }

  .ppf-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary, #2563eb), #3b82f6);
      transition: width 0.3s ease;
  }

  .ppf-progress-steps {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
  }

  .ppf-progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 120px;
      text-align: center;
  }

  .ppf-step-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      background: #f3f4f6;
      color: #6b7280;
      border: 2px solid #e5e7eb;
  }

  .ppf-progress-step--completed .ppf-step-circle {
      background: #10b981;
      color: white;
      border-color: #10b981;
  }

  .ppf-progress-step--active .ppf-step-circle {
      background: var(--primary, #2563eb);
      color: white;
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  .ppf-step-label {
      font-size: 12px;
      font-weight: 500;
      color: #6b7280;
      transition: color 0.3s ease;
      max-width: 100px;
      white-space: normal;
      line-height: 1.3;
  }

  .ppf-progress-step--active .ppf-step-label,
  .ppf-progress-step--completed .ppf-step-label {
      color: #111827;
      font-weight: 600;
  }

  /* Card Styles */
  .ppf-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
      min-height: 500px;
      display: flex;
      flex-direction: column;
  }

  .ppf-card--active {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .ppf-card-content {
      flex: 1;
      padding: 40px 32px;
  }

  .ppf-card-title {
      font-size: 24px;
      font-weight: 700;
      color: #111827;
      margin: 0 0 8px 0;
      line-height: 1.3;
  }

  .ppf-card-description {
      font-size: 14px;
      color: #6b7280;
      margin: 0 0 32px 0;
  }

  /* Field Sections */
  .ppf-field-section {
      margin-bottom: 24px;
  }

  .ppf-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 8px;
  }

  .ppf-required {
      color: #ef4444;
      margin-left: 2px;
  }

  .ppf-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      font-family: inherit;
  }

  .ppf-input::placeholder {
      color: #9ca3af;
  }

  .ppf-input:focus {
      outline: none;
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }

  textarea.ppf-input {
      resize: vertical;
      min-height: 120px;
  }

  /* Helper Text */
  .ppf-helper-text {
      display: block;
      font-size: 12px;
      color: #6b7280;
      margin-top: 6px;
      line-height: 1.4;
  }

  /* Grid Layouts */
  .ppf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
  }

  .ppf-row.ppf-row--three {
      grid-template-columns: repeat(3, 1fr);
  }

  .ppf-col {
      display: flex;
      flex-direction: column;
  }

  /* Toggle Group */
  .ppf-toggle-group {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
  }

  .ppf-toggle-btn {
      flex: 1;
      padding: 12px 16px;
      background: #f3f4f6;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
  }

  .ppf-toggle-btn:hover {
      border-color: var(--primary, #2563eb);
      color: var(--primary, #2563eb);
  }

  .ppf-toggle-btn--active {
      background: var(--primary, #2563eb);
      border-color: var(--primary, #2563eb);
      color: white;
  }

  /* Category Grid */
  .ppf-category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
  }

  .ppf-category-chip {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: #f9fafb;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .ppf-category-chip input {
      cursor: pointer;
  }

  .ppf-category-chip:hover {
      border-color: var(--primary, #2563eb);
      background: #f0f9ff;
  }

  .ppf-category-chip--active,
  .ppf-category-chip input:checked+span {
      background: #eff6ff;
      border-color: var(--primary, #2563eb);
  }

  .ppf-category-chip input:checked {
      accent-color: var(--primary, #2563eb);
  }

  .ppf-category-chip span {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
  }

  /* Placeholder */
  .ppf-placeholder {
      padding: 20px;
      text-align: center;
      background: #f9fafb;
      border-radius: 8px;
      color: #6b7280;
      font-size: 14px;
  }

  /* File Upload */
  .ppf-file-upload {
      position: relative;
      margin-bottom: 24px;
  }

  .ppf-file-input {
      display: none;
  }

  .ppf-file-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 40px 24px;
      background: #f9fafb;
      border: 2px dashed #d1d5db;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .ppf-file-label:hover {
      border-color: var(--primary, #2563eb);
      background: #f0f9ff;
  }

  .ppf-file-label i {
      font-size: 32px;
      color: var(--primary, #2563eb);
  }

  .ppf-file-label span {
      font-size: 14px;
      font-weight: 500;
      color: #111827;
  }

  .ppf-file-label small {
      font-size: 12px;
      color: #6b7280;
  }

  /* Image Preview */
  .ppf-image-preview {
      margin-bottom: 24px;
  }

  .ppf-preview-title {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 12px;
  }

  .ppf-image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 12px;
  }

  .ppf-image-card {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1;
      background: #f3f4f6;
  }

  .ppf-image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .ppf-image-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 28px;
      height: 28px;
      background: rgba(239, 68, 68, 0.9);
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all 0.2s ease;
      opacity: 0;
  }

  .ppf-image-card:hover .ppf-image-remove {
      opacity: 1;
  }

  .ppf-image-remove:hover {
      background: rgba(239, 68, 68, 1);
      transform: scale(1.1);
  }

  /* Error Message */
  .ppf-error-message {
      padding: 12px;
      background: #fee2e2;
      border: 1px solid #fecaca;
      border-radius: 8px;
      color: #991b1b;
      font-size: 13px;
      margin-bottom: 16px;
  }

  /* Amenities Grid */
  .ppf-amenities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
  }

  .ppf-amenity-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .ppf-amenity-chip:hover {
      border-color: var(--primary, #2563eb);
      background: #f0f9ff;
  }

  .ppf-amenity-chip input {
      cursor: pointer;
      accent-color: var(--primary, #2563eb);
  }

  .ppf-amenity-chip input:checked~span {
      color: var(--primary, #2563eb);
      font-weight: 600;
  }

  .ppf-amenity-chip span {
      font-size: 13px;
      color: #374151;
      user-select: none;
  }

  /* Checkbox */
  .ppf-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      padding: 12px;
      border-radius: 8px;
      transition: background 0.2s ease;
      margin-bottom: 12px;
  }

  .ppf-checkbox:hover {
      background: #f9fafb;
  }

  .ppf-checkbox input {
      margin-top: 2px;
      cursor: pointer;
      accent-color: var(--primary, #2563eb);
  }

  .ppf-checkbox span {
      font-size: 14px;
      color: #374151;
      line-height: 1.4;
  }

  /* Summary Section */
  .ppf-summary {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 20px;
      margin-top: 24px;
  }

  .ppf-summary-title {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      margin: 0 0 16px 0;
  }

  .ppf-summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #e5e7eb;
      font-size: 13px;
  }

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

  .ppf-summary-item span {
      color: #6b7280;
  }

  .ppf-summary-item strong {
      color: #111827;
      font-weight: 600;
      word-break: break-word;
  }

  /* Card Footer */
  .ppf-card-footer {
      display: flex;
      gap: 12px;
      padding: 24px 32px;
      border-top: 1px solid #e5e7eb;
      background: #fafafa;
      border-radius: 0 0 12px 12px;
      justify-content: flex-end;
  }

  /* Buttons */
  .ppf-btn {
      padding: 11px 20px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: center;
      min-width: 140px;
      justify-content: center;
  }

  .ppf-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }

  .ppf-btn--primary {
      background: var(--primary, #2563eb);
      color: white;
  }

  .ppf-btn--primary:hover:not(:disabled) {
      background: #1d4ed8;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }

  .ppf-btn--secondary {
      background: #f3f4f6;
      color: #374151;
      border: 1px solid #d1d5db;
  }

  .ppf-btn--secondary:hover:not(:disabled) {
      background: #e5e7eb;
      border-color: #9ca3af;
  }

  .ppf-btn--success {
      background: #10b981;
      color: white;
  }

  .ppf-btn--success:hover:not(:disabled) {
      background: #059669;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  /* Sidebar */
  .ppf-sidebar {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .ppf-info-card,
  .ppf-help-card,
  .ppf-stats-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .ppf-info-card h4,
  .ppf-help-card h4,
  .ppf-stats-card h4 {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      margin: 0 0 12px 0;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .ppf-info-card h4 i,
  .ppf-help-card h4 i {
      font-size: 16px;
      color: var(--primary, #2563eb);
  }

  .ppf-info-card p,
  .ppf-help-card p {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.6;
      margin: 0;
  }

  .ppf-help-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding: 8px 12px;
      background: #25d366;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s ease;
  }

  .ppf-help-link:hover {
      background: #1da52f;
      transform: translateY(-2px);
  }

  /* Stats Card */
  .ppf-stats-card {
      padding: 16px;
      background: linear-gradient(135deg, #f0f9ff 0%, #f0fdf4 100%);
      border: 1px solid #dbeafe;
  }

  .ppf-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
  }

  .ppf-stat:not(:last-child) {
      border-bottom: 1px solid #e0e7ff;
  }

  .ppf-stat-label {
      font-size: 12px;
      color: #6b7280;
      font-weight: 500;
      text-transform: uppercase;
  }

  .ppf-stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary, #2563eb);
  }

  /* Responsive */
  @media (max-width: 768px) {
      .ppf-card-content {
          padding: 24px 20px;
      }

      .ppf-card-title {
          font-size: 20px;
      }

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

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

      .ppf-toggle-group {
          flex-direction: column;
      }

      .ppf-category-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .ppf-amenities-grid {
          grid-template-columns: 1fr;
      }

      .ppf-image-grid {
          grid-template-columns: repeat(3, 1fr);
      }

      .ppf-progress-steps {
          overflow-x: auto;
          padding-bottom: 8px;
      }

      .ppf-progress-step {
          min-width: 100px;
          flex: 0 0 auto;
      }

      .ppf-step-label {
          font-size: 11px;
      }

      .ppf-card-footer {
          flex-direction: column;
          justify-content: center;
      }

      .ppf-btn {
          min-width: 100%;
      }

      .ppf-sidebar {
          margin-top: 24px;
      }
  }

  @media (max-width: 576px) {
      .ppf-progress-container {
          padding: 16px;
          margin-bottom: 24px;
      }

      .ppf-card-content {
          padding: 20px 16px;
          min-height: auto;
      }

      .ppf-card-title {
          font-size: 18px;
      }

      .ppf-card-description {
          font-size: 13px;
      }

      .ppf-label {
          font-size: 13px;
      }

      .ppf-input {
          font-size: 13px;
          padding: 9px 10px;
      }

      .ppf-category-grid {
          grid-template-columns: 1fr;
      }

      .ppf-image-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .ppf-file-label {
          padding: 24px 16px;
      }

      .ppf-progress-step {
          min-width: 80px;
      }

      .ppf-step-circle {
          width: 36px;
          height: 36px;
          font-size: 12px;
      }

      .ppf-card-footer {
          padding: 16px;
      }
  }

  /* ══════════════════════════════════════════════════════════════
   Continue Posting Prompt Modal
   ══════════════════════════════════════════════════════════════ */
  .continue-posting-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.58);
  }

  .continue-posting-card {
      width: min(100%, 480px);
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 22px 70px rgba(15, 23, 42, 0.25);
      overflow: hidden;
  }

  .continue-posting-header {
      padding: 24px 24px 18px;
      position: relative;
  }

  .continue-posting-close {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: #f1f5f9;
      color: #475569;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
  }

  .continue-posting-close:hover {
      background: #e2e8f0;
      color: #1e293b;
  }

  .continue-posting-title,
  .continue-posting-section {
      margin: 0;
      padding-right: 40px;
      color: #102a43;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
  }

  .continue-posting-text {
      margin: 8px 0 0;
      color: #52606d;
      font-size: 14px;
  }

  .continue-posting-draft-box {
      margin: 0 22px 18px;
      padding: 14px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      background: #f8fbff;
  }

  .continue-posting-draft-icon {
      width: 76px;
      height: 76px;
      flex-shrink: 0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e5f3ff;
      color: #1677c8;
      font-size: 34px;
  }

  .continue-posting-draft-info {
      flex: 1;
  }

  .continue-posting-draft-title {
      color: #102a43;
      font-size: 16px;
      font-weight: 700;
  }

  .continue-posting-draft-desc {
      margin-top: 5px;
      color: #52606d;
      font-size: 13px;
      line-height: 1.4;
  }

  .continue-posting-actions {
      padding: 0 22px 22px;
  }

  .continue-posting-btn-primary {
      width: 100%;
      padding: 12px 16px;
      border: 0;
      border-radius: 7px;
      background: var(--primary);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
  }

  .continue-posting-btn-primary:hover {
      background: #076cb8;
  }

  .continue-posting-btn-primary i {
      margin-left: 7px;
      font-size: 13px;
  }

  .continue-posting-btn-dismiss {
      display: block;
      margin: 16px auto 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #0879d1;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s ease;
  }

  .continue-posting-btn-dismiss:hover {
      color: #05508a;
      text-decoration: underline;
  }

  @media(max-width: 768px){
     .continue-posting-title,
        .continue-posting-section{
            font-size: 16px;
        }
        .continue-posting-text{
            font-size: 12px;
        }
        .continue-posting-draft-desc{
            font-size: 11px;
            line-height: 1rem;
        }
        .continue-posting-draft-icon{
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }
        .continue-posting-draft-title{
            font-size: 14px;
            margin-bottom: 0px;
        }
        .continue-posting-draft-box{
            padding: 10px;
        }
  }

  @media (max-width: 480px) {
      .continue-posting-overlay {
          padding: 12px;
      }

      .continue-posting-header {
          padding: 20px 18px 14px;
      }

      .continue-posting-draft-box {
          margin: 0 16px 14px;
          padding: 12px;
          gap: 12px;
      }

      .continue-posting-draft-icon {
          width: 40px;
          height: 40px;
          font-size: 16px;
      }

      .continue-posting-actions {
          padding: 0 16px 18px;
      }

      .continue-posting-text {
          line-height: 1.2;
      }

      .continue-posting-draft-title {
          font-size: 14px;
          font-weight: 600;
      }

      .continue-posting-btn-primary {
          font-size: 13px;
          font-weight: 500;
      }

      .continue-posting-btn-dismiss {
          font-size: 12px;
      }

  }

  /* ══════════════════════════════════════════════════════════════
   Guest Property Login Modal
   ══════════════════════════════════════════════════════════════ */
  .gpl-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
  }

  .gpl-modal-card {
      position: relative;
      background: white;
      border-radius: 12px;
      padding: 30px 25px;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }

  .gpl-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      color: #9ca3af;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s ease;
  }

  .gpl-modal-close:hover {
      color: #475569;
  }

  .gpl-modal-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #1e293b;
  }

  .gpl-modal-desc {
      font-size: 14px;
      color: #64748b;
      margin-bottom: 24px;
      line-height: 1.5;
  }

  .gpl-modal-error {
      margin-bottom: 16px;
      font-size: 14px;
      color: #dc2626;
  }

  .gpl-form-group {
      margin-bottom: 16px;
  }

  .gpl-form-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #374151;
  }

  .gpl-phone-wrap {
      display: flex;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .gpl-phone-wrap:focus-within {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  .gpl-phone-flag {
      background: #f3f4f6;
      padding: 12px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
  }

  .gpl-phone-input {
      flex: 1;
      border: none;
      padding: 12px 12px;
      font-size: 14px;
      outline: none;
      color: #111827;
      background: transparent;
  }

  .gpl-form-hint {
      font-size: 12px;
      color: #6b7280;
      margin-top: 6px;
  }

  .gpl-otp-input {
      width: 100%;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 12px 12px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      letter-spacing: 8px;
      outline: none;
      color: #111827;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .gpl-otp-input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  .gpl-btn-primary {
      width: 100%;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, opacity 0.15s ease;
  }

  .gpl-btn-primary:hover:not(:disabled) {
      background: #1d4ed8;
  }

  .gpl-btn-primary:disabled {
      cursor: not-allowed;
      opacity: 0.6;
  }

  .gpl-btn-verify {
      margin-bottom: 12px;
  }

  .gpl-btn-secondary {
      width: 100%;
      background: transparent;
      color: #2563eb;
      border: 1px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
  }

  .gpl-btn-secondary:hover {
      background: #eff6ff;
  }

  @media(max-width: 768px) {
      .gpl-modal-card {
          padding: 15px 12px;
      }

      .gpl-modal-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
      }

      .gpl-modal-desc {
          font-size: 12px;
          line-height: 1.2;
          margin-bottom: 15px;
      }

      .gpl-btn-primary {
          font-weight: 500;
      }
  }

  .smart-recs-loading {
      margin-bottom: 24px;
  }

  .smart-recs-skeleton {
      height: 120px;
      border-radius: 10px;
      background: #f0f0f0;
      margin-bottom: 12px;
      animation: tt-pulse 1.4s ease-in-out infinite;
  }

  .smart-recs-skeleton.compact {
      height: 80px;
  }

  @media (max-width: 767px) {
      .smart-recs-skeleton {
          height: 80px;
      }

      .smart-recs-skeleton.compact {
          height: 60px;
      }
  }

  

/* ========== RangeSlider Component Styles ========== */

.range-slider-container {
  width: 100%;
  padding: 8px 0;
  margin: 4px 0;
}

.range-slider-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.range-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.range-slider {
  position: relative;
  height: 30px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  padding: 0;
}

.range-track {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #d9d9d9;
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.range-progress {
  position: absolute;
  height: 3px;
  background: #1f5aa8;
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.range-input {
  position: absolute;
  width: 100%;
  height: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
  z-index: 3;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Thumb styling for range inputs */
.range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #1f5aa8;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(31, 90, 168, 0.4);
  transition: all 0.2s ease;
}

.range-input::-webkit-slider-thumb:hover {
  background: #1a4a8f;
  box-shadow: 0 2px 8px rgba(31, 90, 168, 0.5);
}

.range-input::-webkit-slider-thumb:active {
  background: #164080;
  box-shadow: 0 2px 8px rgba(22, 64, 128, 0.6);
}

.range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #1f5aa8;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(31, 90, 168, 0.4);
  transition: all 0.2s ease;
}

.range-input::-moz-range-thumb:hover {
  background: #1a4a8f;
  box-shadow: 0 2px 8px rgba(31, 90, 168, 0.5);
}

.range-input::-moz-range-thumb:active {
  background: #164080;
  box-shadow: 0 2px 8px rgba(22, 64, 128, 0.6);
}

.range-input::-moz-range-track {
  background: none;
  border: none;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-top: 8px;
  gap: 8px;
}

.range-label-input {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  flex: 0 0 auto;
  width: 90px;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

.range-label-input:hover {
  background: #fafafa;
  border-color: #d0d0d0;
}

.range-label-input:focus {
  background: white;
  border-color: #1f5aa8;
  box-shadow: 0 0 0 2px rgba(31, 90, 168, 0.1);
}

@media (max-width: 768px) {
  .range-slider {
    height: 28px;
  }

  .range-input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
  }

  .range-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }
}


/* ============================================ 
   MOBILE ENHANCEMENTS FOR SIGNIN-POSTPROPERTY STEP 2
   ============================================ */

@media (max-width: 768px) {
  .spp-form-card {
      padding: 20px 16px;
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .spp-form-title {
      font-size: 18px;
      margin-bottom: 20px;
      font-weight: 700;
  }

  .spp-form-block {
      margin-bottom: 16px;
      padding: 14px;
      border-radius: 10px;
  }

  .spp-form-lbl {
      font-size: 13px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  .spp-toggle-row {
      gap: 8px;
  }

  .spp-tab {
      padding: 10px 14px;
      font-size: 13px;
      border-radius: 20px;
      flex: 1;
      min-width: 80px;
      text-align: center;
  }

  .spp-cat-grid {
      gap: 8px;
  }

  .spp-cat-chip {
      padding: 9px 12px;
      font-size: 13px;
      border-radius: 20px;
      flex: 0 0 auto;
      min-width: fit-content;
      white-space: nowrap;
      justify-content: center;
  }

  .spp-step2-btn-actions {
      margin-top: 24px;
      gap: 10px;
      flex-wrap: wrap;
  }

  .spp-step2-btn-continue {
      padding: 12px 16px !important;
      font-size: 16px !important;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .spp-step2-btn-reset {
      padding: 12px 16px !important;
      font-size: 14px !important;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }
}

@media (max-width: 480px) {
  .spp-form-card {
      padding: 16px 14px;
      border-radius: 12px;
  }

  .spp-form-title {
      font-size: 16px;
      margin-bottom: 16px;
      font-weight: 700;
  }

  .spp-form-block {
      margin-bottom: 14px;
      padding: 12px;
  }

  .spp-form-lbl {
      font-size: 12px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  .spp-toggle-row {
      gap: 6px;
  }

  .spp-tab {
      padding: 9px 12px;
      font-size: 12px;
      min-width: 75px;
  }

  .spp-cat-chip {
      padding: 8px 11px;
      font-size: 12px;
      min-width: fit-content;
      flex: 0 0 auto;
      white-space: nowrap;
      border-radius: 18px;
  }

  .spp-cat-chip:has(input:checked) {
      transform: scale(1);
  }

  .spp-step2-btn-actions {
      margin-top: 20px;
      gap: 8px;
      flex-wrap: wrap;
  }

  .spp-step2-btn-continue {
      padding: 11px 14px !important;
      font-size: 13px !important;
      border-radius: 18px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }
  .spp-step2-btn-continue i{
          font-size: 13px;

  }

  .spp-step2-btn-reset {
      padding: 11px 14px !important;
      font-size: 13px !important;
      border-radius: 50px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .spp-step2-btn-reset i {
      font-size: 13px;
  }
}

/* ============================================ 
   ENHANCED INTERACTIVITY FOR TOUCH DEVICES
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  .spp-tab,
  .spp-cat-chip {
      -webkit-tap-highlight-color: transparent;
  }

  .spp-tab:active {
      opacity: 0.8;
  }

  .spp-cat-chip:active {
      opacity: 0.9;
  }
}