/* =====================================================
   JAPIYO - Smart Real Estate Investment Portal
   Refined CSS with QA Fixes & UI Polishing
   Version: 2.1
   ===================================================== */

/* =====================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ===================================================== */
:root {
  /* Colors - Primary Text (Luxury Brown) */
  --color-text-primary: #190a07;
  --color-text-secondary: rgba(25, 10, 7, 0.75);
  --color-text-muted: rgba(25, 10, 7, 0.55);
  --color-text-light: rgba(25, 10, 7, 0.4);

  /* Colors - Background */
  --color-bg-primary: #f9f7f6;
  --color-bg-white: #ffffff;
  --color-bg-cream: #faf8f7;
  --color-bg-divider: #f1eae7;
  --color-bg-footer: #190a07;

  /* Colors - Brand Gradient */
  --gradient-start: #b86a57;
  --gradient-end: #d29b8c;
  --gradient-primary: linear-gradient(90deg, #b86a57 0%, #d29b8c 100%);
  --gradient-primary2: linear-gradient(88.19deg, #802920 -21.48%, #D7938A 13.54%, #9A5849 43.73%, #E8A1A0 70.29%, #874233 99.27%);;
  --gradient-hover: linear-gradient(90deg, #a55d4a 0%, #c48e7f 100%);

  /* Colors - Accent */
  --color-accent: #b86a57;
  --color-accent-light: #d29b8c;
  --color-accent-bg: rgba(184, 106, 87, 0.1);

  /* Colors - Borders & Shadows */
  --color-border-light: #f1eae7;
  --color-border-medium: #e5dedb;
  --shadow-soft: 0 4px 20px rgba(25, 10, 7, 0.06);
  --shadow-medium: 0 8px 32px rgba(25, 10, 7, 0.08);
  --shadow-hover: 0 12px 40px rgba(25, 10, 7, 0.12);
  --shadow-card: 0 2px 16px rgba(25, 10, 7, 0.05);

  /* Typography */
  --font-heading: "Canela", "serif";
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Font Sizes */
  --fs-h1: clamp(2rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.625rem);
  --fs-h3: clamp(1.375rem, 3vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing */
  --section-padding-desktop: 100px;
  --section-padding-mobile: 60px;
  --card-padding: 24px;
  --card-radius: 16px;
  --btn-radius: 8px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Navbar Height */
  --navbar-height: 80px;

  /* swiper  */
  --swiper-theme-color:var( --color-text-primary);
  --swiper-pagination-bullet-inactive-color:var(--gradient-start);
}

/* =====================================================
   2. BASE STYLES & RESETS
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html {
  scroll-behavior: smooth;
} */

html, body {scroll-behavior: auto !important;}
.scrollInner .Min-item:not(:last-child) {margin-bottom: 20px;}
#leftColumn {position: relative;}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--gradient-start);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-15{font-size: 15px !important;}
.fs-17{font-size: 17px !important;}
/* =====================================================
   3. UTILITY CLASSES
   ===================================================== */
.section-padding {
  padding-top: var(--section-padding-desktop);
  padding-bottom: var(--section-padding-desktop);
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }
}

.section-heading {text-align: center;margin-bottom: 3.5rem;}
.section-heading__title {margin-bottom: 16px;color: var(--color-text-primary);}
.section-heading__subtitle {font-size: 1.125rem;color: var(--color-text-muted);margin-left: auto;margin-right: auto;margin-bottom: 0;line-height: 1.8;}

.section-desc{font-size: 1.125rem;line-height: 1.8;}

.eyebrow-text {
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  display: inline-block;
}

.text-Primary {color: var(--color-text-primary) !important;}
.text-secondary {color: var(--color-text-secondary) !important;}
.text-white-60{--bs-text-opacity: 1;color: rgba(255, 255, 255, .6) !important;}
.text-white-70{--bs-text-opacity: 1;color: rgba(255, 255, 255, .7) !important;}
.text-accent{color: var(--color-accent);}
/* .featured-projects {background-color: var(--color-bg-primary);} */
.bg-primary {background-color: var(--color-bg-primary) !important;}
.bg-white {background-color: var(--color-bg-white) !important;}
.bg-cream {background-color: var(--color-bg-cream) !important;}
.bg-dark{background-color: var(--color-text-primary) !important;}
.text-gradient {background: var(--gradient-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
/* page title  */
.page-title {font-size: clamp(3.5rem, 6vw, 4rem);margin-bottom: 24px;line-height: 1.1;font-weight: 500;text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.inner-Pagetitle{font-size: clamp(2rem, 5vw, 3rem);font-weight: 500;line-height: 1.2;margin-bottom: 20px;}



.bg-center{background-position: center;}.bg-start{background-position: left;}.bg-end{background-position: right;}
.bg-cover{background-size: cover;}.bg-contain{background-size: contain;}
.bg-no-repeat{background-repeat: no-repeat;}
.border-pattern{background-image: url('../img/border-pattern.svg');}



.custom-list li{position: relative; padding-left: 15px;}
.custom-list li:before{
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.custom-list.wrong li:before{
background-image: url('../img/crosse-red.svg');
}
.custom-list.right li:before{
background-image: url('../img/check-green.svg');
}
.custom-list.check-circle li:before{
background-image: url('../img/check-circle.svg');
 width: 17px;
  height: 17px;
}
/* =====================================================
   4. BUTTON STYLES
   ===================================================== */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  transition: all var(--transition-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover{transform: translateY(-2px);}

.badge.icon-badge{
      --bs-badge-padding-x: 1.65rem;
    --bs-badge-padding-y: 1rem;
    --bs-badge-font-size: 0.8125rem;
    --bs-badge-font-weight: 500;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: .625rem;
    display: flex;
    align-items: center;
    gap: 10px;

}

.badge.icon-badge.rounded{
      --bs-badge-padding-x: 1rem;
    --bs-badge-padding-y: .7rem;
  --bs-badge-border-radius: 50rem;
}


.btn-icon.h-dark:hover svg path{
  /* fill: var(--color-text-primary); */
  stroke: var(--color-text-primary);
}

.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(184, 106, 87, 0.3);
}

.btn-primary:hover {
  background: var(--gradient-hover);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(184, 106, 87, 0.4);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-medium);
}

.btn-outline:hover {
  background-color: var(--color-text-primary);
  color: #ffffff;
  border-color: var(--color-text-primary);
}

.btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn-outline-white:hover {
  background-color: #ffffff;
  color: var(--color-text-primary);
  border-color: #ffffff;
}



.btn.btn-white {
  --bs-btn-color:var(--color-accent);
  --bs-btn-bg:#ffffff;
  --bs-btn-border-color:#ffffff;
  --bs-btn-hover-color:var(--color-accent);
  --bs-btn-hover-bg:#fff;
  --bs-btn-active-color:var(--color-accent);;
  --bs-btn-active-bg:#ffffff;
  --bs-btn-active-border-color:#ffffff;
  box-shadow: var(--shadow-soft);

}


.btn.cta-btn{
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--color-text-primary);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--color-text-primary);
  --bs-btn-active-border-color:var(--color-text-primary);
}

.btn.cta-btn:hover svg *{
  fill: #fff;
}

.btn-sm {
  padding: 10px 24px;
  font-size: var(--fs-small);
}

.btn-lg {
  padding: 16px 40px;
  font-size: 1.0625rem;
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }
}


.bg-glass{
  background: rgba(255, 255, 255, 0.11);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0px 2px 8px rgba(25, 10, 7, 0.06);
}

/* =====================================================
   5. CARD STYLES
   ===================================================== */
.card {
  background-color: var(--color-bg-white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--transition-medium);
  border: 1px solid var(--color-border-light);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card--no-hover:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

.card__body {
  padding: var(--card-padding);
}

.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

/* =====================================================
   6. NAVBAR STYLES
   ===================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: all var(--transition-medium);
  background-color: transparent;
}

.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 0.75rem 0;
}

.navbar__logo {
  height: 30px;
  width: auto;
  transition: all var(--transition-fast);
}
.navbar{
  --bs-navbar-nav-link-padding-x: 1rem;
}
/* Dual Logo Logic */
.logo-white {
  display: block;
}

.logo-dark {
  display: none !important;
}

.navbar.scrolled .logo-white {
  display: none !important;
}

.navbar.scrolled .logo-dark {
  display: block !important;
}

#mainNavbar.navbar--scrolled.scrolled .btn#btnLogin{
      background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
}

/* Link Colors - Default (Dark Hero) */
.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.5rem 1rem;
  transition: color var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #ffffff;
}

/* Link Colors - Scrolled (White Background) */
.navbar.scrolled .navbar-nav .nav-link {
  color: var(--color-text-secondary);
}

.navbar.scrolled .navbar-nav .nav-link:hover,
.navbar.scrolled .navbar-nav .nav-link.active {
  color: var(--color-accent);
}

.navbar__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Toggle Button Color */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
  background: transparent;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(25, 10, 7, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Menu Styles */

@media (max-width: 991px) {
  .navbar-collapse {
    background-color: var(--color-bg-white);
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-medium);
  }

  /* Force dark text inside mobile menu even if not scrolled */
  .navbar-nav .nav-link {
    color: var(--color-text-primary);
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  .navbar__cta {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-light);
  }

  .navbar__cta .btn {
    width: 100%;
  }

  /* Fix outline button in mobile menu to be dark outline */
  .navbar__cta .btn-outline-white {
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
  }

  .navbar__cta .btn-outline-white:hover {
    background-color: var(--color-text-primary);
    color: #ffffff;
  }
}

/* all banners  */







.banner.home{background-image: url('../img/home-bg.webp');}
.banner.ab{background-image: url('../img/ab-bg.webp');}
footer.banner{background-image: url('../img/footer-bg.png');}
.stepillustrationBg{background-image: url('../img/stepillustrationBg.webp');}
.stepillustrationBg-Dark{background-image: url('../img/stepillustrationBg-dark.webp');}
.noise_bg1{background-image: url('../img/noise_bg1.webp');}


.inner-banner{padding: 160px 0 100px;min-height: auto;}
/* Contact Hero */
.contact-hero {background: linear-gradient(135deg, #f9f7f6 0%, #efe0d9 100%);}
.hiw-hero {background: linear-gradient(180deg, #f9f7f6 0%, #f0e4de 100%);}

.project {
  background: linear-gradient(180deg, #f9f7f6 0%, #e9ddd8 100%);
  border-bottom: 1px solid #dcd0ca;
}



/* .bg-softLight{position: relative;} */
/* .bg-softLight::before{ content: ''; background-color: #D29B8CB2; position: absolute; top: 0; width: 100%; height: 100%; z-index: 111; mix-blend-mode: soft-light; pointer-events: none;} */

/* =====================================================
   7. HERO SECTION
   ===================================================== */
.hero {
  min-height: 100vh;
  padding-top: calc(var(--navbar-height) + 80px);
  padding-bottom: 180px;
  /* background: linear-gradient(135deg, #2c1a16 0%, #1f120f 50%, #120a08 100%); */
}



.hero__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent-light);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 24px;
  display: block;
}



.hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.8;
  /* margin-bottom: 32px; */
  max-width: 70%;
  /* margin-left: auto; */
  /* margin-right: auto; */
  margin: 0 auto 32px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 18px;
  border-radius: 50px;
  font-size: var(--fs-small);
  color: #ffffff;
  font-weight: 500;
}

.hero__badge i {
  color: var(--color-accent-light);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.hero__note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-bottom: 0;
}

/* Hero Search Bar - Horizontal Layout */
.hero__search {
  margin-top: 56px;
  position: relative;
  z-index: 10;
}

.search-bar {
  background-color: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  max-width: 1080px;
  margin: 0 auto;
}


.search-bar__field {
  flex: 1;
  min-width: 180px;
  position: relative;
  border-right: 1px solid var(--color-border-light);
  padding-right: 16px;
}

.search-bar__field:last-of-type {
  border-right: none;
}

.search-bar__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.search-bar__select {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 8px 10px;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: transparent;
  /* Changed from white to transparent to blend */
  appearance: none;
  background-image: none;
  /* Removed custom arrow for cleaner look, or use a smaller one */
  cursor: pointer;
  outline: none;
}

.search-bar__select:focus {
  box-shadow: none;
  color: var(--color-accent);
}

.search-bar__btn {
  flex-shrink: 0;
}

.search-bar__btn .btn {
  padding: 14px 40px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}



/* =====================================================
   8. TRUST STRIP / USPs
   ===================================================== */
.trust-strip {
  /* background-color: #ffffff; */
  border-bottom: 1px solid var(--color-border-light);
  padding: 24px 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
  transition: transform var(--transition-fast);
}

.trust-strip__item:hover {
  transform: translateY(-2px);
}

/* .trust-strip__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 106, 87, 0.1);
  color: var(--color-accent);
  border-radius: 50%;
  font-size: 1.25rem;
  flex-shrink: 0;
} */

.trust-strip__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
  line-height: 1.4;
}

@media (min-width: 992px) {
  .trust-strip__item {
    position: relative;
    border-right: 1px solid var(--color-border-light);
  }

  .trust-strip .col-lg-3:last-child .trust-strip__item {
    border-right: none;
  }
}

@media (max-width: 991px) {
  .trust-strip__item {
    border-bottom: 1px solid var(--color-border-light);
    justify-content: flex-start;
  }

  .trust-strip .col-md-6:last-child .trust-strip__item {
    border-bottom: none;
  }
}

/* =====================================================
   9. FEATURED PROJECTS
   ===================================================== */


.project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
}

.project-card--featured {
  border: 1px solid var(--color-accent);
  box-shadow: 0 4px 24px rgba(184, 106, 87, 0.12);
}

.project-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

.project-card__pill {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-card__pill--dark {
  background: var(--color-text-primary);
  color: #ffffff;
}

.project-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.project-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  transition: color var(--transition-fast);
}

.project-card:hover .project-card__title {
  color: var(--color-accent);
}

.project-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.project-card__location i {
  color: var(--color-accent);
}

.project-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 20px;
  background: transparent;
}

.project-card__stat {
  text-align: left;
}

.project-card__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
}

.project-card__stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.project-card__description {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  flex: 1;
}

.project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.project-card__link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}

.project-card__link:hover {
  color: var(--color-text-primary);
}

/* =====================================================
   10. HOW IT WORKS
   ===================================================== */
/* .how-it-works {
  background-color: #ffffff;
} */

.steps-container {
  /* display: flex;
  justify-content: space-between;
  position: relative; */
  padding: 0 20px;
}
.steps-container::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 100px;
  right: 100px;
  height: 2px;
  z-index: 0;
  /* Create animated dashes using background */
  background: repeating-linear-gradient(to right,var(--color-border-medium) 0,var(--color-border-medium) 8px,transparent 8px,transparent 16px);
  animation: dash-move 8s linear infinite;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }

/* Animation */
@keyframes dash-move {
  from {background-position: 0 0;}
  to {background-position: 64px 0;}
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  max-width: 240px;
  padding: 0 16px;
  background-color: transparent;
}

.step__number {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid var(--color-border-medium);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 auto 24px;
  transition: all var(--transition-medium);
}

.step:hover .step__number {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-bg-cream);
  box-shadow: 0 0 0 8px var(--color-accent-bg);
}

.step__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.step__description {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 991px) {
  .steps-container {flex-direction: column;align-items: center;gap: 10px;padding: 0;}
  .steps-container::before {display: none;}
  .step {max-width: 360px;}
  .step__number {
  width: 60px;
  height: 60px;}
}

/* =====================================================
   11. SPOTLIGHT SECTION (Casa Bella)
   ===================================================== */
/* .spotlight {
  background-color: var(--color-bg-cream);
  position: relative;
  overflow: hidden;
} */

/* .spotlight__content {
  padding: 20px 0;
} */

.spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spotlight__title {
  font-size: var(--fs-h2);
  margin-bottom: 20px;
  color: var(--color-text-primary);
}

.spotlight__description {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 32px;
  color: var(--color-text-secondary);
}

.spotlight__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: grid;
  gap: 16px;
}

.spotlight__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.spotlight__highlights li i {
  color: var(--color-accent);
  margin-top: 5px;
}

.spotlight__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Spotlight Image & Calculator Card */
.spotlight__image-container {
  position: relative;
}

.spotlight__image {
  border-radius: 24px;
  overflow: hidden;
  /* box-shadow: var(--shadow-hover); */
  aspect-ratio: 4/3;
  /* background: linear-gradient(135deg, #c9a89a 0%, #8b7065 100%); */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.spotlight__image-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-size: 4rem;
}

.spotlight__calculator {
  position: absolute;
  bottom: -40px;
  right: -24px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  max-width: 340px;
  width: 100%;
  border: 1px solid var(--color-border-light);
}

.spotlight__calculator-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.spotlight__calculator-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.9375rem;
}

.spotlight__calculator-label {
  color: var(--color-text-muted);
}

.spotlight__calculator-value {
  font-weight: 600;
  color: var(--color-text-primary);
}

.spotlight__calculator-total {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}

.spotlight__calculator-total .spotlight__calculator-value {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
}

.spotlight__calculator-note {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 12px;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .spotlight__image-container {
    margin-top: 60px;
  }

  .spotlight__calculator {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: -40px;
    margin-left: 20px;
    max-width: calc(100% - 40px);
  }
}

/* =====================================================
   12. WHY INVEST SECTION
   ===================================================== */


.why-invest__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-invest__item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding: 20px;
  background-color: var(--color-bg-primary);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.why-invest__item:hover {
  background-color: #ffffff;
  box-shadow: var(--shadow-medium);
  transform: translateX(8px);
}

.why-invest__icon {
  /* width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-shrink: 0; */
  color: var(--color-accent);
}
.cardIcon {
   color: var(--color-accent);
}


.why-invest__icon i{font-size: 20px;}

.why-invest__text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* .why-invest__description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
} */

.why-invest__stats {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-light);
}

.why-invest__stat {
  text-align: left;
}

.why-invest__stat-value {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.why-invest__stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================
   13. INVESTOR SEGMENTS
   ===================================================== */
.investor-segments {
  background-color: var(--color-bg-primary);
}

.segment-card {
  background-color: #ffffff;
  border-radius: var(--card-radius);
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
  border: 0px solid transparent;
  box-shadow: var(--shadow-card);
}
.segment-card .card-body{
  padding: 32px 24px;
}
.segment-card:hover {
  /* border-color: var(--color-accent); */
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}


.segment-card__icon{max-height: 250px;overflow: hidden;}

.segment-card__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.segment-card__description {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* =====================================================
   14. TOOLS & RESOURCES
   ===================================================== */
.tools-resources {
  background-color: #ffffff;
}

.resource-card {
  background-color: var(--color-bg-white);
  border-radius: var(--card-radius);
  padding: 32px;
  height: 100%;
  transition: all var(--transition-medium);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}
/* 
.resource-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 1.5rem;
  color: var(--color-text-primary);
}

.resource-card:hover .resource-card__icon {
  color: var(--color-accent);
} */

.resource-card__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.resource-card__description {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* =====================================================
   15. BROKER CTA SECTION
   ===================================================== */
.pb-100 , .py-100{padding-bottom: 100px;}
.pt-100 , .py-100{padding-top: 100px;}

.broker-cta__title {
  color: #ffffff;
  font-size: var(--fs-h3);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.broker-cta__description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}


/* =====================================================
   16. FOOTER
   ===================================================== */
.footer {
  background-color: var(--color-bg-footer);
  color: #ffffff;
  padding-top: 100px;
}

.footer__brand {
  margin-bottom: 32px;
}

.footer__logo {
  height: 48px;
  width: auto;
  margin-bottom: 24px;
}

.footer__tagline {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  max-width: 300px;
}

.footer__title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  margin-bottom: 14px;
}

.footer__links a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: #ffffff;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__contact-item i {
  color: var(--color-accent-light);
  margin-top: 4px;
}

.footer__contact-item a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer__contact-item a:hover {
  color: #ffffff;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px 0;
  margin-top: 64px;
}

.footer__copyright {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0;
}

.footer__bottom-tagline {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .footer__bottom-tagline {
    text-align: left;
    margin-top: 12px;
  }
}

/* =====================================================
   17. ANIMATIONS (GSAP Classes)
   ===================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
}

.fade-in.animated {
  opacity: 1;
  transform: translateY(0);
}

.slide-up {
  opacity: 0;
  transform: translateY(50px);
}

.slide-up.animated {
  opacity: 1;
  transform: translateY(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
}

.scale-in.animated {
  opacity: 1;
  transform: scale(1);
}

/* =====================================================
   18. RESPONSIVE ADJUSTMENTS
   ===================================================== */


/* =====================================================
   19. ACCESSIBILITY & VISIBILITY FIXES
   ===================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-primary);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 10px;
  color: #ffffff;
}

/* =====================================================
   20. PROJECTS LISTING PAGE
   ===================================================== */

/* Page Header */

.page-header__content {
  max-width: 720px;
  margin-bottom: 32px;
}

/* .page-header__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 16px;
  color: var(--color-text-primary);
} */

.page-header__description {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

.page-header__stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.page-header__stat {
  display: flex;
  flex-direction: column;
}

.page-header__stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

.page-header__stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Listing Main */
.listing-main {
  padding: 48px 0 100px;
  background-color: var(--color-bg-white);
}

/* =====================================================
   21. FILTER SIDEBAR
   ===================================================== */

/* Mobile Filter Toggle Button */
.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  margin-bottom: 24px;
  transition: all var(--transition-fast);
}

.filter-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Filter Sidebar Container */
.filter-sidebar {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.filter-sidebar__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-primary);
}

.filter-sidebar__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-sidebar__body {
  padding: 16px 24px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

.filter-sidebar__actions {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Filter Groups */
.filter-group {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.filter-group:last-child {
  border-bottom: none;
}

.filter-group__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-group__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Filter Checkbox */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.filter-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.filter-checkbox__mark {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-medium);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.filter-checkbox__mark::after {
  content: "✓";
  font-size: 11px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition-fast);
}

.filter-checkbox input:checked+.filter-checkbox__mark {
  background: var(--gradient-primary);
  border-color: var(--color-accent);
}

.filter-checkbox input:checked+.filter-checkbox__mark::after {
  opacity: 1;
  transform: scale(1);
}

.filter-checkbox__label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.filter-checkbox:hover .filter-checkbox__label {
  color: var(--color-text-primary);
}

/* Filter Radio */
.filter-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.filter-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.filter-radio__mark {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-medium);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.filter-radio__mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition-fast);
}

.filter-radio input:checked+.filter-radio__mark {
  border-color: var(--color-accent);
}

.filter-radio input:checked+.filter-radio__mark::after {
  opacity: 1;
  transform: scale(1);
}

.filter-radio__label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* Filter Pills */
.filter-pills {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.filter-pill {
  position: relative;
  cursor: pointer;
}

.filter-pill input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.filter-pill__label {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.filter-pill input:checked+.filter-pill__label {
  background: var(--gradient-primary);
  border-color: var(--color-accent);
  color: #ffffff;
}

.filter-pill:hover .filter-pill__label {
  border-color: var(--color-accent);
}

/* Filter Range Inputs */
.filter-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-range__inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-range__input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--btn-radius);
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
}

.filter-range__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.filter-range__separator {
  color: var(--color-text-muted);
}

.filter-range__hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* =====================================================
   22. RESULTS TOOLBAR
   ===================================================== */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-bg-primary);
  border-radius: var(--card-radius);
  margin-bottom: 24px;
}

.results-toolbar__count {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.results-toolbar__count strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.results-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Sort Dropdown */
.results-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-sort__label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.results-sort__select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--btn-radius);
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23190a07' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.results-sort__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* View Toggle */
.view-toggle {
  display: flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.view-toggle__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-bg-white);
  border: none;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle__btn:not(:last-child) {
  border-right: 1px solid var(--color-border-light);
}

.view-toggle__btn.active {
  background: var(--color-text-primary);
  color: #ffffff;
}

.view-toggle__btn:hover:not(.active) {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* =====================================================
   23. LISTING CARDS
   ===================================================== */
.results-grid {
  margin-bottom: 48px;
}

.listing-card {
  /* background: var(--color-bg-white); */
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  /* overflow: hidden; */
  /* height: 100%; */
  /* display: flex; */
  /* flex-direction: row; */
  transition: all var(--transition-medium);
}

.listing-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.listing-card--featured {
  border-color: var(--color-accent);
  box-shadow: 0 4px 24px rgba(184, 106, 87, 0.12);
}

.listing-card--sold-out {
  opacity: 0.7;
}

.listing-card--sold-out:hover {
  transform: none;
  box-shadow: none;
}

/* Card Image */
.listing-card__image {
  position: relative;
  /* aspect-ratio: 16/10; */
  width: 40%;
  overflow: hidden;
}

.listing-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a8c0a6 0%, #6b8c69 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 3rem;
}

.listing-card__placeholder--commercial {
  background: linear-gradient(135deg, #9eb3c8 0%, #5a7a96 100%);
}

.listing-card__placeholder--goa {
  background: linear-gradient(135deg, #c9b896 0%, #8b7d5e 100%);
}

.listing-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.listing-card__badge {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.listing-card__badge--accent {
  background: var(--gradient-primary);
  color: #ffffff;
}

.listing-card__badge--dark {
  background: var(--color-text-primary);
  color: #ffffff;
}

.listing-card__badge--sold {
  background: #dc3545;
  color: #ffffff;
}

.listing-card__roi {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  z-index: 2;
}

/* Card Body */
.listing-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.listing-card__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.listing-card:hover .listing-card__title {
  color: var(--color-accent);
}

.listing-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.listing-card__location i {
  color: var(--color-accent);
  font-size: 0.75rem;
}

/* Card Stats Grid */
.listing-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 16px;
}

.listing-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.listing-card__stat-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.listing-card__stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.listing-card__stat-value--status {
  color: var(--color-accent);
}

.listing-card__stat-value--sold {
  color: #dc3545;
}

/* Investment Info */
.listing-card__investment {
  margin-bottom: 12px;
}

.listing-card__investment-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.listing-card__investment-row span {
  color: var(--color-text-muted);
}

.listing-card__investment-row strong {
  color: var(--color-text-primary);
}

.listing-card__footnote {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  margin: 8px 0 0;
}

/* Tags */
.listing-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* margin-bottom: 16px; */
}

.listing-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.listing-card__tag i {
  color: var(--color-accent);
  font-size: 0.625rem;
}

/* Card Actions */
.listing-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.listing-card__link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}

.listing-card__link:hover {
  color: var(--color-accent);
}

/* =====================================================
   24. MAP VIEW
   ===================================================== */
.map-container {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
  min-height: 500px;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
}

.map-placeholder i {
  font-size: 4rem;
  color: var(--color-border-medium);
  margin-bottom: 24px;
}

.map-placeholder p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.map-placeholder span {
  font-size: 0.9375rem;
}

/* =====================================================
   25. PAGINATION
   ===================================================== */
.results-pagination {
  display: flex;
  justify-content: center;
}

.results-pagination .pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.results-pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--btn-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-white);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.results-pagination .page-item .page-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.results-pagination .page-item.active .page-link {
  background: var(--gradient-primary);
  border-color: var(--color-accent);
  color: #ffffff;
}

.results-pagination .page-item.disabled .page-link {
  background: var(--color-bg-primary);
  color: var(--color-text-light);
  cursor: not-allowed;
}

/* =====================================================
   26. OFF-CANVAS FILTERS (Mobile)
   ===================================================== */
.offcanvas {
  max-width: 320px;
}

.offcanvas-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-light);
}

.offcanvas-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.offcanvas-body {
  padding: 0;
}

.offcanvas-body .filter-sidebar__body {
  max-height: none;
  padding: 16px 24px;
}

/* Responsive Adjustments for Listing Page */
@media (max-width: 991px) {
  .page-header {
    padding: 100px 0 40px;
  }

  .page-header__stats {
    gap: 24px;
  }

  .listing-main {
    padding: 24px 0 60px;
  }
}

@media (max-width: 575px) {
  .results-toolbar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .results-toolbar__controls {
        flex-direction: column;
    justify-content: space-between;
        align-items: flex-start;
  }

  .page-header__stats {
    flex-direction: column;
    gap: 16px;
  }
}

/* =====================================================
   27. UI/UX REFINEMENT - PROJECTS PAGE HEADER
   ===================================================== */

/* Solid Dark Navbar for Listing Page */

.navbar--solid {
  background-color: var(--color-bg-footer);
  /* #190a07 */
  padding: 1rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar--solid .navbar-brand .logo-white {
  display: block !important;
}

.navbar--solid .navbar-brand .logo-dark {
  display: none !important;
}

.navbar--solid .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar--solid .nav-link:hover,
.navbar--solid .nav-link.active {
  color: #ffffff;
}

.navbar--solid .nav-link.active {
  position: relative;
}

.navbar--solid .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* .navbar--solid .btn-outline-white {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
} */

.navbar--solid .btn-outline-white:hover {
  background: #ffffff;
  color: var(--color-text-primary);
  border-color: #ffffff;
}

.navbar--solid .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.not-transprent .navbar.navbar--solid.scrolled .navbar__logo.logo-dark{display: block !important;}
.not-transprent .navbar.navbar--solid.scrolled .navbar__logo.logo-white{display: none !important;}


/* Solid Dark Navbar for Listing Page */
.not-transprent #mainNavbar{background-color: var(--color-bg-footer);}

.not-transprent .navbar.scrolled{background-color: #ffffff !important;}
.not-transprent .navbar.scrolled .btn.btn-outline-white{border-color: var(--color-bg-footer) !important;color: var(--color-bg-footer) !important;}




/* Page Header Refinement */


.page-header__content {
  color: var(--color-text-primary);
}

.page-header__title {
  color: #190a07;
  font-weight: 700;
}

.page-header__description {
  color: rgba(25, 10, 7, 0.7);
}

/* =====================================================
   28. CUSTOM RANGE SLIDER
   ===================================================== */
.range-slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.range-slider__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.range-slider__container {
  position: relative;
  height: 6px;
  background: #e4d8d3;
  border-radius: 6px;
  margin: 10px 0;
}

.range-slider__track {
  position: absolute;
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 6px;
  left: 0;
  width: 50%;
  /* JS will adjust */
}

.range-slider__input {
  position: absolute;
  top: -7px;
  left: 0;
  width: 100%;
  height: 20px;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

  .range-slider__container{position:relative;height:5px;display:flex;align-items:center}
  .range-slider__track{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;width:0;pointer-events:none;z-index:1;transition:width .12s ease}
  .range-slider__input{position:relative;z-index:2;width:100%;margin:0;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
  .range-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer}
  .range-slider__input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;cursor:pointer}
/* Visual Handle controlled by JS or matching input via :after? */
/* Better to use a simple styled input for single handle range */
/* Webkit Handle */
.range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* Standard property */
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  /* White handle */
  border: 4px solid #b86a57;
  /* Brand color border */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -7px;
  /* Adjust if needed */
  position: relative;
  z-index: 3;
}

.range-slider__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #b86a57;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  /* Reset default */
  box-sizing: border-box;
}

.range-slider__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: 4px;
}

/* =====================================================
   29. PROJECT DETAIL PAGE
   ===================================================== */

/* Section Eyebrow */
/* .section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 12px;
} */

/* 3.1 Project Hero */
.project-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.project-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #2a1510;
  z-index: 1;
}

.project-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(25, 10, 7, 0.85) 0%, rgba(25, 10, 7, 0.4) 100%);
  z-index: 2;
}

.project-hero .container {
  position: relative;
  z-index: 3;
}

.project-hero__content {
  max-width: 680px;
  padding: 120px 0 80px;
}

.project-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent-light);
  margin-bottom: 16px;
}

.project-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
}

.project-hero__tagline {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

.project-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 32px;
}

.project-hero__badge i {
  color: var(--color-accent-light);
}

.project-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.project-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.project-hero__scroll i {
  display: block;
  margin-top: 8px;
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(4px);
  }
}

/* 3.2 Overview Section */
.project-overview {
  background: var(--color-bg-white);
}

.project-overview__description {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

.highlight-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  transition: all var(--transition-medium);
}

.highlight-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.highlight-card--accent {
  background: var(--gradient-primary);
  border-color: transparent;
}

.highlight-card--accent .highlight-card__icon,
.highlight-card--accent .highlight-card__label,
.highlight-card--accent .highlight-card__value {
  color: #ffffff;
}

.highlight-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 12px;
  color: var(--color-accent);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.highlight-card--accent .highlight-card__icon {
  background: rgba(255, 255, 255, 0.2);
}

.highlight-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.highlight-card__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.highlight-card__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* 3.3 Location Section */
.location-section {
  background: var(--color-bg-primary);
}

.location-map {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
  height: 100%;
  min-height: 400px;
}

.location-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, #e9ddd8 0%, #f9f7f6 100%);
}

.location-map__placeholder i {
  font-size: 4rem;
  color: var(--color-accent);
  opacity: 0.5;
  margin-bottom: 16px;
}

.location-map__placeholder p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.location-attractions {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  height: 100%;
}

.location-attractions__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

.location-attractions__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.location-attraction {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.location-attraction:last-child {
  border-bottom: none;
}

.location-attraction__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-bg);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.location-attraction__content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location-attraction__name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.location-attraction__distance {
  font-size: 0.875rem;
  color: var(--color-accent);
  font-weight: 600;
}

.location-benefits {
  background: var(--color-bg-primary);
  border-radius: 12px;
  padding: 16px 20px;
}

.location-benefits h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.location-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.location-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.location-benefits li:last-child {
  margin-bottom: 0;
}

.location-benefits li i {
  color: var(--color-accent);
  font-size: 0.75rem;
}

/* 3.4 Plot Section */
.plot-section {
  background: var(--color-bg-white);
}

.plot-map {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.plot-map__container {
  min-height: 400px;
}

.plot-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
}

.plot-map__placeholder i {
  font-size: 4rem;
  color: var(--color-accent);
  opacity: 0.4;
  margin-bottom: 16px;
}

.plot-map__placeholder p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.plot-map__legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
}

.plot-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.plot-legend__color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.plot-legend__color--available {
  background: #4ade80;
}

.plot-legend__color--booked {
  background: #fbbf24;
}

.plot-legend__color--sold {
  background: #f87171;
}

.plot-details {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  height: 100%;
}

.plot-details__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.plot-details__hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.plot-details__content {
  margin-bottom: 24px;
}

.plot-details__row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.plot-details__row:last-child {
  border-bottom: none;
}

.plot-details__row--highlight {
  background: var(--color-bg-primary);
  margin: 0 -24px;
  padding: 12px 24px;
  border-bottom: none;
}

.plot-details__label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.plot-details__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.plot-details__status--available {
  color: #22c55e;
}

.plot-details__status--booked {
  color: #eab308;
}

.plot-details__status--sold {
  color: #ef4444;
}

.plot-details__actions {
  margin-top: auto;
}

/* 3.5 Investment Section */
.investment-section {
  background: var(--color-bg-primary);
}

.roi-table-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  height: 100%;
}

.roi-table-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.roi-table-card__subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.roi-table th {
  background: var(--color-bg-primary);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-border-light);
}

.roi-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.roi-table tbody tr:hover {
  background: var(--color-bg-primary);
}

.roi-table tfoot td {
  background: var(--gradient-primary);
  color: #ffffff;
  font-weight: 600;
  border-bottom: none;
}

.roi-table-card__disclaimer {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 16px;
  font-style: italic;
}

/* ROI Calculator */
.roi-calculator {
  background: var(--color-bg-white);
  border: 2px solid var(--color-accent);
  border-radius: var(--card-radius);
  padding: 24px;
  height: 100%;
}

.roi-calculator__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.roi-calculator__title i {
  color: var(--color-accent);
}

.roi-calculator__subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.roi-calculator__form {
  margin-bottom: 24px;
}

.roi-calculator__input-group {
  margin-bottom: 16px;
}

.roi-calculator__input-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.roi-calculator__input-group .form-control {
  border: 1px solid var(--color-border-light);
  border-radius: var(--btn-radius);
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.roi-calculator__input-group .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(184, 106, 87, 0.1);
}

.roi-calculator__range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.roi-calculator__range-labels span:nth-child(2) {
  font-weight: 600;
  color: var(--color-accent);
}

.roi-calculator__results {
  background: var(--color-bg-primary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.roi-result {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.roi-result:last-child {
  border-bottom: none;
}

.roi-result--total {
  background: var(--gradient-primary);
  margin: 12px -16px -16px;
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
  border-bottom: none;
}

.roi-result--total .roi-result__label,
.roi-result--total .roi-result__value {
  color: #ffffff;
}

.roi-result__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.roi-result__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.roi-result__value--highlight {
  color: var(--color-accent);
  font-size: 1.125rem;
}

/* 3.6 Amenities Section */
.amenities-section {
background-image: url('../img/stepillustrationBg.webp');
}

.amenity-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.amenity-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.amenity-card__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}

.amenity-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.amenity-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 3.7 Why Project Section */
/* .why-project-section {
  background: linear-gradient(180deg, #faf8f7 0%, #f5ebe8 100%);
} */

.why-project__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.why-project__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.why-project__item:last-child {
  border-bottom: none;
}

.why-project__item i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

.why-project__item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.why-project__item strong {
  font-size: 1rem;
  color: var(--color-text-primary);
}

.why-project__item span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.why-project__image {
  border-radius: var(--card-radius);
  overflow: hidden;
}

.why-project__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background: linear-gradient(135deg, #d4c4bc 0%, #e9ddd8 100%);
  color: var(--color-text-muted);
  text-align: center;
}

.why-project__placeholder i {
  font-size: 4rem;
  opacity: 0.3;
  margin-bottom: 16px;
}

/* 3.8 Trust Section */
.trust-section {
  background: var(--color-bg-white);
}

.trust-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.trust-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.trust-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.trust-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.trust-card__text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 3.9 Downloads Section */
.downloads-section {
  background: var(--color-bg-primary);
}

.download-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px 24px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.download-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-medium);
}

.download-card__icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  border-radius: 50%;
  color: #dc2626;
  font-size: 2rem;
  margin-bottom: 20px;
}

.download-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.download-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* 3.10 CTA Section */
.cta-section {
  background: linear-gradient(135deg, #190a07 0%, #2b100c 100%);
}

.cta-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--card-radius);
  padding: 60px 40px;
  text-align: center;
}

.cta-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: #ffffff;
  margin-bottom: 16px;
}

.cta-card__subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.cta-card__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.cta-card__note i {
  color: var(--color-accent-light);
}

/* Button Variants for Dark BG */


.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Responsive for Project Detail */
@media (max-width: 991px) {
  .project-hero__content {
    text-align: center;
    max-width: 100%;
    padding: 140px 0 60px;
  }

  .project-hero__cta {
    justify-content: center;
  }

  .cta-card {
    padding: 40px 24px;
  }
}

@media (max-width: 575px) {
  .project-hero__cta {
    flex-direction: column;
  }

  .project-hero__cta .btn {
    width: 100%;
  }

  .plot-map__legend {
    flex-wrap: wrap;
    gap: 12px;
  }

  .cta-card__buttons {
    flex-direction: column;
  }

  .cta-card__buttons .btn {
    width: 100%;
  }
}

/* =====================================================
   30. PROJECT GALLERY SECTION
   ===================================================== */

.gallery-section {
  background: var(--color-bg-primary);
}

.gallery-carousel {
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-carousel__main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(25, 10, 7, 0.12);
}

/* Carousel Slide */
.gallery-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #e9ddd8;
}

.gallery-slide__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption Overlay */
.gallery-slide__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: linear-gradient(to top, rgba(25, 10, 7, 0.8) 0%, transparent 100%);
}

.gallery-slide__caption span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Carousel Controls */
.gallery-carousel__control {
  width: 48px;
  height: 48px;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-carousel__control.carousel-control-prev {
  left: 16px;
}

.gallery-carousel__control.carousel-control-next {
  right: 16px;
}

.gallery-carousel__arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25, 10, 7, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  transition: all var(--transition-medium);
}

.gallery-carousel__arrow i {
  color: #ffffff;
  font-size: 1rem;
}

.gallery-carousel__control:hover .gallery-carousel__arrow {
  background: rgba(25, 10, 7, 0.85);
  transform: scale(1.05);
}

/* Carousel Indicators */
.gallery-carousel__indicators {
  position: absolute;
  bottom: 60px;
  margin: 0;
}

.carousel-indicators [data-bs-target]{
  border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.gallery-carousel__indicators button {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  opacity: 1;
  transition: all var(--transition-medium);
  margin: 0 4px;
}

.gallery-carousel__indicators button.active {
  background: var(--gradient-primary);
  width: 48px;
}

/* Thumbnail Strip */
.gallery-thumbnails {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 0 20px;
}

.gallery-thumbnail {
  width: 100px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-medium);
  flex-shrink: 0;
  background: transparent;
}

.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-medium);
}

.gallery-thumbnail:hover {
  border-color: rgba(184, 106, 87, 0.5);
  transform: scale(1.05);
}

.gallery-thumbnail:hover img {
  transform: scale(1.1);
}

.gallery-thumbnail.active {
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(184, 106, 87, 0.3);
}

/* Responsive Gallery */
@media (max-width: 991px) {
  .gallery-thumbnails {
    gap: 8px;
  }

  .gallery-thumbnail {
    width: 80px;
    height: 54px;
  }

  .gallery-carousel__control {
    width: 40px;
    height: 40px;
  }

  .gallery-carousel__arrow {
    width: 36px;
    height: 36px;
  }

  .gallery-carousel__arrow i {
    font-size: 0.875rem;
  }
}

@media (max-width: 575px) {
  .gallery-carousel__main {
    border-radius: 16px;
  }

  .gallery-carousel__control.carousel-control-prev {
    left: 8px;
  }

  .gallery-carousel__control.carousel-control-next {
    right: 8px;
  }

  .gallery-carousel__indicators {
    bottom: 50px;
  }

  .gallery-carousel__indicators button {
    width: 24px;
    height: 3px;
    margin: 0 3px;
  }

  .gallery-carousel__indicators button.active {
    width: 36px;
  }

  .gallery-slide__caption {
    padding: 12px 16px;
  }

  .gallery-slide__caption span {
    font-size: 0.8125rem;
  }
}

/* =====================================================
   31. ABOUT PAGE STYLES
   ===================================================== */


/* .about-hero__content {
  max-width: 680px;
} */



.about-hero__text {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 32px;
}


.about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Who We Are */
.who-we-are {
  background: var(--color-bg-white);
}

.who-we-are__text p {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 16px 20px;
  transition: all var(--transition-medium);
}

.mini-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.mini-card i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

.mini-card span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Mission & Vision */

.parallaxie{background-image: url("https://luminor-eight.vercel.app/images/section/section-about.jpg");    background-repeat: no-repeat;
    background-attachment: fixed;}
/* .mCard-icon{color: var(--color-accent);font-size: 1.5rem;background-color: var(--color-bg-primary);} */



.mission-vision {
background-image:url('../img/vissionBg.png');
background-attachment:fixed;
/* background-repeat: no-repeat; */
  /* background: var(--color-bg-primary); */
}

.mission-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px;
  height: 100%;
}

.mission-card--alt {
  background: linear-gradient(135deg, #190a07 0%, #2b100c 100%);
  border-color: transparent;
}

.mission-card--alt .mission-card__title,
.mission-card--alt .mission-card__text {
  color: #ffffff;
}

.mission-card--alt .mission-card__icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-accent-light);
}

.mission-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.mission-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.mission-card__text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Problem & Solution */
.problem-solution {
  background: var(--color-bg-white);
}

.problem-block {
  margin-bottom: 60px;
}

.problem-card,
.solution-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-radius: var(--card-radius);
  text-align: center;
  height: 100%;
}

.problem-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.problem-card i {
  color: #dc2626;
  font-size: 1.5rem;
}

.problem-card span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #7f1d1d;
}

.solution-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.solution-card i {
  color: #16a34a;
  font-size: 1.5rem;
}

.solution-card span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #14532d;
}

/* Philosophy Section */
/* .philosophy-section {
  background: var(--color-bg-primary);
} */

.philosophy-card {
  background: transparent;
  border: 0;
  border-radius: var(--card-radius);
  /* padding: 32px; */
  /* text-align: center; */
  height: 100%;
  /* transition: all var(--transition-medium); */
}

/* .philosophy-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
} */

.philosophy-card__icon {
  /* width: 72px;
  height: 72px; */
  /* display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.75rem; */
  /* margin-bottom: 20px; */
}

.philosophy-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.philosophy-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.philosophy-card__list li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
}

.philosophy-card__list li:last-child {
  border-bottom: none;
}

.philosophy-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 600;
}

/* Differentiator Section */
.differentiator-section {
  background: var(--color-bg-white);
}

.diff-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  height: 100%;
  transition: all var(--transition-medium);
}

.diff-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}


/* .diff-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
} */

.diff-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Protection Section */
.protection-section {
  background: var(--color-bg-primary);
}

.protection-card {
  /* background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  height: 100%; */
  padding: 32px;
}

.protection-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

.protection-card__title i {
  color: var(--color-accent);
}

.protection-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.protection-card__list li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
}

.protection-card__list li:last-child {
  border-bottom: none;
}

.protection-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.protection-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--card-radius);
  padding: 16px 20px;
  margin-top: 32px;
}

.protection-note i {
  color: #d97706;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.protection-note p {
  font-size: 0.9375rem;
  color: #78350f;
  margin: 0;
}

/* Team Section */
/* .team-section {background: var(--color-bg-white);} */

.team-card {
  /* background: var(--color-bg-primary); */
  /* border: 1px solid var(--color-border-light); */
  border-radius: var(--card-radius);
  overflow: hidden;
  height: 100%;
  transition: all var(--transition-medium);
}

/* .team-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
} */

.team-card__image {
  width: 100%;
  height: 200px;
  /* background: linear-gradient(135deg, #d4c4bc 0%, #e9ddd8 100%);
  display: flex;
  align-items: center;
  justify-content: center; */
}

.team-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.team-card__content {
  padding: 20px 0;
  text-align: start;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 12px;
}

.team-card__bio {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}



/* Advisory Section */
.advisorSwiper .swiper-slide{height: auto;}

.advisor-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  position: relative;
  height: 100%;
  transition: all var(--transition-medium);
}

.advisor-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.advisor-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gradient-primary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 50px;
}


.advisor-card__expertise {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.advisor-card__bio {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Values Section */
.values-section {
  background: var(--color-bg-white);
}

.value-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px 16px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.value-card:hover {
  border-color: var(--color-accent);
}

.value-card i {
  color: var(--color-accent);
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.value-card h5 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.value-card p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.values-statement {
  text-align: center;
  margin-top: 48px;
  padding: 32px;
  background: var(--color-bg-primary);
  border-radius: var(--card-radius);
}

.values-statement p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: 0;
}

/* About CTA Section */
.about-cta-section {
  background: linear-gradient(135deg, #f9f7f6 0%, #e9ddd8 100%);
}

.about-cta-card {
  background: var(--color-bg-white);
  border-radius: var(--card-radius);
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(25, 10, 7, 0.1);
}

.about-cta-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.about-cta-card__text {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.about-cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Responsive About */
@media (max-width: 991px) {
  

  .about-hero__stats {
    justify-content: center;
  }

  .about-hero__cta {
    justify-content: center;
  }

  .about-cta-card {
    padding: 40px 24px;
  }
}

@media (max-width: 575px) {
  .about-hero__stat {
    width: 100%;
  }

  .about-hero__cta {
    flex-direction: column;
  }

  .about-hero__cta .btn {
    width: 100%;
  }

  .about-cta-card__buttons {
    flex-direction: column;
  }

  .about-cta-card__buttons .btn {
    width: 100%;
  }
}

/* =====================================================
   32. HOW IT WORKS PAGE STYLES
   ===================================================== */

/* HIW Hero */


.hiw-hero__content {
  max-width: 680px;
  position: relative;
  z-index: 2;
}
/* 
.hiw-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 20px;
} */

.hiw-hero__text {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.hiw-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.hiw-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-white);
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(25, 10, 7, 0.06);
}

.hiw-tag i {
  color: var(--color-accent);
  font-size: 0.875rem;
}

.hiw-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hiw-hero__graphic {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  opacity: 0.6;
  pointer-events: none;
}

.hiw-hero__graphic svg {
  width: 100%;
  height: auto;
}


/* three step  */
.nav-tabs.stepTabs{
  --bs-nav-tabs-border-width:0;
  --bs-nav-link-color:var(--color-text-muted);
  --bs-nav-tabs-link-active-color:var(--color-text-muted);
  --bs-nav-link-hover-color:var(--color-text-muted);
  --bs-nav-link-padding-x:0;
  --bs-nav-link-padding-y:0;
}
.stepTabs .nav-link{position: relative;    padding-left: 25px;}
.stepTabs .nav-link::before{
     content: '';
    width: 2px;
    height: 100%;
    background: var(--color-bg-primary);
    position: absolute;
    left: 0;
    transition: background 1.6s ease-in-out ;
}
.stepTabs .nav-link.active::before{
  background:linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}


/* Quick Steps */
.quick-steps {
  background: var(--color-bg-white);
}

.quick-step-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all var(--transition-medium);
}

.quick-step-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.quick-step-card__number {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(184, 106, 87, 0.15);
}

.quick-step-card__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.quick-step-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.quick-step-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

/* Timeline Section */
.timeline-section {
  background: var(--color-bg-primary);
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  transform: translateX(-50%);
  border-radius: 3px;
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  margin-bottom: 20px;
}

.timeline__item--left {
  text-align: right;
  padding-right: 60px;
}

.timeline__item--right {
  margin-left: 50%;
  text-align: left;
  padding-left: 60px;
}

.timeline__content {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px;
  position: relative;
  transition: all var(--transition-medium);
}

.timeline__content:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.timeline__number {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.timeline__item--left .timeline__number {
  right: -80px;
}

.timeline__item--right .timeline__number {
  left: -80px;
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.timeline__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

/* Legal Section */
.legal-section {
  background: var(--color-bg-white);
}

.legal-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px;
  height: 100%;
}

.legal-card--alt {
  background: linear-gradient(135deg, #190a07 0%, #2b100c 100%);
  border-color: transparent;
}

.legal-card--alt .legal-card__header h3,
.legal-card--alt .legal-card__list li {
  color: #ffffff;
}

.legal-card--alt .legal-card__header i {
  color: var(--color-accent-light);
}

.legal-card--alt .legal-card__list i {
  color: var(--color-accent-light);
}

.legal-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.legal-card__header i {
  font-size: 1.5rem;
  color: var(--color-accent);
}

.legal-card__header h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-text-primary);
  margin: 0;
}

.legal-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  padding: 10px 0;
  border-bottom: 1px solid rgba(241, 234, 231, 0.2);
}

.legal-card__list li:last-child {
  border-bottom: none;
}

.legal-card__list i {
  color: var(--color-accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.legal-card__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef3c7;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 20px;
  font-size: 0.8125rem;
  color: #78350f;
  border: 1px solid #fcd34d;
}

.legal-card__note i {
  color: #fcd34d;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Pipeline Section */

.card.flowCard {
    --bs-card-height: 350px;
    background-image: url('../img/card-about-1.jpg');
    position: relative;
    color: #fff;
    overflow: hidden; 
    border: none;
}
.card.flowCard.fc1 {background-image: url('../img/card-about-1.jpg');}

.card.flowCard .card-body {position: relative;z-index: 1;padding-bottom: 40px; }
.card.flowCard::before {content: '';background-color: #0000005c;position: absolute;width: 100%;height: 100%;inset: 0;}

/* Animation */
.fl-content {transform: translateY(170px); opacity: 0.7;transition: all 0.4s ease-in-out;}
.card.flowCard:hover .fl-content {transform: translateY(70px);opacity: 1;}
.pipeline {display: flex;align-items: flex-start;justify-content: center;gap: 0;flex-wrap: wrap;}
.pipeline__step {flex: 1;min-width: 180px;max-width: 220px;text-align: center;padding: 24px 16px;background: var(--color-bg-white);border: 1px solid var(--color-border-light);border-radius: var(--card-radius);transition: all var(--transition-medium);}
.pipeline__step:hover {border-color: var(--color-accent);box-shadow: var(--shadow-soft);}
.pipeline__step--highlight {background: linear-gradient(135deg, #190a07 0%, #2b100c 100%);border-color: transparent;}
.pipeline__step--highlight h4,
.pipeline__step--highlight p {color: #ffffff;}
.pipeline__step--highlight .pipeline__icon {background: var(--gradient-primary);}

.pipeline__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.375rem;
  margin-bottom: 16px;
}

.pipeline__step--highlight .pipeline__icon {
  color: #ffffff;
}

.pipeline__step h4 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.pipeline__step p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.pipeline__arrow {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--color-accent);
  font-size: 1.25rem;
  margin-top: 60px;
}

.pipeline__example {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 20px 24px;
  margin-top: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.pipeline__example i {
  color: #f59e0b;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pipeline__example p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.pipeline__badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pipeline__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.pipeline__badge i {
  color: var(--color-accent);
}

/* Exit Section */
.exit-section {
  background: var(--color-bg-white);
}

.exit-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.exit-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.exit-card__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
}

.exit-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.exit-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

.exit-note {
  text-align: center;
  margin-top: 32px;
}

.exit-note p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.exit-note i {
  color: var(--color-accent);
}

/* Docs Section */
/* .docs-section {
  background: var(--color-bg-primary);
} */

.docs-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  height: 100%;
  transition: all var(--transition-medium);
}

.docs-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.docs-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.docs-card__header i {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 10px;
  color: #ffffff;
  font-size: 1.125rem;
}

.docs-card__header h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin: 0;
}

.docs-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-card__list li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

.docs-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* FAQ Section */
.faq-section {
  background: var(--color-bg-white);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-section .accordion-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-section .accordion-button {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  padding: 20px 24px;
  box-shadow: none;
}

.faq-section .accordion-button:not(.collapsed) {
  background: var(--color-bg-primary);
  color: var(--color-accent);
}

.faq-section .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b86a57'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-section .accordion-body {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding: 0 24px 20px;
  background: var(--color-bg-primary);
}

/* HIW CTA Section */
.hiw-cta-section {
  background: linear-gradient(135deg, #f9f7f6 0%, #e9ddd8 100%);
}

.hiw-cta-card {
  background: var(--color-bg-white);
  border-radius: var(--card-radius);
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(25, 10, 7, 0.1);
}

.hiw-cta-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.hiw-cta-card__text {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hiw-cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Responsive How It Works */
@media (max-width: 991px) {
  .hiw-hero {
    padding: 140px 0 60px;
  }

  .hiw-hero__graphic {
    display: none;
  }

  /* Timeline Mobile */
  .timeline__line {
    left: 20px;
  }

  .timeline__item {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
    margin-bottom: 0px;
  }

  .timeline__item--left,
  .timeline__item--right {
    margin-left: 0;
    padding-left: 50px;
    padding-right: 20px;
    text-align: left;
    padding-bottom: 0;
    
  }

  .timeline__item--left .timeline__number,
  .timeline__item--right .timeline__number {
    left: -50px;
    right: auto;
  }

  /* Pipeline Mobile */
  .pipeline {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pipeline__step {
    max-width: 100%;
    width: 100%;
  }

  .pipeline__arrow {
    transform: rotate(90deg);
    margin: 0;
    padding: 8px 0;
  }

  .hiw-cta-card {
    padding: 40px 24px;
  }
}

@media (max-width: 575px) {
  .hiw-hero__tags {
    flex-direction: column;
    align-items: stretch;
  }

  .hiw-hero__cta {
    flex-direction: column;
  }

  .hiw-hero__cta .btn {
    width: 100%;
  }

  .hiw-cta-card__buttons {
    flex-direction: column;
  }

  .hiw-cta-card__buttons .btn {
    width: 100%;
  }
}


.partners-hero__text {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}

.partners-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.partner-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-white);
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(25, 10, 7, 0.06);
}

.partner-tag i {
  color: var(--color-accent);
  font-size: 0.875rem;
}

.partners-hero__note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 24px;
}

.partners-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.partners-hero__graphic {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
  opacity: 0.8;
  pointer-events: none;
}

.partners-hero__graphic svg {
  width: 100%;
  height: auto;
}

/* Partner Benefits */
.partner-benefits {
  background: var(--color-bg-white);
}

.benefit-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  height: 100%;
  transition: all var(--transition-medium);
}

.benefit-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.benefit-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 14px;
  color: #ffffff;
  font-size: 1.375rem;
  margin-bottom: 20px;
}

.benefit-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.benefit-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

/* Partner Process Flow */



/* Earnings Section */
.earnings-section {
  background: var(--color-bg-white);
}

.earnings-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
  height: 100%;
  transition: all var(--transition-medium);
}

.earnings-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.earnings-card--featured {
  border-color: var(--color-accent);
  box-shadow: 0 8px 32px rgba(184, 106, 87, 0.15);
}

.earnings-card__header {
  background: var(--color-bg-white);
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-light);
}

.earnings-card--featured .earnings-card__header {
  background: var(--gradient-primary);
}

.earnings-card--featured .earnings-card__scenario,
.earnings-card--featured .earnings-card__title {
  color: #ffffff;
}

.earnings-card__scenario {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 4px;
}

.earnings-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin: 0;
}

.earnings-card__body {
  padding: 24px;
}

.earnings-card__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.earnings-card__value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.earnings-card__outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-white);
  padding: 12px 16px;
  border-radius: 10px;
}

.earnings-card__outcome i {
  color: var(--color-accent);
  font-size: 1.125rem;
}

.earnings-card__outcome span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.earnings-disclaimer {
  text-align: center;
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.earnings-disclaimer i {
  color: var(--color-accent);
  margin-right: 6px;
}

/* Comparison Section */
/* .comparison-section {
  background: var(--color-bg-primary);
} */

.comparison-table {
  display: flex;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.comparison-col {
  flex: 1;
  background: var(--color-bg-white);
  border-radius: var(--card-radius);
  padding: 28px;
  border: 1px solid var(--color-border-light);
}

.comparison-col--japiyo {
  border-color: var(--color-accent);
  box-shadow: 0 8px 32px rgba(184, 106, 87, 0.1);
}

.comparison-col__header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.comparison-col__header i {
  color: var(--color-accent);
}

.comparison-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-col__list li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  padding: 10px 0 10px 25px;
  border-bottom: 1px solid var(--color-border-light);
}

.comparison-col__list li:last-child {
  border-bottom: none;
}

.comparison-col--traditional .comparison-col__list i {
  color: #dc2626;
  margin-top: 3px;
}

.comparison-col--japiyo .comparison-col__list i {
  color: #16a34a;
  margin-top: 3px;
}

/* Support Section */
/* .support-section {
  background: var(--color-bg-white);
}

.support-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.support-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.support-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.375rem;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}

.support-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.support-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
} */

/* Profile Section */

.profile-section .why-project__item{
  align-items: center;
      padding: 10px 0;
          font-weight: 300;
}

/* 
.profile-section {
  background: var(--color-bg-primary);
}

.profile-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 24px 16px;
  text-align: center;
  height: 100%;
  transition: all var(--transition-medium);
}

.profile-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.profile-card i {
  color: var(--color-accent);
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.profile-card h5 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin-bottom: 0;
} */

/* Testimonials Section */


/* .testimonials-section {
  background: var(--color-bg-white);
} */

.testimonial-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 28px;
  height: 100%;
}

.testimonial-card__stars {
  margin-bottom: 16px;
}

.testimonial-card__stars i {
  color: #f59e0b;
  font-size: 0.875rem;
}

.testimonial-card__quote {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 20px;
}

.testimonial-card__author {
  border-top: 1px solid var(--color-border-light);
  padding-top: 16px;
}

.testimonial-card__name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.testimonial-card__location {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Partner Form Section */
/* .partner-form-section {
  background: linear-gradient(135deg, #190a07 0%, #2b100c 100%);
} */

.partner-form-card {
  background: var(--color-bg-white);
  border-radius: var(--card-radius);
  overflow: hidden;
  /* box-shadow: 0 16px 64px rgba(25, 10, 7, 0.2); */
}

.partner-form-card__info {
  background: var(--color-bg-primary);
  padding: 40px;
  height: 100%;
}

.partner-form-card__info h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.partner-form-card__info p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.partner-form-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.partner-form-card__benefits li {
  padding: 8px 0;
  padding-left: 25px;
}

.partner-form-card__benefits i {
  color: var(--color-accent);
}

.partner-form {
  padding: 40px;
}

.partner-form .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.partner-form .form-control,
.partner-form .form-select {
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.partner-form .form-control:focus,
.partner-form .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(184, 106, 87, 0.15);
}

.partner-form .form-check-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.partner-form .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Responsive Partners */
@media (max-width: 991px) {
  .partners-hero {
    padding: 140px 0 60px;
  }

  .partners-hero__graphic {
    display: none;
  }

  /* Process Flow Mobile */
  .process-flow {
    flex-direction: column;
    align-items: center;
  }

  .process-step {
    max-width: 100%;
    width: 100%;
  }

  .process-step:not(:last-child)::after {
    content: '↓';
    position: static;
    display: block;
    margin-top: 12px;
  }

  /* Comparison Mobile */
  .comparison-table {
    flex-direction: column;
  }

  .partner-form-card__info,
  .partner-form {
    padding: 32px 24px;
  }
}

@media (max-width: 575px) {
  .partners-hero__tags {
    flex-direction: column;
    align-items: stretch;
  }

  .partners-hero__cta {
    flex-direction: column;
  }

  .partners-hero__cta .btn {
    width: 100%;
  }
}

/* =====================================================
   34. CONTACT PAGE STYLES
   ===================================================== */



/* .contact-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
} */

.contact-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 20px;
}

.contact-hero__text {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 32px;
}

.contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-white);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  box-shadow: 0 4px 12px rgba(25, 10, 7, 0.05);
}

.contact-tag i {
  color: var(--color-accent);
}

.contact-hero__graphic {
  position: absolute;
  right: 5%;
  top: 0;
  transform: translateY(-50%);
  width: 100%;
  opacity: 0.8;
  pointer-events: none;
}

/* Main Contact Section */
.contact-main-section {
  background: var(--color-bg-white);
}

.contact-info-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 40px;
  height: 100%;
}

.contact-info-card__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.contact-info-card__text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  line-height: 1.7;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}



.contact-info-item__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.contact-info-item__value {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-info-item__value:hover {
  color: var(--color-accent);
}

.contact-partner-note {
  background: rgba(184, 106, 87, 0.08);
  border-radius: 12px;
  padding: 16px;
}

.contact-partner-note p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
  line-height: 1.6;
}

.contact-form-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.contact-form-card__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.contact-form-card__subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}

.contact-form .form-label,.login-form .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.contact-form .form-control,
.contact-form .form-select,
.login-form .form-control {
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
  background-color: var(--color-bg-primary);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus,
.login-form .form-control:focus {
  border-color: var(--color-accent);
  background-color: var(--color-bg-white);
  box-shadow: 0 0 0 3px rgba(184, 106, 87, 0.15);
}

/* Office Locations */
.locations-section {
  background: var(--color-bg-primary);
}

.location-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius);
  padding: 32px;
  text-align: center;
  transition: all var(--transition-medium);
}

.location-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.location-card__icon {
  width: 64px;
  height: 64px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 24px;
}

.location-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.location-card__address {
  font-style: normal;
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.location-card__note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Map Section */
.map-section {
  background: var(--color-bg-white);
}

.map-container {
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border-light);
}

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

/* WhatsApp CTA */
.whatsapp-cta-section {
  padding-bottom: 60px;
}

.whatsapp-cta-strip {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  border-radius: var(--card-radius);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  box-shadow: 0 12px 40px rgba(18, 140, 126, 0.25);
  flex-wrap: wrap;
  gap: 24px;
}

.whatsapp-cta-strip__content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.whatsapp-cta-strip__icon {
  font-size: 3rem;
  color: #ffffff;
}

.whatsapp-cta-strip__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.whatsapp-cta-strip__subtitle {
  margin-bottom: 0;
  opacity: 0.9;
  font-size: 1.0625rem;
}


.btn-whatsapp {
  background-color: #25D366;
  color: #ffffff;
  border: none;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-fast);
}

.btn-whatsapp:hover {
  background-color: #1faf56;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Contact FAQ */
.contact-faq-section {
  background: var(--color-bg-primary);
  padding-top: 60px;
}

.contact-faq-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text-primary);
}

.contact-faq-container {
  max-width: 800px;
  margin: 0 auto;
}


/* whatsapp widtget  */

button.wh-ap-btn {outline: none;width: 60px;height: 60px;border: 0;background-color: #2ecc71;padding: 0;border-radius: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);cursor: pointer;transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;}
button.wh-ap-btn::after {content: "";background-image: url("../assets/img/whsp-icon.png");background-position: center center;background-repeat: no-repeat;background-size: 60%;width: 100%;height: 100%;display: block;opacity: 1;}
button.wh-ap-btn:hover {opacity: 1;background-color: #20bf6b;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
.wh-api {bottom: 0;right: 0;}
.wh-fixed {margin-right: 15px;margin-bottom: 15px;}
button.wh-ap-btn::before {content: "Chat with me";display: block;position: absolute;margin-left: -180px;margin-top: 16px;height: 25px;background: #49654e;color: #fff;font-weight: 400;font-size: 15px;border-radius: 3px;width: 0;opacity: 0;padding: 0;transition: opacity 0.4s, width 0.4s, padding 0.5s;padding-top: 7px;border-radius: 30px;box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);}
.wh-fixed > a:hover button.wh-ap-btn::before {opacity: 1;width: auto;padding-top: 0px;padding-left: 10px;padding-right: 10px;width: 150px;}
/* animacion pulse */
.whatsapp-pulse {width: 60px;height: 60px;right: 10px;bottom: 10px;background: #10b418;cursor: pointer;border-radius: 50%;z-index: 99;line-height: 25px;}
.whatsapp-pulse:before {position: absolute;content: " ";z-index: -1;bottom: -15px;right: -15px;background-color: #10b418;width: 90px;height: 90px;border-radius: 100%;animation-fill-mode: both;-webkit-animation-fill-mode: both;opacity: 0.6;-webkit-animation: pulse 1s ease-out;animation: pulse 1.8s ease-out;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}

@-webkit-keyframes pulse {
	0% {-webkit-transform: scale(0);opacity: 0;}
	25% {-webkit-transform: scale(0.3);opacity: 1;}
	50% {-webkit-transform: scale(0.6);opacity: 0.6;}
	75% {-webkit-transform: scale(0.9);opacity: 0.3;}
	100% {-webkit-transform: scale(1);opacity: 0;}}

@keyframes pulse {
	0% {transform: scale(0);opacity: 0;}
	25% {transform: scale(0.3);opacity: 1;}
	50% {transform: scale(0.6);opacity: 0.6;}
	75% {transform: scale(0.9);opacity: 0.3;}
	100% {transform: scale(1);opacity: 0;}
}
/* end  */

.banner-effect{position: relative;}
.banner-effect::before{content: '';position: absolute; top: 0; width: 100%;height: 100%; background: linear-gradient(180deg, #0000000f 38%, #000000 50%); }

@media(min-width:1024px){.ab.banner-effect:before{display: none;}}
/* Responsive */
@media (max-width: 1140px) {
  #mainNavbar .container{max-width: 1024px;}
}
@media (max-width: 1024px) {
  .steps-container {padding: 0;}
.search-bar__field{min-width: 110px;}
.spotlight__calculator{bottom: -220px;right: 9px;padding: 20px;}
.spotlight__calculator-title{margin-bottom: 0;padding-bottom: 10px;}

  /* how it work  */
  .docs-card{padding: 15px;}
  .docs-card__header{    margin-bottom: 0;}


  .listing-card .listing-card__image{
    height: 200px;
    width: 100%;
  }
  .listing-card .op_image{
        min-width: 100%;
  }
  .listing-card .op_image img{width: 100%;}
  .listing-card__body{padding: 10px;}


}
@media (max-width: 991px) {

  /* banner  */
  .about-hero {
    padding: 400px 0 60px;
    background-position: -500px 75px;
    background-size: 900px;
  }
  /* banner  */

  .custom-list li {padding-left: 25px;}
 
   .page-title{    font-size: clamp(2.2rem, 6vw, 4rem);}
   .hero__subtitle{max-width: 100%;}

   .section-desc,.section-heading__subtitle{font-size: 1rem !important;line-height: 1.5;}


   /* home  */
   .search-bar{padding:16px;}.hero {min-height: auto;padding-top: 120px;padding-bottom: 100px;}
  .search-bar__field {width: 100%;min-width: 100%;border-right: none;border-bottom: 1px solid var(--color-border-light);padding-bottom: 16px;padding-right: 0;}

  .search-bar__field:last-of-type {border-bottom: none;}
  .search-bar__btn {width: 100%;}
  /* project home card  */
  .project-card__link{    font-size: 0.775rem;    gap: 0px;}.project-card__body{    padding: 15px;}

  .why-invest__item{gap: 10px;padding: 10px;}  .why-invest__item svg{height: 38px;width: 38px;}.why-invest__text{font-size: .9rem;}

    /* .project-card__stats {grid-template-columns: 1fr;} */
  .why-invest__stats {flex-direction: row;gap: 14px;margin-top: 20px;padding-top: 20px;}
  .why-invest__stat-value{font-size: 1.8rem;}
  .why-invest__stat-label{font-size: 0.775rem;line-height: 1.2;}
  .spotlight__cta {flex-direction: column;}
  .spotlight__cta .btn {width: 100%;}
  .spotlight__calculator {bottom: 35px;right: 15px;}

  /* about us  */
  .parallaxie{    height: 200px !important;background-position: center;}
  .protection-note{margin-top: 0;}
  .protection-card {padding: 15px;}

  /* partenr  */
  .diff-card{padding: 15px;}
  #partner-form .btn-lg{padding: 16px 20px;}
   


  .contact-hero {padding: 140px 0 60px;}
  .contact-info-card,
  .contact-form-card {padding: 32px 24px;}
  .whatsapp-cta-strip {flex-direction: column;text-align: center;align-items: center;}
  .whatsapp-cta-strip__content {flex-direction: column;gap: 16px;}
  .whatsapp-cta-strip__title {font-size: 1.375rem;}
  .footer__title{margin-bottom: 10px;}.footer__links li {margin-bottom: 4px;}
.footer__contact-item{margin-bottom: 10px;}


/* project filer  */
.filter-group{padding: 10px 20px;}
.filter-checkbox__label{font-size: 0.8375rem;}
.filter-sidebar__actions{    gap: 0px;padding: 10px 20px 20px;}
.filter-sidebar__actions .btn{padding: 10px 3px;font-size: 15px;}
#filterOffcanvas .offcanvas-header{    padding: 10px 24px;}
}

@media (max-width: 575px) {
  /* home  */
    .hero__badges {
    flex-direction: column;
    align-items: center;
  }

  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }


  .contact-hero__graphic {
    display: none;
  }

  .whatsapp-cta-strip {
    padding: 32px 24px;
  }

  .btn-whatsapp {
    width: 100%;
  }
}