/* ============================================
   REAL ESTATE PROJECT - GLOBAL STYLES
   Single CSS file for all pages
   ============================================ */

/* ---------- CSS VARIABLES (ROOT) ---------- */
:root {
    /* Colors */
    --prop-primary: #2563EB;/*figma  */
    --prop-primary-hover: #1D4ED8;
    --prop-primary-dark:#1E3A8A;/*figma  */
    --prop-secondary: #64748B;
    --prop-success: #08BD81;
    --prop-warning: #F59E0B;
    --prop-danger: #EF4444;
    --prop-black: #000000;/*figma  */
    --prop-white: #FFFFFF;/*figma  */
    --prop-white-10:#CAC9C9;/*figma  */
    --prop-white-50:#F8F8F8;/*figma  */
    --prop-white-60:#F9F9F9;/*figma  */
    --prop-white-100: #FBFBFB;/*figma  */
    --prop-white-150:#FAFBFD;/*figma  */
    --prop-gray-10:#ACACAC; /*figma  */
    --prop-gray-20:#A8A8A8;/*figma  */
    --prop-gray-50: #F5F5F5;/*figma  */
    --prop-gray-100: #FAFAFA;/*figma  */
    --prop-gray-150:#EBEBEB;/*figma  */
    --prop-gray-200: #E0EAFF;/*figma  */
    --prop-gray-250: #C6C6C6;/*figma  */
    --prop-gray-300: #C7C7C7;/*figma  */
    --prop-gray-350:#D9D9D9;/*figma  */
    --prop-gray-400: #999999;/*figma  */
    --prop-gray-500: #3E4958;/*figma  */
    --prop-gray-550:#6D6D6D;/*figma  */
    --prop-gray-600: #4E4E4E;/*figma  */
    --prop-gray-700: #3A3A3A;/*figma  */
    --prop-gray-800: #1A1A1A;/*figma  */
    --prop-gray-900: #262626;/*figma  */
    --prop-gray-950: #1F2937;/*figma  */
    /*  */
    /* Badge Colors */
    --prop-badge-verified-bg: #FFFFFF;/*figma  */
    --prop-badge-verified-text: #000000;/*figma  */
    --prop-badge-ready-bg: #4278FF;/*figma  */
    --prop-badge-ready-text: #FFFFFF;
    --prop-badge-video-bg: #FFFFFF;
    --prop-badge-video-text: #1E293B;
    --prop-badge-photo-bg: #FFFFFF;
    --prop-badge-photo-text: #1E293B;
    
    /* Typography */
    --prop-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --prop-font-size-xs: 0.75rem;      /* 12px */
    --prop-font-size-sm: 0.875rem;     /* 14px */
    --prop-font-size-base: 1rem;        /* 16px */
    --prop-font-size-lg: 1.125rem;      /* 18px */
    --prop-font-size-xl: 1.25rem;       /* 20px */
    --prop-font-size-2xl: 1.5rem;       /* 24px */
    --prop-font-size-3xl: 1.875rem;     /* 30px */
    --prop-font-size-4xl: 2.25rem;      /* 36px */
    
    --prop-font-weight-normal: 400;
    --prop-font-weight-medium: 500;
    --prop-font-weight-semibold: 600;
    --prop-font-weight-bold: 700;
    
    --prop-line-height-tight: 1.25;
    --prop-line-height-normal: 1.5;
    --prop-line-height-relaxed: 1.75;
    
    --prop-letter-spacing-tight: -0.025em;
    --prop-letter-spacing-normal: 0;
    --prop-letter-spacing-wide: 0.025em;
    
    /* Spacing */
    --prop-spacing-1: 0.25rem;   /* 4px */
    --prop-spacing-2: 0.5rem;    /* 8px */
    --prop-spacing-3: 0.75rem;  /* 12px */
    --prop-spacing-4: 1rem;      /* 16px */
    --prop-spacing-5: 1.25rem;   /* 20px */
    --prop-spacing-6: 1.5rem;    /* 24px */
    --prop-spacing-8: 2rem;      /* 32px */
    --prop-spacing-10: 2.5rem;   /* 40px */
    --prop-spacing-12: 3rem;     /* 48px */
    
    /* Border Radius */
    --prop-radius-sm: 0.25rem;   /* 4px */
    --prop-radius-md: 0.5rem;    /* 8px */
    --prop-radius-lg: 0.75rem;   /* 12px */
    --prop-radius-xl: 1rem;      /* 16px */
    --prop-radius-2xl: 1.25rem;  /* 20px */
    --prop-radius-full: 9999px;  /*Maximum possible rounding (pill/circle). similiar to 50% but some diff*/
    --prop-radius:50%;  /* Maximum possible rounding (oval/ellipse) */
  
    /* Shadows */
    --prop-shadow-sm: 0 0px 6px 0 rgba(0, 0, 0, 0.25);/*figma  */
    --prop-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --prop-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --prop-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --prop-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
    
    /* Transitions */
    --prop-transition-fast: 150ms ease-in-out;
    --prop-transition-normal: 300ms ease-in-out;
    --prop-transition-slow: 500ms ease-in-out;
}

/* ---------- GLOBAL RESET & BASE ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* @media (min-width: 1400px) {
    .container {
        max-width: 1420px;
    }
} */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--prop-font-family);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-normal);
    line-height: var(--prop-line-height-normal);
    color: var(--prop-gray-800);
    background-color: var(--prop-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

/* Autofill background fix */
input.phome-search-input:-webkit-autofill,
input.phome-search-input:-webkit-autofill:hover, 
input.phome-search-input:-webkit-autofill:focus, 
input.phome-search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* ---------- REUSABLE SHIMMER BUTTON EFFECT ---------- */
.prop-btn-shimmer {
    position: relative;
    overflow: hidden;
    transition: all var(--prop-transition-normal);
    cursor: pointer;
}

.prop-btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.prop-btn-shimmer:hover::before {
    left: 100%;
}

.prop-btn-shimmer:hover {
    transform: translateY(-2px);
    box-shadow: var(--prop-shadow-lg);
}

.prop-btn-shimmer:active {
    transform: translateY(0);
}

/* ---------- IMAGE WRAPPER (Never stretch/distort) ---------- */
.prop-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.prop-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.prop-cursor-pointer {
    cursor: pointer;
}

.prop-transition-all {
    transition: all var(--prop-transition-normal);
}

/* Focus states for accessibility */
.prop-search-input:focus,
.prop-navbar-btn-primary:focus,
.prop-navbar-btn-secondary:focus,
.prop-carousel-control:focus,
.prop-thumbnail-item:focus {
    outline: none;
}

/* Smooth hover for interactive elements */
.prop-interactive-hover {
    transition: all var(--prop-transition-fast);
}

.prop-interactive-hover:hover {
    transform: translateY(-1px);
}

/* ============================================
   NAVBAR SECTION Start
   ============================================ */

.prop-navbar {
    background-color: var(--prop-white);
    padding: var(--prop-spacing-1) 0;
    box-shadow: var(--prop-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.prop-navbar-brand {
     width: 99px;
    height: 58px;
    object-fit: cover;
}

.prop-navbar-brand-logo {
    width: 100%;
    height: 100%;
}
.prop-navbar-brand-logo-text {
    width: 96px;
    height: 36px;
    object-fit: contain;
}

.prop-navbar-brand-text {
    display: flex;
    flex-direction: column;
}

.prop-navbar-brand-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    letter-spacing: var(--prop-letter-spacing-tight);
}

.prop-navbar-brand-subtitle {
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-500);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.prop-navbar-nav {
    /* gap: var(--prop-spacing-4); */
}

.prop-navbar-nav .nav-link {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-950);
    /* padding: 0 !important; */
    position: relative;
    transition: color var(--prop-transition-fast);
}

.prop-navbar-nav .nav-link:hover,
.prop-navbar-nav .nav-link:focus {
    color: var(--prop-primary);
}

.prop-navbar-nav .nav-link.active {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
}

/* Search Box */
.prop-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.prop-search-input {
    width: 271px;
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    padding-left: 2.2rem;
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-10);
    background-color: var(--prop-white-100);
    transition: all var(--prop-transition-normal);
    outline: none;
}

.prop-search-input::placeholder {
    color: var(--prop-gray-400);
}

.prop-search-input:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
    background-color: var(--prop-white);
}

.prop-search-icon {
    position: absolute;
    left: var(--prop-spacing-3);
    color: var(--prop-gray-250);
    font-size: var(--prop-font-size-xl);
    pointer-events: none;
    line-height: 1;
}

/* Navbar Buttons */
.prop-navbar-btn-primary {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-5);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.prop-navbar-btn-primary:hover {
    background-color: var(--prop-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--prop-shadow-md);
}

.prop-navbar-btn-secondary {
    width:153px;
    background-color: var(--prop-gray-150);
    color: var(--prop-black);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .prop-navbar-btn-secondary:hover {
    background-color: var(--prop-gray-200);
    color: var(--prop-gray-900);
} */
/* 
.prop-user-name{
    background-color: var(--prop-gray-150);
    color: var(--prop-black);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-5);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
} */

/* Navbar Toggler */
.prop-navbar-toggler {
    border: none;
    padding: var(--prop-spacing-2);
    color: var(--prop-gray-700);
}

.prop-navbar-toggler:focus {
    box-shadow: none;
}
@media (max-width: 575.98px) {
        .prop-navbar-brand-title {
        font-size: var(--prop-font-size-base);
    }
    
    .prop-search-input {
        width: 100%;
    }
}
/* Extra large devices (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .prop-search-input ,.prop-search-icon{
        /* width: 200px; */
        display: none;
    }
}

/* XXL devices (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1300.98px) {
    .prop-search-input ,.prop-search-icon{
        /* width: 240px; */
        display: none;
    }
}

/* NAVBAR SECTION End */

/* Registration & login start */
/* ============================================
   AUTH PAGES (Login & Register) - PAGE 4
   Prefix: p4-
   ============================================ */

/* ---------- AUTH PAGE BASE ---------- */
.p4-auth-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-family: var(--prop-font-family);
    background-color: var(--prop-white);
}

.p4-auth-page body {
    overflow: hidden;
    height: 100vh;
}

.p4-auth-container {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ============================================
   LEFT PANEL - BRANDING SECTION
   ============================================ */

.p4-auth-left {
    position: relative;
    width: 45%;
    height: 100%;
    background: linear-gradient(135deg, var(--prop-primary-dark) 0%, var(--prop-primary) 50%, var(--prop-primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Background Curved Layers */
.p4-auth-bg-layer {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

.p4-bg-layer-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #ffffff 0%, transparent 100%);
    top: -150px;
    left: -100px;
    animation: p4-float-slow 8s ease-in-out infinite;
}

.p4-bg-layer-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(225deg, #ffffff 0%, transparent 100%);
    bottom: -100px;
    right: -150px;
    animation: p4-float-slow 10s ease-in-out infinite reverse;
}

.p4-bg-layer-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: p4-pulse 6s ease-in-out infinite;
}

@keyframes p4-float-slow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -20px) rotate(5deg); }
}

@keyframes p4-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.25; }
}

/* Floating Particles */
.p4-particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.p4-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: p4-particle-float linear infinite;
}

.p4-p-1 { width: 8px; height: 8px; top: 10%; left: 15%; animation-duration: 12s; animation-delay: 0s; }
.p4-p-2 { width: 6px; height: 6px; top: 20%; left: 80%; animation-duration: 15s; animation-delay: 1s; }
.p4-p-3 { width: 10px; height: 10px; top: 40%; left: 10%; animation-duration: 10s; animation-delay: 2s; }
.p4-p-4 { width: 5px; height: 5px; top: 60%; left: 70%; animation-duration: 18s; animation-delay: 0.5s; }
.p4-p-5 { width: 7px; height: 7px; top: 80%; left: 30%; animation-duration: 14s; animation-delay: 3s; }
.p4-p-6 { width: 9px; height: 9px; top: 15%; left: 50%; animation-duration: 11s; animation-delay: 1.5s; }
.p4-p-7 { width: 4px; height: 4px; top: 35%; left: 90%; animation-duration: 16s; animation-delay: 2.5s; }
.p4-p-8 { width: 8px; height: 8px; top: 55%; left: 20%; animation-duration: 13s; animation-delay: 0.8s; }
.p4-p-9 { width: 6px; height: 6px; top: 75%; left: 60%; animation-duration: 17s; animation-delay: 4s; }
.p4-p-10 { width: 5px; height: 5px; top: 25%; left: 40%; animation-duration: 19s; animation-delay: 1.2s; }
.p4-p-11 { width: 7px; height: 7px; top: 45%; left: 85%; animation-duration: 12s; animation-delay: 3.5s; }
.p4-p-12 { width: 6px; height: 6px; top: 85%; left: 45%; animation-duration: 14s; animation-delay: 2.2s; }

@keyframes p4-particle-float {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* Sparkles */
.p4-sparkles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.p4-sparkle {
    position: absolute;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    animation: p4-sparkle-twinkle 3s ease-in-out infinite;
}

.p4-s-1 { top: 15%; left: 25%; animation-delay: 0s; }
.p4-s-2 { top: 30%; left: 70%; animation-delay: 0.5s; font-size: 8px; }
.p4-s-3 { top: 50%; left: 15%; animation-delay: 1s; font-size: 14px; }
.p4-s-4 { top: 65%; left: 80%; animation-delay: 1.5s; font-size: 10px; }
.p4-s-5 { top: 80%; left: 40%; animation-delay: 2s; font-size: 12px; }
.p4-s-6 { top: 40%; left: 55%; animation-delay: 2.5s; font-size: 9px; }

@keyframes p4-sparkle-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Glassmorphism Branding Card */
.p4-branding-card {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--prop-radius-2xl);
    padding: var(--prop-spacing-10) var(--prop-spacing-8);
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: p4-fade-in-up 0.8s ease-out;
}

@keyframes p4-fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.p4-branding-logo {
    margin-bottom: var(--prop-spacing-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.p4-branding-logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    /* filter: brightness(0) invert(1); */
}

.p4-branding-title {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    margin-bottom: var(--prop-spacing-3);
    line-height: var(--prop-line-height-tight);
}

.p4-branding-subtitle {
    font-size: var(--prop-font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--prop-spacing-8);
    line-height: var(--prop-line-height-relaxed);
    font-weight: var(--prop-font-weight-medium);
}

/* Stats Section */
.p4-branding-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-4);
    padding-top: var(--prop-spacing-6);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.p4-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.p4-stat-number {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    line-height: 1;
}

.p4-stat-label {
    font-size: var(--prop-font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--prop-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.p4-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
}

/* Wave SVG Divider */
.p4-wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 5;
}

.p4-wave-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   RIGHT PANEL - FORM SECTION
   ============================================ */

.p4-auth-right {
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-white);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--prop-gray-300) transparent;
}

.p4-auth-right::-webkit-scrollbar {
    width: 6px;
}

.p4-auth-right::-webkit-scrollbar-track {
    background: transparent;
}

.p4-auth-right::-webkit-scrollbar-thumb {
    background-color: var(--prop-gray-300);
    border-radius: var(--prop-radius-full);
}

.p4-auth-form-wrapper {
    width: 100%;
    max-width: 480px;
    padding: var(--prop-spacing-8) var(--prop-spacing-6);
    animation: p4-fade-in-up 0.6s ease-out 0.2s both;
}

/* Mobile Logo (hidden on desktop) */
.p4-mobile-logo {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    margin-bottom: var(--prop-spacing-6);
}

.p4-mobile-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.p4-mobile-logo-text {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
}

/* Form Header */
.p4-form-header {
    text-align: center;
    margin-bottom: var(--prop-spacing-6);
}

.p4-form-title {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
    line-height: var(--prop-line-height-tight);
}

.p4-form-subtitle {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
}

/* Form Groups */
.p4-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-4);
}

.p4-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p4-form-group-checkbox {
    margin-top: var(--prop-spacing-1);
}

.p4-form-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin-bottom: 2px;
}

/* Input Wrapper */
.p4-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.p4-input-icon {
    position: absolute;
    left: var(--prop-spacing-4);
    color: var(--prop-gray-400);
    font-size: var(--prop-font-size-lg);
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    transition: color var(--prop-transition-fast);
}

.p4-form-input {
    width: 100%;
    padding: var(--prop-spacing-3) var(--prop-spacing-4) var(--prop-spacing-3) 2.8rem;
    border: 1.5px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-800);
    background-color: var(--prop-white);
    transition: all var(--prop-transition-normal);
    outline: none;
    font-family: var(--prop-font-family);
    height: 48px;
}

.p4-form-input::placeholder {
    color: var(--prop-gray-400);
    font-weight: var(--prop-font-weight-normal);
}

.p4-form-input:hover {
    border-color: var(--prop-gray-350);
}

.p4-form-input:focus {
    border-color: var(--prop-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 4px 12px rgba(37, 99, 235, 0.06);
    background-color: var(--prop-white);
}

.p4-form-input:focus + .p4-input-icon,
.p4-input-wrapper:focus-within .p4-input-icon {
    color: var(--prop-primary);
}

/* Input States */
.p4-form-input.p4-input-error {
    border-color: var(--prop-danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.p4-form-input.p4-input-error:focus {
    border-color: var(--prop-danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.p4-form-input.p4-input-success {
    border-color: var(--prop-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

/* Toggle Password Button */
.p4-toggle-password {
    position: absolute;
    right: var(--prop-spacing-3);
    background: none;
    border: none;
    color: var(--prop-gray-400);
    cursor: pointer;
    padding: var(--prop-spacing-1);
    font-size: var(--prop-font-size-lg);
    line-height: 1;
    transition: color var(--prop-transition-fast);
    z-index: 2;
}

.p4-toggle-password:hover {
    color: var(--prop-gray-700);
}

/* Error Messages */
.p4-form-error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: var(--prop-font-size-xs);
    color: var(--prop-danger);
    font-weight: var(--prop-font-weight-medium);
    margin-top: 2px;
    animation: p4-shake 0.3s ease-in-out;
}

.p4-form-error.p4-error-visible {
    display: flex;
}

.p4-form-error i {
    font-size: 13px;
    flex-shrink: 0;
}

.p4-checkbox-error {
    margin-top: 4px;
    margin-left: 28px;
}

@keyframes p4-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Form Options (Remember Me + Forgot Password) */
.p4-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--prop-spacing-1);
}

/* Checkbox */
.p4-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    cursor: pointer;
    user-select: none;
}

.p4-checkbox-input {
    display: none;
}

.p4-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--prop-gray-300);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--prop-transition-fast);
    flex-shrink: 0;
    background-color: var(--prop-white);
}

.p4-checkbox-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--prop-primary);
    border-radius: 2px;
    transform: scale(0);
    transition: transform var(--prop-transition-fast);
}

.p4-checkbox-input:checked + .p4-checkbox-custom {
    border-color: var(--prop-primary);
    background-color: var(--prop-primary);
}

.p4-checkbox-input:checked + .p4-checkbox-custom::after {
    content: '\2713';
    width: auto;
    height: auto;
    background: none;
    color: var(--prop-white);
    font-size: 11px;
    font-weight: bold;
    transform: scale(1);
}

.p4-checkbox-label {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-600);
    font-weight: var(--prop-font-weight-medium);
    line-height: 1.4;
}

.p4-checkbox-terms .p4-checkbox-label {
    font-size: var(--prop-font-size-xs);
}

.p4-checkbox-link {
    color: var(--prop-primary);
    text-decoration: none;
    font-weight: var(--prop-font-weight-semibold);
    transition: color var(--prop-transition-fast);
}

.p4-checkbox-link:hover {
    color: var(--prop-primary-hover);
    text-decoration: underline;
}

/* Forgot Password Link */
.p4-forgot-link {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
}

.p4-forgot-link:hover {
    color: var(--prop-primary-hover);
    text-decoration: underline;
}

/* Password Strength Indicator */
.p4-password-strength {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    margin-top: -4px;
}

.p4-strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.p4-strength-bar {
    flex: 1;
    height: 4px;
    border-radius: var(--prop-radius-full);
    background-color: var(--prop-gray-200);
    transition: background-color var(--prop-transition-normal);
}

.p4-strength-bar.p4-strength-weak { background-color: var(--prop-danger); }
.p4-strength-bar.p4-strength-fair { background-color: var(--prop-warning); }
.p4-strength-bar.p4-strength-good { background-color: #3B82F6; }
.p4-strength-bar.p4-strength-strong { background-color: var(--prop-success); }

.p4-strength-text {
    font-size: var(--prop-font-size-xs);
    color: var(--prop-gray-500);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
}

/* Submit Button */
.p4-btn-full {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    border: none;
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    position: relative;
    overflow: hidden;
    margin-top: var(--prop-spacing-2);
}

.p4-btn-primary {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

.p4-btn-primary:hover {
    background-color: var(--prop-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.p4-btn-primary:active {
    transform: translateY(0);
}

.p4-btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Button Loader */
.p4-btn-loader {
    display: none;
    align-items: center;
    justify-content: center;
}

.p4-btn-primary.p4-btn-loading .p4-btn-text {
    display: none;
}

.p4-btn-primary.p4-btn-loading .p4-btn-loader {
    display: flex;
}

.p4-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--prop-white);
    border-radius: 50%;
    animation: p4-spin 0.8s linear infinite;
}

@keyframes p4-spin {
    to { transform: rotate(360deg); }
}

/* Divider */
.p4-divider {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    margin: var(--prop-spacing-4) 0;
}

.p4-divider::before,
.p4-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--prop-gray-250), transparent);
}

.p4-divider-text {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-400);
    font-weight: var(--prop-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Login */
.p4-social-login {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.p4-social-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-3);
    background-color: var(--prop-white);
    border: 1.5px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-700);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    font-family: var(--prop-font-family);
}

.p4-social-btn:hover {
    border-color: var(--prop-gray-350);
    background-color: var(--prop-gray-50);
    box-shadow: var(--prop-shadow-sm);
    transform: translateY(-1px);
}

.p4-social-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Auth Footer */
.p4-auth-footer {
    text-align: center;
    /* margin-top: var(--prop-spacing-5);
    padding-top: var(--prop-spacing-4); */
    /* border-top: 1px solid var(--prop-gray-150); */
}

.p4-auth-footer p {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-600);
    font-weight: var(--prop-font-weight-medium);
    margin: 0;
}

.p4-auth-link {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-bold);
    text-decoration: none;
    transition: all var(--prop-transition-fast);
}

.p4-auth-link:hover {
    color: var(--prop-primary-hover);
    text-decoration: underline;
}

/* Back to Home */
.p4-back-home {
    text-align: center;
    margin-top: var(--prop-spacing-4);
}

.p4-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-500);
    font-weight: var(--prop-font-weight-medium);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
}

.p4-back-link:hover {
    color: var(--prop-primary);
}

/* ============================================
   RESPONSIVE: AUTH PAGES
   ============================================ */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .p4-auth-form-wrapper {
        max-width: 520px;
        padding: var(--prop-spacing-10) var(--prop-spacing-8);
    }

    .p4-branding-card {
        max-width: 480px;
        padding: var(--prop-spacing-12) var(--prop-spacing-10);
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991.98px) {
    .p4-auth-left {
        width: 40%;
    }

    .p4-auth-right {
        width: 60%;
    }

    .p4-branding-card {
        padding: var(--prop-spacing-8) var(--prop-spacing-6);
    }

    .p4-branding-title {
        font-size: var(--prop-font-size-2xl);
    }

    .p4-branding-stats {
        flex-direction: column;
        gap: var(--prop-spacing-3);
    }

    .p4-stat-divider {
        width: 30px;
        height: 1px;
    }

    .p4-auth-form-wrapper {
        padding: var(--prop-spacing-6) var(--prop-spacing-5);
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    .p4-auth-page {
        overflow: auto;
        height: auto;
        min-height: 100vh;
    }

    .p4-auth-page body {
        overflow: auto;
        height: auto;
    }

    .p4-auth-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .p4-auth-left {
        width: 100%;
        min-height: 280px;
        padding: var(--prop-spacing-8) var(--prop-spacing-4);
        display: none;
    }

    .p4-auth-right {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 280px);
        padding: var(--prop-spacing-6) var(--prop-spacing-4);
    }

    .p4-auth-form-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .p4-mobile-logo {
        display: flex;
    }

    .p4-form-title {
        font-size: var(--prop-font-size-xl);
    }

    .p4-branding-stats {
        flex-direction: row;
    }

    .p4-stat-divider {
        width: 1px;
        height: 30px;
    }

    .p4-wave-divider {
        display: none;
    }
}

/* Small Mobile (< 576px) */
@media (max-width: 575.98px) {
    .p4-auth-right {
        padding: var(--prop-spacing-5) var(--prop-spacing-3);
    }

    .p4-form-header {
        margin-bottom: var(--prop-spacing-4);
    }

    .p4-auth-form {
        gap: var(--prop-spacing-3);
    }

    .p4-form-input {
        height: 44px;
        padding: var(--prop-spacing-2) var(--prop-spacing-3) var(--prop-spacing-2) 2.5rem;
        font-size: var(--prop-font-size-sm);
    }

    .p4-input-icon {
        left: var(--prop-spacing-3);
        font-size: var(--prop-font-size-base);
    }

    .p4-btn-full {
        height: 44px;
    }

    .p4-form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--prop-spacing-2);
    }

    .p4-checkbox-terms .p4-checkbox-label {
        font-size: 11px;
    }

    .p4-social-btn {
        height: 40px;
    }
}

/* Landscape Mobile */
@media (max-height: 600px) and (min-width: 768px) {
    .p4-auth-left {
        padding: var(--prop-spacing-6) var(--prop-spacing-4);
    }

    .p4-branding-card {
        padding: var(--prop-spacing-6) var(--prop-spacing-5);
    }

    .p4-branding-logo {
        margin-bottom: var(--prop-spacing-4);
    }

    .p4-branding-logo-img {
        width: 60px;
        height: 60px;
    }

    .p4-branding-title {
        font-size: var(--prop-font-size-xl);
    }

    .p4-branding-subtitle {
        font-size: var(--prop-font-size-sm);
        margin-bottom: var(--prop-spacing-4);
    }

    .p4-branding-stats {
        padding-top: var(--prop-spacing-4);
    }

    .p4-auth-form-wrapper {
        padding: var(--prop-spacing-5) var(--prop-spacing-4);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .p4-auth-left {
        display: none;
    }

    .p4-auth-right {
        width: 100%;
    }
}


/* ============================================
   REGISTER PAGE COMPACT STYLES (No Scroll)
   ============================================ */

/* Reduce spacing on register form for desktop */
@media (min-width: 992px) {
    .p4-auth-page:has(#p4RegisterForm) .p4-auth-form-wrapper {
        padding: var(--prop-spacing-5) var(--prop-spacing-6);
        max-width: 460px;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-auth-form {
        gap: 12px;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-form-header {
        margin-bottom: var(--prop-spacing-4);
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-form-title {
        font-size: var(--prop-font-size-xl);
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-form-input {
        height: 44px;
        padding: var(--prop-spacing-2) var(--prop-spacing-3) var(--prop-spacing-2) 2.5rem;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-password-strength {
        margin-top: -2px;
        margin-bottom: 2px;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-divider {
        margin: var(--prop-spacing-3) 0;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-auth-footer {
        /* margin-top: var(--prop-spacing-4);
        padding-top: var(--prop-spacing-3); */
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-back-home {
        margin-top: var(--prop-spacing-3);
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-social-btn {
        height: 40px;
    }

    .p4-auth-page:has(#p4RegisterForm) .p4-btn-full {
        height: 44px;
        margin-top: var(--prop-spacing-1);
    }
}

/* Alternative: use a specific class on register body */
body.p4-register-page .p4-auth-form-wrapper {
    padding: var(--prop-spacing-5) var(--prop-spacing-6);
}

body.p4-register-page .p4-auth-form {
    gap: 10px;
}

body.p4-register-page .p4-form-header {
    margin-bottom: var(--prop-spacing-4);
}

body.p4-register-page .p4-form-input {
    height: 44px;
}

body.p4-register-page .p4-divider {
    margin: var(--prop-spacing-3) 0;
}

body.p4-register-page .p4-auth-footer {
    /* margin-top: var(--prop-spacing-3); */
}



/* ============================================
   AUTH BUTTON SHIMMER EFFECT
   ============================================ */

/* .p4-btn-primary.p4-btn-shimmer {
    position: relative;
    overflow: hidden;
}

.p4-btn-primary.p4-btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.p4-btn-primary.p4-btn-shimmer:hover::before {
    left: 100%;
} */

/* ============================================
   SMOOTH INPUT FOCUS SHADOWS
   ============================================ */

.p4-form-input {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.p4-form-input:focus {
    box-shadow: 
        0 0 0 4px rgba(37, 99, 235, 0.08),
        0 4px 12px rgba(37, 99, 235, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ============================================
   FORM GROUP FOCUS STATES
   ============================================ */

.p4-form-group:focus-within .p4-form-label {
    color: var(--prop-primary);
}

/* ============================================
   AUTH PAGE SCROLLBAR STYLING
   ============================================ */

.p4-auth-right::-webkit-scrollbar {
    width: 6px;
}

.p4-auth-right::-webkit-scrollbar-track {
    background: transparent;
}

.p4-auth-right::-webkit-scrollbar-thumb {
    background-color: var(--prop-gray-300);
    border-radius: 999px;
}

.p4-auth-right::-webkit-scrollbar-thumb:hover {
    background-color: var(--prop-gray-400);
}

/* ============================================
   LOADING SPINNER COLOR FIX
   ============================================ */

.p4-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

/* Registration & login end */

/* ============================================
   FOOTER SECTION Start
============================================ */

.prop-footer {
    position: relative;
    background-color: var(--prop-primary);
    padding: 0 0 60px;
    margin-top: 70px;
}

/* ============================================
   NEWSLETTER CARD
============================================ */

.prop-newsletter-card {
    position: relative;
    width: 70%;
    max-width: 1000px;
    margin: 0 auto 50px;
    background-color: var(--prop-white);
    border-radius: 20px;
    box-shadow: 0 4px 33px rgba(0, 0, 0, 0.25);
    padding: 30px 50px;
    text-align: center;
}

.prop-newsletter-heading {
    font-size: 32px;
    line-height: 1.3;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-700);
    margin: 0 0 30px;
}

.prop-newsletter-form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.prop-newsletter-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-bottom: 1px solid var(--prop-gray-300);
    border-radius: 0;
    padding: 10px 5px;
    font-size: 20px;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-600);
    background: transparent;
    outline: none;
    transition: border-color var(--prop-transition-fast);
}

.prop-newsletter-input::placeholder {
    color: var(--prop-gray-400);
}

.prop-newsletter-input:focus {
    border-bottom-color: var(--prop-primary);
}

.prop-newsletter-btn {
    flex-shrink: 0;
    background-color: transparent;
    color: var(--prop-primary);
    border: 2px solid var(--prop-primary);
    padding: 12px 32px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: var(--prop-font-weight-semibold);
    white-space: nowrap;
    transition: all var(--prop-transition-normal);
    box-shadow: 0 4px 19px rgba(0, 0, 0, 0.25);
}

.prop-newsletter-btn:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    transform: scale(1.03);
}

/* Newsletter Message */

#newsletterMessage {
    min-height: 24px;
}


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

.prop-footer-row {
    padding-top: 10px;
}


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

/* .prop-footer-logowrapper {
    display: flex;
    align-items: flex-start;
} */
 .prop-footer-logowrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.prop-footer-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.prop-footer-links {
    align-items: center;
}

.prop-footer-social {
    align-items: center;
}

.prop-footer-social a {
    justify-content: center;
}

.prop-footer-brand-logo {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}


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

.prop-footer-heading {
    font-size: 24px;
    line-height: 1.3;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-white);
    margin: 0 0 20px;
}


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

.prop-footer-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--prop-white);
    line-height: 1.5;
    margin: 0;
}


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

.prop-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.prop-footer-links a {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--prop-white);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
}

.prop-footer-links a:hover {
    color: var(--prop-white);
    text-decoration: underline;
}


/* ============================================
   SOCIAL LINKS
============================================ */

.prop-footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.prop-footer-social a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--prop-white);
    text-decoration: none;
    transition: all var(--prop-transition-fast);
}

.prop-footer-social a:hover {
    color: var(--prop-white);
    transform: translateX(3px);
}

.prop-footer-social-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prop-footer-social-icon i {
    font-size: 20px;
}


/* ============================================
   APP / BADGES
============================================ */

.prop-footer-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prop-footer-badge-link {
    display: inline-block;
    width: fit-content;
    transition: transform var(--prop-transition-fast);
}

.prop-footer-badge-link:hover {
    transform: translateY(-2px);
}

.prop-footer-badge-img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}


/* ============================================
   LARGE DESKTOP
   1200px+
============================================ */

@media (min-width: 1200px) {

    .prop-footer {
        margin-top: 70px;
    }

    .prop-newsletter-card {
        /* width: 70%; */
    }

    .prop-footer-row {
        align-items: flex-start;
    }
}


/* ============================================
   DESKTOP / TABLET LANDSCAPE
   992px - 1199px
============================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .prop-footer {
        margin-top: 60px;
    }

    .prop-newsletter-card {
        /* width: 80%; */
        padding: 35px 40px;
    }

    .prop-newsletter-heading {
        font-size: 28px;
    }

    .prop-footer-heading {
        font-size: 21px;
    }

    .prop-footer-links a,
    .prop-footer-social a {
        font-size: 16px;
    }

    .prop-footer-brand-logo {
        width: 160px;
    }
}


/* ============================================
   TABLET
   768px - 991px
============================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    .prop-footer {
        margin-top: 55px;
        padding-bottom: 45px;
    }

    .prop-newsletter-card {
        /* width: 85%; */
        padding: 30px;
        margin-bottom: 40px;
    }

    .prop-newsletter-heading {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .prop-newsletter-input {
        font-size: 17px;
    }

    .prop-newsletter-btn {
        font-size: 16px;
        padding: 11px 25px;
    }

    .prop-footer-row {
        padding-top: 0;
       
    }

    .prop-footer-row > div {
        margin-bottom: 25px;
    }

    .prop-footer-heading {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .prop-footer-links a,
    .prop-footer-social a {
        font-size: 16px;
    }

    .prop-footer-brand-logo {
        width: 150px;
    }
}


/* ============================================
   MOBILE LANDSCAPE
   576px - 767px
============================================ */

@media (min-width: 576px) and (max-width: 767.98px) {

    .prop-footer {
        margin-top: 48px;
        padding-bottom: 40px;
    }

    .prop-newsletter-card {
        /* width: 90%; */
        padding: 25px 20px;
        margin-bottom: 35px;
        border-radius: 18px;
    }

    .prop-newsletter-heading {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .prop-newsletter-form {
        flex-direction: column;
        gap: 15px;
    }

    .prop-newsletter-input {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .prop-newsletter-btn {
        width: 100%;
        font-size: 16px;
        padding: 11px 20px;
    }

    .prop-footer-row {
        padding-top: 0;
         align-items: center;
    }

    .prop-footer-row > div {
        /* margin-bottom: 25px; */
    }

    .prop-footer-heading {
        font-size: 19px;
        margin-bottom: 14px;
    }

    .prop-footer-links,
    .prop-footer-social {
        gap: 9px;
    }

    .prop-footer-links a,
    .prop-footer-social a {
        font-size: 15px;
    }

    .prop-footer-brand-logo {
        width: 140px;
    }
}


/* ============================================
   MOBILE
   BELOW 576px
============================================ */

@media (max-width: 575.98px) {

    .prop-footer {
        margin-top: 45px;
        padding-bottom: 30px;
    }

    /* Newsletter */

    .prop-newsletter-card {
        width: calc(100% - 30px);
        max-width: none;
        padding: 22px 16px;
        margin: 0 auto 30px;
        border-radius: 16px;
    }

    .prop-newsletter-heading {
        font-size: 19px;
        line-height: 1.35;
        margin-bottom: 18px;
    }

    .prop-newsletter-form {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .prop-newsletter-input {
        width: 100%;
        text-align: center;
        font-size: 15px;
        padding: 9px 3px;
    }

    .prop-newsletter-btn {
        width: 100%;
        padding: 10px 15px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* Footer */

    .prop-footer-row {
        padding-top: 0;
        text-align: center;
    }

    .prop-footer-row > [class*="col-"] {
        /* width: 100%; */
        margin-bottom: 28px;
    }

    .prop-footer-logowrapper {
        justify-content: center;
    }

    .prop-footer-brand-logo {
        width: 140px;
    }

    .prop-footer-heading {
        font-size: 19px;
        margin-bottom: 13px;
    }

    .prop-footer-links,
    .prop-footer-social {
        align-items: center;
        gap: 8px;
    }

    .prop-footer-links a,
    .prop-footer-social a {
        font-size: 15px;
    }

    .prop-footer-social a {
        justify-content: center;
    }

    .prop-footer-social-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .prop-footer-social-icon i {
        font-size: 18px;
    }

    .prop-footer-badges {
        align-items: center;
    }
}


/* ============================================
   VERY SMALL MOBILE
   BELOW 360px
============================================ */

@media (max-width: 359.98px) {

    .prop-newsletter-card {
        width: calc(100% - 20px);
        padding: 18px 12px;
    }

    .prop-newsletter-heading {
        font-size: 17px;
    }

    .prop-newsletter-input,
    .prop-newsletter-btn {
        font-size: 14px;
    }

    .prop-footer-heading {
        font-size: 17px;
    }

    .prop-footer-links a,
    .prop-footer-social a {
        font-size: 14px;
    }

    .prop-footer-brand-logo {
        width: 120px;
    }
    .prop-footer-row > [class*="col-"] {
        width: 100%;
        margin-bottom: 28px;
    }
}
/* footer section end */

/************************************************************************************/
/* PROPERTY DETAIL PAGE START */
/************************************************************************************/

/* Property page: Hero section1 start */

/*BREADCRUMB*/
.prop-breadcrumb-section {
    /* background-color: var(--prop-gray-50); */
    padding: var(--prop-spacing-4) 0  var(--prop-spacing-2);
}

.breadcrumb.prop-breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    align-items: center;
}

/* .prop-breadcrumb-item {
    color: var(--prop-gray-950);
} */

.prop-breadcrumb-item a {
    color: var(--prop-gray-950);
    transition: color var(--prop-transition-fast);
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-medium);
}

.prop-breadcrumb-item a:hover {
    color: var(--prop-primary); 
}

.prop-breadcrumb-item.active {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
}

.prop-breadcrumb-item + .prop-breadcrumb-item::before {
    content: '>';
    color: var(--prop-gray-950 );
    padding: 0 var(--prop-spacing-2);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
}

/* ============================================
    IMAGE CAROUSEL 
   ============================================ */

.prop-carousel-section {
    padding: var(--prop-spacing-4) 0;
    background-color: var(--prop-white);
}

.prop-carousel-wrapper {
    position: relative;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
}

.prop-carousel-main {
    position: relative;
    height: 480px;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
}

.prop-carousel-main .carousel-item {
    height: 480px;
}

.prop-carousel-main .prop-image-wrapper {
    height: 480px;
}

/* Carousel Controls */
.prop-carousel-control {
    width: 46px;
    height: 46px;
    background-color: var(--prop-white);
    border-radius: 50%;
    opacity: 0.9;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--prop-shadow-md);
    transition: all var(--prop-transition-normal);
    border: none;
}

.prop-carousel-control:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: var(--prop-shadow-lg);
}

.prop-carousel-control.prev {
    left: var(--prop-spacing-8);
}

.prop-carousel-control.next {
    right: var(--prop-spacing-8);
}

.prop-carousel-control-icon {
    font-size: 1.2rem;
    color: var(--prop-gray-700);
    line-height: 1;
}


/* Custom Carousel Indicators - Bottom Right */
.prop-carousel-indicators {
    position: absolute;
    bottom: var(--prop-spacing-4);
    right: var(--prop-spacing-4);
    left: auto;
    margin: 0;
    display: flex;
    gap: var(--prop-spacing-2);
    z-index: 10;
}

.prop-carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--prop-radius-full);
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.prop-carousel-indicator.active {
    width: 32px;
    border-radius: var(--prop-radius-full);
    background-color: var(--prop-primary);
}

.prop-carousel-indicator:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Floating Badges on Image */
.prop-carousel-badges {
    position: absolute;
    top: var(--prop-spacing-4);
    left: var(--prop-spacing-4);
    right: var(--prop-spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
    pointer-events: none;
}

.prop-carousel-badges-left {
    display: flex;
    gap: var(--prop-spacing-2);
    flex-wrap: wrap;
    pointer-events: auto;
}

.prop-carousel-badges-right {
    display: flex;
    gap: var(--prop-spacing-2);
    pointer-events: auto;
}

/* Badge Styles */
.prop-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    padding: var(--prop-spacing-1) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    transition: all var(--prop-transition-fast);
    cursor: default;
    border: 1px solid transparent;
}

.prop-badge-verified {
    background-color: var(--prop-badge-verified-bg);
    color: var(--prop-badge-verified-text);
    border-color: var(--prop-gray-200);
}

.prop-badge-verified:hover {
    border-color: var(--prop-success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.prop-badge-ready {
    background-color: var(--prop-badge-ready-bg);
    color: var(--prop-badge-ready-text);
    border-color: var(--prop-primary);
}

.prop-badge-ready:hover {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.prop-badge-video {
    background-color: var(--prop-badge-video-bg);
    color: var(--prop-badge-video-text);
    border-color: var(--prop-gray-200);
}

.prop-badge-video:hover {
    border-color: var(--prop-gray-400);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.prop-badge-photo {
    background-color: var(--prop-badge-photo-bg);
    color: var(--prop-badge-photo-text);
    border-color: var(--prop-gray-200);
}

.prop-badge-photo:hover {
    border-color: var(--prop-gray-400);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.prop-badge-share {
    background-color: var(--prop-white);
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-gray-250);
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.prop-badge-share .prop-badge-icon{
    height: 16px;
    width: 14px;
}

.prop-badge-share:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Badge Icons - Bootstrap Icons */
.prop-badge-icon {
    /* font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0; */
    height: 24px;
    width: 22px;

}

/* ============================================
   THUMBNAIL GALLERY
   ============================================ */

.prop-thumbnail-section {
    padding: var(--prop-spacing-4) 0;
    background-color: var(--prop-white);
}

.prop-thumbnail-gallery {
    display: flex;
    gap: var(--prop-spacing-10);
    overflow-x: auto;
    padding-bottom: var(--prop-spacing-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.prop-thumbnail-gallery::-webkit-scrollbar {
    display: none;
}

.prop-thumbnail-item {
    flex: 0 0 auto;
    width: 244px;
    height: 92px;
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    border: 2px solid transparent;
    position: relative;
}

.prop-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--prop-transition-normal);
}

/* Active thumbnail - clear and highlighted */
.prop-thumbnail-item.active {
    border-color: var(--prop-primary);
    /* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); */
}

.prop-thumbnail-item.active img {
    filter: none;
    opacity: 1;
}

/* Inactive thumbnails - blurred */
.prop-thumbnail-item:not(.active) img {
    filter: blur(2px);
    opacity: 0.6;
}

.prop-thumbnail-item:not(.active):hover {
    border-color: var(--prop-gray-300);
}

.prop-thumbnail-item:not(.active):hover img {
    filter: blur(1px);
    opacity: 0.8;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Small devices (320px - 575px) */
@media (max-width: 575.98px) {

    
    .prop-carousel-main,
    .prop-carousel-main .carousel-item,
    .prop-carousel-main .prop-image-wrapper {
        height: 280px;
    }
    
    .prop-carousel-control {
        width: 36px;
        height: 36px;
    }
    
    .prop-carousel-control-prev {
        left: var(--prop-spacing-2);
    }
    
    .prop-carousel-control-next {
        right: var(--prop-spacing-2);
    }
    
    .prop-badge {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .prop-badge-icon {
        font-size: 0.75rem;
    }
    
    .prop-thumbnail-item {
        width: 120px;
        height: 80px;
    }
    
    .prop-breadcrumb {
        font-size: var(--prop-font-size-xs);
    }
}

/* Medium devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .prop-carousel-main,
    .prop-carousel-main .carousel-item,
    .prop-carousel-main .prop-image-wrapper {
        height: 350px;
    }
    
    .prop-thumbnail-item {
        width: 140px;
        height: 90px;
    }
}

/* Large devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .prop-carousel-main,
    .prop-carousel-main .carousel-item,
    .prop-carousel-main .prop-image-wrapper {
        height: 400px;
    }
}



/* XXXL devices (1400px - 1919px) */
@media (min-width: 1400px) and (max-width: 1919.98px) {
    .prop-carousel-main,
    .prop-carousel-main .carousel-item,
    .prop-carousel-main .prop-image-wrapper {
        height: 537px;
    }
}

/* Ultra wide (1920px and above) */
@media (min-width: 1920px) {
    .prop-carousel-main,
    .prop-carousel-main .carousel-item,
    .prop-carousel-main .prop-image-wrapper {
        height: 600px;
    }
    
    .container {
        max-width: 1400px;
    }
}

/* Property page:Hero SECTION1 END */

/* Propety page:MainContent section2 start */

/* Left side part:scrollable start */
/* ============================================
   SUMMARY CARD
   ============================================ */
.prop-summary-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    /* height: 100%; */
    margin-bottom: var(--prop-spacing-4);
}

.prop-summary-title {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-1);
}

.prop-summary-project {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
}

.prop-summary-location {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    margin-bottom: var(--prop-spacing-4);
}

.prop-summary-location-icon {
    font-size: var(--prop-font-size-2xl);
    color: var(--prop-primary);
    line-height: 1;
}

.prop-summary-location-text {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

/* Price & EMI Row */
.prop-summary-price-row {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-direction: column;
    gap: var(--prop-spacing-4);
    margin-bottom: var(--prop-spacing-4);
    flex-wrap: wrap;
}

.prop-summary-price-block {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-1);
}

.prop-summary-price {
    font-size: 2rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
    line-height: 1;
}

.prop-summary-price-per-sqft {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-bold);
    text-align: end;
    
}

.prop-summary-emi-btn {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-5);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    white-space: nowrap;
}

.prop-summary-emi-btn:hover {
    background-color: var(--prop-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--prop-shadow-md);
}

.prop-summary-emi-amount {
    font-weight: var(--prop-font-weight-semibold);
}

/* Divider */
.prop-summary-divider {
    border: none;
    border-top: 2px solid var(--prop-gray-350);
    margin:0 0 var(--prop-spacing-4) ;
}

/* Features Row */
.prop-summary-features {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-6);
    flex-wrap: wrap;
}

.prop-summary-feature-item {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
}

.prop-summary-feature-icon {
   width: 28px;
   height: 23px;
}

.prop-summary-feature-text {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
}


/* ============================================
    NAVIGATION TABS
   ============================================ */
.prop-tabs-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-2);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-4);
}

/* Scroll Buttons */
.prop-tabs-scroll {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--prop-gray-100);
    border: none;
    border-radius: var(--prop-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--prop-gray-600);
    font-size: var(--prop-font-size-sm);
    transition: all var(--prop-transition-fast);
    z-index: 2;
}

.prop-tabs-scroll:hover {
    background-color: var(--prop-gray-200);
    color: var(--prop-gray-900);
}

.prop-tabs-scroll-left {
    margin-right: var(--prop-spacing-2);
}

.prop-tabs-scroll-right {
    margin-left: var(--prop-spacing-2);
}

/* Nav Tabs */
.prop-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: none;
    gap: var(--prop-spacing-1);
    flex: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.prop-tabs-nav::-webkit-scrollbar {
    display: none;
}

.prop-tabs-item {
    flex-shrink: 0;
}

.prop-tabs-link {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    border: none;
    border-radius: var(--prop-radius-md);
    background: none;
    white-space: nowrap;
    transition: all var(--prop-transition-fast);
    position: relative;
}

.prop-tabs-link:hover {
    color: var(--prop-gray-900);
    background-color: var(--prop-gray-100);
    border: none;
    isolation: isolate;
}

.prop-tabs-link:focus {
    border: none;
    box-shadow: none;
}

.prop-tabs-link.active {
    color: var(--prop-gray-900);
    font-weight: var(--prop-font-weight-semibold);
    background-color: var(--prop-gray-100);
    border: none;
}

.prop-tabs-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--prop-spacing-4);
    right: var(--prop-spacing-4);
    height: 2px;
    background-color: var(--prop-gray-800);
    border-radius: var(--prop-radius-full);
}

 
/*  TAB PANE TRANSITIONS */
.tab-pane {
    transition: opacity 0.2s ease-in-out;
}

.tab-pane.fade {
    transition: opacity 0.15s linear;
}

/* ============================================
   CONTENT AREA
   ============================================ */

.prop-content-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-12);
    background-color: var(--prop-gray-50);
}

/* Content Cards */
.prop-content-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-6);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-4);
}

.prop-content-card:last-child {
    margin-bottom: 0;
}

.prop-content-heading {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-2);
    line-height: var(--prop-line-height-tight);
}

.prop-content-text {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height:1.4;
    margin-bottom: var(--prop-spacing-3);
}

.prop-content-subtext {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}
.prop-content-divider{
    border: none;
    border-top: 1px solid var(--prop-gray-300);
    margin: 0 0 var(--prop-spacing-4);
}

.prop-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
}

.prop-read-more:hover {
    color: var(--prop-primary-hover);
}

.prop-read-more i {
    font-size: var(--prop-font-size-xs);
}

/* ============================================
   PROPERTY INFO GRID
   ============================================ */

.prop-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-1);
    padding: var(--prop-spacing-3) 0;
    border-bottom: 1px solid var(--prop-gray-300);
    width: 80%;
}

.prop-info-label {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    letter-spacing: 0.05em;
}

.prop-info-value {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-800);
}

/* ============================================
   AMENITY BOXES
   ============================================ */

.prop-amenity-box {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-4);
    padding:var(--prop-spacing-1) var(--prop-spacing-4);
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    background-color: var(--prop-gray-50);
    transition: all var(--prop-transition-normal);
    height: 100%;
}

.prop-amenity-box:hover {
    border-color: var(--prop-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.prop-amenity-content {
    display: flex;
    flex-direction: column;
}

.prop-amenity-icon {
  width: 37px;
  height: 30px;
}

.prop-amenity-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-tight);
}

.prop-amenity-value {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
}

/* ============================================
    Furnishing Badge
   ============================================ */
  .prop-furnishing-box {
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: var(--prop-spacing-2);
    padding: var(--prop-spacing-3);
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    background-color: var(--prop-white);
    transition: all var(--prop-transition-normal);
    height: 100%;
}

.prop-furnishing-box:hover {
    border-color: var(--prop-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.prop-furnishing-icon {
    height: 64px;
    width: 64px;
}

.prop-furnishing-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-tight);
} 
.prop-furnish-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--prop-spacing-1) var(--prop-spacing-3);
    background-color: var(--prop-primary);
    color: var(--prop-white);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    border-radius: var(--prop-radius-full);
}
/* ============================================
   LOCALITY & COMMUTE SECTION
   ============================================ */

.prop-locality-travel-section {
    padding: 0 0 var(--prop-spacing-8);
    background-color: var(--prop-gray-50);
}

.prop-locality-card {
    padding: var(--prop-spacing-6);
}

/* Map Banner */
.prop-locality-map-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    margin-bottom: var(--prop-spacing-5);
    background-color: var(--prop-gray-100);
}

.prop-locality-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prop-locality-map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.prop-map-marker {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--prop-shadow-md);
    border: 2px solid var(--prop-white);
}

.prop-map-marker i {
    transform: rotate(45deg);
    color: var(--prop-white);
    font-size: var(--prop-font-size-sm);
}

.prop-map-marker-green {
    background-color: var(--prop-success);
}

.prop-map-marker-blue {
    background-color: var(--prop-primary);
}

.prop-map-view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--prop-white);
    color: var(--prop-gray-800);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    box-shadow: var(--prop-shadow-md);
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    cursor: pointer;
    transition: all var(--prop-transition-fast);
}

.prop-map-view-btn:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

.prop-map-location-badge {
    position: absolute;
    bottom: var(--prop-spacing-3);
    left: var(--prop-spacing-3);
    background-color: var(--prop-gray-200);
    color: var(--prop-gray-550);
    padding: var(--prop-spacing-1) var(--prop-spacing-3);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    box-shadow: var(--prop-shadow-sm);
    border: 1px solid var(--prop-primary-dark);
}

.prop-map-location-badge i {
    color: var(--prop-danger);
}

/* Pills */
.prop-locality-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--prop-spacing-2);
    padding-bottom: var(--prop-spacing-2);
    margin-bottom: var(--prop-spacing-5);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prop-locality-pills::-webkit-scrollbar {
    display: none;
}

.prop-locality-pill {
    flex-shrink: 0;
    background-color: var(--prop-gray-100);
    color: var(--prop-gray-700);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--prop-transition-fast);
}

.prop-locality-pill:hover {
    background-color: var(--prop-gray-200);
    color: var(--prop-gray-900);
}

.prop-locality-pill.active {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

/* Schools Heading */
.prop-locality-subheading {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-3);
}

/* List Group */
.prop-locality-list {
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
}

.prop-locality-list-item {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-color: var(--prop-gray-100);
    transition: background-color var(--prop-transition-fast);
    background:var(--prop-gray-100);
    margin-bottom: 1rem;
}

.prop-locality-list-item:hover {
    background-color: #f8f9fa;
}

.prop-locality-item-icon {
    width: 36px;
    height: 36px;
    /* border-radius: var(--prop-radius-md);
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; */
}

.prop-locality-item-name {
    flex: 1;
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

.prop-locality-item-distance {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
}
/* Construction Progress & Specifications Specific Styles */

.pdetail-update-text {
    font-size: var(--prop-font-size-xs);
    color: var(--prop-gray-400);
    font-weight: 500;
}

/* Progress Section Styles */
.pdetail-progress-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--prop-gray-800);
}

.pdetail-progress-percent {
    font-size: 14px;
    font-weight: 500;
    color: var(--prop-gray-400);
}

.pdetail-progress-track {
    height: 8px !important;
    background-color: #EBF1FF !important; /* Very light blue background */
    border-radius: 50px !important;
    overflow: visible;
}

.pdetail-progress-fill {
    background-color: var(--prop-primary) !important;
    border-radius: 50px !important;
    transition: width 1s ease-in-out;
}

/* Specifications Section Styles */
.pdetail-specs-table {
    display: flex;
    flex-direction: column;
}

.pdetail-specs-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--prop-gray-150);
    align-items: center;
}

.pdetail-specs-row:last-child {
    border-bottom: none;
}

.pdetail-specs-col {
    flex: 1;
}

.pdetail-specs-name {
    font-weight: 600;
    color: var(--prop-gray-800);
    font-size: 15px;
}

.pdetail-specs-value {
    color: var(--prop-gray-550);
    font-size: 15px;
    font-weight: 500;
}

/* Responsive Handling */
@media (max-width: 575.98px) {
    .pdetail-specs-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .pdetail-specs-name {
        font-size: 14px;
    }
    
    .pdetail-specs-value {
        font-size: 14px;
    }

    .pdetail-update-text {
        display: none; /* Hide date on very small mobile for cleaner look */
    }
}

/* ============================================
   TRAVEL TIME SECTION
   ============================================ */

.prop-travel-card {
    padding: var(--prop-spacing-6);
}

.prop-travel-heading {
    margin-bottom: var(--prop-spacing-6);
}

.prop-travel-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-4);
    flex-wrap: wrap;
}

.prop-travel-input-wrap {
    position: relative;
    flex: 1 1 260px;
    max-width: 320px;
}

.prop-travel-input-icon {
    position: absolute;
    top: 50%;
    left: var(--prop-spacing-4);
    transform: translateY(-50%);
    color: var(--prop-gray-400);
}

.prop-travel-input {
    padding-left: var(--prop-spacing-10);
    border-radius: var(--prop-radius-md);
    border: 1px solid var(--prop-gray-350);
    box-shadow: var(--prop-shadow-sm);
    font-size: var(--prop-font-size-sm);
}

.prop-travel-input:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

.prop-travel-connector {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-1);
}

.prop-travel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--prop-gray-300);
    flex-shrink: 0;
}

.prop-travel-dash {
    width: 40px;
    border-top: 2px dashed var(--prop-gray-300);
}

.prop-travel-car-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid var(--prop-gray-300);
    background-color: var(--prop-white);
    color: var(--prop-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-base);
    flex-shrink: 0;
    box-shadow: var(--prop-shadow-md);
}

.prop-travel-destination {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-md);
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    border: 1px solid var(--prop-gray-350);
}

.prop-travel-destination-img {
    width: 72px;
    height: 45px;
    border-radius: var(--prop-radius-sm);
    object-fit: cover;
}

.prop-travel-destination-text {
    display: flex;
    flex-direction: column;
}

.prop-travel-destination-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
}

.prop-travel-destination-sub {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

.prop-travel-btn-wrap {
    margin-top: var(--prop-spacing-6);
}

.prop-travel-btn {
    background-color: var(--prop-white);
    color: var(--prop-primary);
    border: 1.5px solid var(--prop-primary);
    padding: var(--prop-spacing-3) var(--prop-spacing-12);
    border-radius: 9px;
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    transition: all var(--prop-transition-normal);
}

.prop-travel-btn:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

/* ============================================
   SIMILAR PROPERTIES SECTION
   ============================================ */

.prop-similar-section {
    margin: var(--prop-spacing-8) 0;
}

.prop-similar-heading {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-8);
}

.prop-similar-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
}

.prop-similar-carousel {
    flex: 1;
    overflow: hidden;
}

.prop-similar-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--prop-gray-700);
    box-shadow: var(--prop-shadow-sm);
    transition: all var(--prop-transition-fast);
}

.prop-similar-nav:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border-color: var(--prop-primary);
}

/* Property Card */
.prop-similar-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    box-shadow: var(--prop-shadow-sm);
    border: 1px solid var(--prop-gray-900);
    padding: var(--prop-spacing-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--prop-transition-normal), box-shadow var(--prop-transition-normal);
}

.prop-similar-card:hover {

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.prop-similar-card-img-wrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
}

.prop-similar-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--prop-transition-slow);
    border-radius: 10px;
}

.prop-similar-card:hover .prop-similar-card-img {
    transform: scale(1.08);
}

.prop-similar-wishlist-btn {
    position: absolute;
    top: var(--prop-spacing-3);
    right: var(--prop-spacing-3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--prop-font-size-xs);
    box-shadow: var(--prop-shadow-md);
    transition: all var(--prop-transition-fast);
}

.prop-similar-wishlist-btn:hover {
    background-color: var(--prop-primary-hover);
}

.prop-similar-tag-badge {
    background-color: var(--prop-gray-800);
    color: var(--prop-white);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    padding: var(--prop-spacing-1) var(--prop-spacing-3);
    border-radius: var(--prop-radius-full);
    margin-bottom: var(--prop-spacing-8);
    border: 1px solid var(--prop-gray-900);

    display: inline-block;
}

.prop-similar-card-body {
    padding-top: var(--prop-spacing-4);
    flex: 1;
}

.prop-similar-card-title {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-2);
}

.prop-similar-card-desc {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-400);
    line-height: var(--prop-line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.prop-similar-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--prop-spacing-4) 0;
    gap: var(--prop-spacing-3);
    flex-wrap: wrap;
}

.prop-similar-price-block {
    display: flex;
    flex-direction: column;
}

.prop-similar-price-label {
    font-size: 14;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-400);
}

.prop-similar-price-value {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
}

.prop-similar-view-btn {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: 14px 20px;
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    transition: all var(--prop-transition-normal);
}

.prop-similar-view-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
    transform: translateY(-1px);
    box-shadow: var(--prop-shadow-md);
}

/* Dots */
/* .prop-similar-dots {
    display: flex;
    justify-content: center;
    gap: var(--prop-spacing-2);
    margin-top: var(--prop-spacing-4);
}

.prop-similar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--prop-gray-300);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.prop-similar-dot.active {
    width: 24px;
    border-radius: var(--prop-radius-full);
    background-color: var(--prop-primary);
} */

/* ============================================
   RESPONSIVE: LOCALITY / TRAVEL / SIMILAR
   ============================================ */

@media (max-width: 991.98px) {
    .prop-travel-row {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .prop-locality-card,
    .prop-travel-card {
        padding: var(--prop-spacing-4);
    }

    .prop-locality-map-wrap {
        height: 200px;
    }

    /* .prop-travel-row {
        flex-direction: column;
    } */

    .prop-travel-connector {
        /* transform: rotate(90deg); */
        margin: var(--prop-spacing-2) 0;
    }

    .prop-travel-input-wrap,
    .prop-travel-destination {
        width: 100%;
        max-width: 100%;
    }

    .prop-travel-btn {
        width: 100%;
        justify-content: center;
    }

    .prop-similar-card-img-wrap {
        height: 180px;
    }

    .prop-similar-nav {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
 RATING & REVIEWS
 ============================================ */

/* ---------- Main Card ---------- */
.prop-rating-card {
    padding: var(--prop-spacing-6);
}

/* ---------- Rating Summary Row ---------- */
.prop-rating-summary-row {
    margin-bottom: var(--prop-spacing-6);
}

/* Left: Overall Rating */
.prop-rating-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--prop-spacing-2);
}

.prop-rating-score {
    font-size: var(--prop-font-size-4xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
}

.prop-rating-stars {
    display: flex;
    gap: 3px;
}

.prop-rating-star {
    font-size: 1.25rem;
    color: #FBBF24;
    line-height: 1;
}

.prop-rating-count {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
}

/* Right: Rating Distribution Bars */
.prop-rating-bars {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.prop-rating-bar-row {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
}

.prop-rating-bar-label {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    min-width: 12px;
    text-align: right;
    line-height: 1;
}

.prop-rating-bar-star {
    font-size: 0.625rem;
    color: #FBBF24;
    line-height: 1;
    flex-shrink: 0;
}

.prop-rating-progress {
    flex: 1;
    height: 8px;
    background-color: var(--prop-gray-100);
    border-radius: var(--prop-radius-full);
    overflow: hidden;
}

.prop-rating-progress-bar {
    background-color: #FBBF24;
    border-radius: var(--prop-radius-full);
    transition: width 1s ease-out;
}

.prop-rating-bar-count {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-600);
    min-width: 20px;
    text-align: right;
    line-height: 1;
}

/* ---------- What's Good ---------- */
.prop-rating-whats-good {
    margin-bottom: var(--prop-spacing-6);
}

.prop-rating-subheading {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-3);
    line-height: var(--prop-line-height-tight);
}

.prop-rating-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--prop-spacing-2);
}

.prop-rating-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--prop-spacing-1) var(--prop-spacing-2);
    background-color: var(--prop-gray-200);
    color: var(--prop-primary);
    border: 1px solid var(--prop-primary);
    border-radius: var(--prop-radius-full);
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    transition: all var(--prop-transition-fast);
    cursor: default;
    justify-content: center;
    width: 285px;
}

.prop-rating-tag:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

/* ---------- Top Reviews ---------- */
.prop-rating-reviews {
    /* no extra styles needed, uses row/g-4 from Bootstrap */
}

/* Review Card */
.prop-review-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    border: 1px solid var(--prop-gray-350);
    overflow: hidden;
    transition: box-shadow var(--prop-transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--prop-spacing-3);
}

.prop-review-card:hover {
    box-shadow: var(--prop-shadow-md);
}

/* Review Image */
.prop-review-img-wrap {
    width: 100%;
    height: 92px;
    overflow: hidden;
    position: relative;
}

.prop-review-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--prop-transition-slow);
}

.prop-review-card:hover .prop-review-img {
    transform: scale(1.05);
}

/* Review Body */
.prop-review-body {
    padding: var(--prop-spacing-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-1);
    flex: 1;
}

.prop-review-name {
    font-size: 15px;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin: 0;
    line-height: var(--prop-line-height-tight);
}

.prop-review-location {
    font-size: 0.813rem;
    color: var(--prop-gray-550);
    font-weight: 400;
    line-height: 1;
}

.prop-review-profession {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: 1;
    margin-bottom: var(--prop-spacing-1);
}

.prop-review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--prop-spacing-2);
}

.prop-review-star {
    font-size: var(--prop-font-size-xs);
    color: #FBBF24;
    line-height: 1;
}

.prop-review-text {
    font-size: 0.813rem;
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prop-review-read-more {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
    white-space: nowrap;
}

.prop-review-read-more:hover {
    color: var(--prop-primary-hover);
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE: RATING & REVIEWS
   ============================================ */

@media (max-width: 991.98px) {
    .prop-rating-card {
        padding: var(--prop-spacing-4);
    }

    .prop-rating-score {
        font-size: var(--prop-font-size-3xl);
    }

    .prop-rating-star {
        font-size: 1.125rem;
    }

    .prop-review-img-wrap {
        /* height: 140px; */
    }
}

@media (max-width: 767.98px) {
    .prop-rating-card {
        padding: var(--prop-spacing-4);
        border-radius: var(--prop-radius-lg);
    }

    .prop-rating-summary-row {
        margin-bottom: var(--prop-spacing-4);
    }

    .prop-rating-overall {
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-rating-score {
        font-size: var(--prop-font-size-3xl);
    }

    .prop-rating-bars {
        gap: var(--prop-spacing-2);
    }

    .prop-rating-whats-good {
        margin-bottom: var(--prop-spacing-4);
    }

    .prop-rating-tags {
        gap: var(--prop-spacing-2);
    }

    .prop-rating-tag {
        padding: var(--prop-spacing-1) var(--prop-spacing-3);
        font-size: var(--prop-font-size-xs);
    }

    .prop-review-img-wrap {
        /* height: 180px; */
    }

    .prop-review-body {
        padding: var(--prop-spacing-3);
    }

    .prop-review-text {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 575.98px) {
    .prop-rating-card {
        padding: var(--prop-spacing-4);
    }

    .prop-rating-score {
        font-size: var(--prop-font-size-2xl);
    }

    .prop-rating-star {
        font-size: 1rem;
    }

    .prop-rating-progress {
        height: 6px;
    }

    .prop-review-img-wrap {
        height: 160px;
    }

    .prop-review-name {
        font-size: var(--prop-font-size-sm);
    }

    .prop-review-text {
        font-size: var(--prop-font-size-xs);
    }
}
/* Left side part: scrollable End */

/* ============================================
   Right side part: STICKY SIDEBAR start
   ============================================ */

.prop-sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.prop-sidebar-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-4);
}

.prop-sidebar-card:last-child {
    margin-bottom: 0;
}
/* ============================================
    AGENT CARD
   ============================================ */

.prop-agent-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.prop-agent-label {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin-bottom: var(--prop-spacing-4);
    display: block;
}

.prop-agent-profile {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-4);
    margin-bottom: var(--prop-spacing-5);
}

.prop-agent-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.prop-agent-photo {
    width: 78px;
    height: 116px;
    border-radius: var(--prop-radius-lg);
    object-fit: cover;
}

.prop-agent-online {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: var(--prop-success);
    border: 2px solid var(--prop-white);
    border-radius: 50%;
}

.prop-agent-info {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-1);
}

.prop-agent-name {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    margin: 0;
}

.prop-agent-exp {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: 0;
}

.prop-agent-rating {
    display: flex;
    gap: 2px;
}

.prop-agent-star {
    font-size: var(--prop-font-size-sm);
    color: #FBBF24;
    line-height: 1;
}

.prop-agent-view-btn {
    width: 100%;
    background-color: transparent;
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-gray-250);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-bold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-top: auto;
    
}

.prop-agent-view-btn:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    background-color: rgba(37, 99, 235, 0.04);
}

/* ============================================
    AGENT POPOVER
   ============================================ */

.prop-agent-popover {
    max-width: 320px;
    border: none;
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-xl);
    background-color: var(--prop-white);
    padding: 0;
}

.prop-agent-popover .popover-body {
    padding: 0;
}

.prop-agent-popover .popover-arrow::before {
    border-left-color: var(--prop-white);
}

.prop-popover-inner {
    padding: var(--prop-spacing-5);
}

.prop-popover-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--prop-spacing-4);
    margin-bottom: var(--prop-spacing-4);
}

.prop-popover-photo-wrap {
    flex-shrink: 0;
}

.prop-popover-photo {
    width: 92px;
    height: 80px;
    border-radius: var(--prop-radius-lg);
    object-fit: cover;
    object-position: top;
}

.prop-popover-info {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-1);
}

.prop-popover-name {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin: 0;
    line-height: var(--prop-line-height-tight);
}

.prop-popover-sold {
    font-size: var(--prop-font-size-xs);
    color: var(--prop-gray-500);
}

.prop-popover-desc {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-600);
    line-height: var(--prop-line-height-relaxed);
    margin: 0;
}



/* Price Block */
.prop-sidebar-price-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--prop-spacing-2);
}

.prop-sidebar-price {
    font-size: 2rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
}

.prop-sidebar-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--prop-spacing-1) var(--prop-spacing-3);
    background-color: var(--prop-gray-200);
    color: var(--prop-primary-dark);
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    border-radius: var(--prop-radius-full);
    border: 1px solid var(--prop-primary-dark);
}

.prop-sidebar-per-sqft {
    display: block;
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
}

.prop-sidebar-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
    line-height: var(--prop-line-height-tight);
}

.prop-sidebar-location {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
}

.prop-sidebar-location i {
    color: var(--prop-primary);
    font-size: var(--prop-font-size-base);
}

.prop-sidebar-summary {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-4);
    flex-wrap: wrap;
}

.prop-sidebar-dot {
    color: var(--prop-gray-400);
}

/* Sidebar Buttons */
.prop-sidebar-btn-primary {
    width: 100%;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-3);
    text-align: center;
}

.prop-sidebar-btn-primary:hover {
    background-color: var(--prop-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--prop-shadow-md);
}

.prop-sidebar-btn-whatsapp {
    width: 100%;
    background-color: #25D366;
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
}

.prop-sidebar-btn-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-1px);
    box-shadow: var(--prop-shadow-md);
}

.prop-sidebar-btn-whatsapp i {
    font-size: var(--prop-font-size-base);
}

.prop-sidebar-actions {
    display: flex;
    gap: var(--prop-spacing-3);
}

.prop-sidebar-btn-outline {
    flex: 1;
    background-color: transparent;
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-gray-300);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-1);
}

.prop-sidebar-btn-outline:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    background-color: rgba(37, 99, 235, 0.04);
}

/* ============================================
   CONTACT FORM
   ============================================ */
/* Sidebar Agent Profile (inside contact form card) */
.prop-sidebar-agent {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-4);
    margin-bottom: var(--prop-spacing-4);
    padding-bottom: var(--prop-spacing-4);
    border-bottom: 1px solid var(--prop-gray-100);
}

.prop-sidebar-agent-photo {
    width: 78px;
    height: 85px;
    border-radius: var(--prop-radius-lg);
    object-fit: cover;
    flex-shrink: 0;
    object-position: top;
}

.prop-sidebar-agent-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prop-sidebar-agent-name {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin: 0;
    line-height: var(--prop-line-height-tight);
}

.prop-sidebar-agent-detail {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin: 0;
}
/* contact form */
.prop-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.prop-form-group {
    width: 100%;
}

.prop-form-input {
    width: 100%;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border: 1px solid var(--prop-gray-250);
    border-radius: 12px;
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    background-color: var(--prop-white);
    transition: all var(--prop-transition-normal);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prop-form-input::placeholder {
    color: var(--prop-gray-400);
}

.prop-form-input:focus {
    border-color: var(--prop-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Phone Input */
.prop-phone-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--prop-gray-250);
    border-radius: 12px;
    background-color: var(--prop-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all var(--prop-transition-normal);
    overflow: hidden;
}

.prop-phone-input:focus-within {
    border-color: var(--prop-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.prop-phone-code {
    padding: var(--prop-spacing-3) var(--prop-spacing-3) var(--prop-spacing-3) var(--prop-spacing-4);
    font-size:1.063rem;
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
    border-right: 1px solid var(--prop-gray-200);
    background-color: var(--prop-gray-50);
}

.prop-phone-field {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-left: var(--prop-spacing-3);
}

.prop-phone-field:focus {
    border: none;
    box-shadow: none;
}
/*   Right side part: STICKY SIDEBAR end */



/* ============================================
   RESPONSIVE: mix right side part & left side(before LOCALITY & COMMUTE SECTION)
   ============================================ */

@media (max-width: 991.98px) {
    .prop-sidebar {
        position: static;
        margin-top: var(--prop-spacing-4);
    }

    .prop-sidebar > .prop-agent-card,
    .prop-sidebar > .prop-sidebar-card {
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-summary-card,
    .prop-agent-card,
    .prop-content-card,
    .prop-sidebar-card {
        padding: var(--prop-spacing-4);
    }

    .prop-summary-title {
        font-size: var(--prop-font-size-lg);
    }

    .prop-summary-price {
        font-size: var(--prop-font-size-xl);
    }

    .prop-summary-features {
        gap: var(--prop-spacing-4);
    }

    .prop-content-heading {
        font-size: var(--prop-font-size-base);
    }

    .prop-sidebar-price {
        font-size: var(--prop-font-size-xl);
    }

    .prop-agent-popover {
        max-width: 280px;
    }
}

@media (max-width: 767.98px) {
    .prop-content-section {
        padding: var(--prop-spacing-4) 0 var(--prop-spacing-8);
    }

    .prop-summary-card {
        padding: var(--prop-spacing-4);
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-summary-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--prop-spacing-3);
    }

    .prop-summary-features {
        gap: var(--prop-spacing-3);
    }

    .prop-summary-feature-item {
        flex: 0 0 calc(50% - var(--prop-spacing-3));
    }

    .prop-content-card {
        padding: var(--prop-spacing-4);
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-sidebar-card {
        padding: var(--prop-spacing-4);
    }

    .prop-sidebar-actions {
        flex-direction: row;
    }

    .prop-sidebar-btn-primary,
    .prop-sidebar-btn-whatsapp {
        width: 100%;
    }

    .prop-tabs-wrapper {
        padding: var(--prop-spacing-2);
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-tabs-link {
        padding: var(--prop-spacing-2) var(--prop-spacing-3);
        font-size: var(--prop-font-size-xs);
    }

    .prop-tabs-scroll {
        width: 28px;
        height: 28px;
    }

    .prop-amenity-box {
        padding: var(--prop-spacing-3);
    }

    .prop-info-item {
        padding: var(--prop-spacing-2) 0;
    }

    .prop-agent-card {
        padding: var(--prop-spacing-4);
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-agent-photo {
        /* width: 56px;
        height: 56px; */
    }

    .prop-form-input {
        padding: var(--prop-spacing-2) var(--prop-spacing-3);
    }

    .prop-phone-code {
        padding: var(--prop-spacing-2) var(--prop-spacing-3) var(--prop-spacing-2) var(--prop-spacing-3);
    }
}

@media (max-width: 575.98px) {
    .prop-summary-card {
        padding: var(--prop-spacing-4);
        border-radius: var(--prop-radius-lg);
    }

    .prop-summary-title {
        font-size: var(--prop-font-size-base);
    }

    .prop-summary-price {
        font-size: var(--prop-font-size-lg);
    }

    .prop-summary-features {
        gap: var(--prop-spacing-3);
    }

    .prop-summary-feature-item {
        flex: 0 0 100%;
    }

    .prop-content-card {
        padding: var(--prop-spacing-4);
        border-radius: var(--prop-radius-lg);
        margin-bottom: var(--prop-spacing-3);
    }

    .prop-content-heading {
        font-size: var(--prop-font-size-base);
    }

    .prop-content-text {
        font-size: var(--prop-font-size-sm);
    }

    .prop-sidebar-card {
        padding: var(--prop-spacing-4);
        border-radius: var(--prop-radius-lg);
    }

    .prop-sidebar-price {
        font-size: var(--prop-font-size-lg);
    }

    .prop-sidebar-actions {
        flex-direction: row;
    }

    .prop-form-input {
        padding: var(--prop-spacing-2) var(--prop-spacing-3);
    }

    .prop-agent-popover {
        max-width: 260px;
    }

    .prop-popover-inner {
        padding: var(--prop-spacing-4);
    }

    .prop-popover-photo {
        width: 56px;
        height: 56px;
    }
}

@media (min-width: 1920px) {
    .prop-summary-title {
        font-size: var(--prop-font-size-2xl);
    }

    .prop-summary-price {
        font-size: var(--prop-font-size-3xl);
    }

    .prop-sidebar-price {
        font-size: var(--prop-font-size-3xl);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .prop-sidebar {
        position: static;
        display: none;
    }

    .prop-tabs-wrapper {
        display: none;
    }

    .tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    .tab-content > .tab-pane:not(.show) {
        display: block !important;
    }
}



/************************************************************************************/
/* PROPERTY DETAIL PAGE END */
/************************************************************************************/

/* Profile page start */
/* ============================================
   PROFILE DASHBOARD - COMPLETE THEMED STYLES
   Prefix: prop-profile-
   ============================================ */

.prop-profile-dashboard {
    background-color: var(--prop-gray-50);
    padding: var(--prop-spacing-10) 0 var(--prop-spacing-12);
    min-height: calc(100vh - 80px);
}

/* ---------- 1. MAIN INFO CARD (The one you mentioned) ---------- */
.prop-profile-info-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    overflow: hidden; /* Clips children (like rows) to the card's rounded corners */
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-6);
}

.prop-profile-info-card:hover {
    box-shadow: var(--prop-shadow-md);
    transform: translateY(-2px);
}

/* ---------- 2. CARD HEADER ---------- */
.prop-profile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--prop-spacing-6) var(--prop-spacing-8);
    border-bottom: 1px solid var(--prop-gray-150);
    background-color: var(--prop-white);
}

.prop-profile-card-title {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--prop-spacing-2);
}

.prop-profile-missing-badge {
    color: var(--prop-danger);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    background-color: rgba(239, 68, 68, 0.1);
    padding: 2px 10px;
    border-radius: var(--prop-radius-full);
}

/* Edit/Pencil Button */
.prop-profile-edit-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--prop-radius-full);
    border: 1px solid var(--prop-gray-250);
    background-color: var(--prop-white);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--prop-transition-fast);
}

.prop-profile-edit-btn:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-md);
}

/* ---------- 3. INFO DISPLAY ROWS ---------- */
.prop-profile-info-rows {
    padding: var(--prop-spacing-2) 0;
}

.prop-profile-info-row {
    padding: var(--prop-spacing-5) var(--prop-spacing-8);
    border-bottom: 1px solid var(--prop-gray-50);
    transition: background-color var(--prop-transition-fast);
}

.prop-profile-info-row:last-child {
    border-bottom: none;
}

.prop-profile-info-row:hover {
    background-color: var(--prop-gray-50);
}

.prop-profile-info-label {
    color: var(--prop-gray-500);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
}

.prop-profile-info-value {
    color: var(--prop-gray-900);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
}

.prop-profile-add-btn {
    background: none;
    border: none;
    color: var(--prop-danger);
    font-weight: var(--prop-font-weight-bold);
    font-size: var(--prop-font-size-sm);
    cursor: pointer;
    padding: 0;
    transition: var(--prop-transition-fast);
}

.prop-profile-add-btn:hover {
    color: #b91c1c;
    text-decoration: underline;
}

/* ---------- 4. SIDEBAR NAVIGATION ---------- */
.prop-profile-sidebar {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.prop-profile-user-card {
    padding: var(--prop-spacing-8) var(--prop-spacing-6);
    text-align: center;
    border-bottom: 1px solid var(--prop-gray-150);
}
.prop-profile-menu-list{
    list-style: none;
    padding-left: 0px;
}

.prop-profile-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--prop-gray-100);
    border-radius: var(--prop-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--prop-spacing-4);
    color: var(--prop-gray-400);
    font-size: 2.5rem;
    box-shadow: var(--prop-shadow-sm);
}

.prop-profile-user-name {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
}

.prop-profile-user-email {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-550);
}

/* Menu Links */
.prop-profile-menu-link {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    padding: 14px 24px;
    color: var(--prop-gray-600);
    text-decoration: none;
    font-weight: var(--prop-font-weight-medium);
    border-left: 4px solid transparent;
    transition: all var(--prop-transition-fast);
}

.prop-profile-menu-item.active .prop-profile-menu-link,
.prop-profile-menu-link:hover {
    background-color: rgba(37, 99, 235, 0.05);
    color: var(--prop-primary);
    border-left-color: var(--prop-primary);
}

/* Submenu inside Sidebar */
.prop-profile-submenu {
    list-style: none;
    padding: 0;
    background-color: var(--prop-gray-50);
}

.prop-profile-submenu-link {
    display: block;
    padding: 10px 24px 10px 52px;
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-550);
    text-decoration: none;
}

.prop-profile-submenu-item.active .prop-profile-submenu-link , .prop-profile-submenu-link:hover{
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
}

/* ---------- 5. MODAL & FORMS ---------- */
.prop-profile-modal .modal-content {
    border-radius: var(--prop-radius-xl);
    border: none;
    box-shadow: var(--prop-shadow-xl);
}

.prop-profile-modal-header {
    padding: var(--prop-spacing-6) var(--prop-spacing-8);
    border-bottom: 1px solid var(--prop-gray-150);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prop-profile-modal-title {
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    font-size: var(--prop-font-size-xl);
}

.prop-profile-modal-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    color: var(--prop-gray-400);
}

.prop-profile-modal-body {
    padding: var(--prop-spacing-8);
}

.prop-profile-form-label {
    display: block;
    margin-bottom: var(--prop-spacing-2);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-700);
}

.prop-profile-form-control, 
.prop-profile-form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    outline: none;
    transition: border-color var(--prop-transition-fast);
}

.prop-profile-form-control:focus {
    border-color: var(--prop-primary);
}

.prop-profile-modal-footer {
    padding: 0 var(--prop-spacing-8) var(--prop-spacing-8);
}

.prop-profile-save-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    border-radius: var(--prop-radius-md);
    font-weight: var(--prop-font-weight-bold);
}

/* ---------- 6. RESPONSIVE ---------- */

.prop-profile-sidebar-toggle {
    width: 100%;
    padding: var(--prop-spacing-3);
    background: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    margin-bottom: var(--prop-spacing-4);
    font-weight: var(--prop-font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .prop-profile-dashboard { padding-top: var(--prop-spacing-6); }
}

@media (max-width: 767.98px) {
    .prop-profile-card-header, 
    .prop-profile-info-row,
    .prop-profile-modal-body {
        padding-left: var(--prop-spacing-5);
        padding-right: var(--prop-spacing-5);
    }
}
/* Profile page End */
/* profile page whishlist start */
/* ============================================
   MY WISHLIST TAB CONTENT (pwishlist-)
   Lives inside .prop-profile-content - reuses
   the Profile Dashboard color palette/spacing
   ============================================ */

/* Tab panes - only one visible at a time (toggled via JS) */
.prop-profile-tab-pane {
    animation: propProfileFadeIn 0.25s ease;
}

@keyframes propProfileFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Wishlist List ---------- */
.pwishlist-list {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-4);
}

/* ---------- Wishlist Card (horizontal, one per row) ---------- */
.pwishlist-card {
    position: relative;
    display: flex;
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--prop-transition-normal), border-color var(--prop-transition-normal);
    border: 1px solid var(--prop-gray-150);
}

.pwishlist-card:hover {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-md);
}

/* Image Wrapper - controlled container so backend images
   (any size/ratio) never distort or break the card layout */
.pwishlist-img-wrap {
    position: relative;
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pwishlist-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Content Area */
.pwishlist-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--prop-spacing-4) var(--prop-spacing-5);
    min-width: 0; /* allows text truncation/wrapping to work inside flex */
}

/* Top Row: badge (left) + checkbox/delete (right) */
.pwishlist-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-2);
}

.pwishlist-badge {
    display: inline-block;
    background-color: var(--prop-gray-900);
    color: var(--prop-white);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    padding: 4px 12px;
    border-radius: var(--prop-radius-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Actions: checkbox + delete icon, aligned together */
.pwishlist-actions {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    flex-shrink: 0;
}

.pwishlist-checkbox-wrap {
    margin: 0;
    padding: 0;
    min-height: auto;
    display: flex;
    align-items: center;
}

.pwishlist-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    border: 1.5px solid var(--prop-gray-300);
}

.pwishlist-checkbox:checked {
    background-color: var(--prop-primary);
    border-color: var(--prop-primary);
}

.pwishlist-checkbox:focus {
    box-shadow: var(--prop-shadow-focus);
    border-color: var(--prop-primary);
}

.pwishlist-delete-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    color: var(--prop-gray-550);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--prop-transition-fast);
}

.pwishlist-delete-btn:hover {
    background-color: var(--prop-danger);
    border-color: var(--prop-danger);
    color: var(--prop-white);
}

/* Title / Location / Details */
.pwishlist-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-1);
    line-height: var(--prop-line-height-tight);
    word-wrap: break-word;
}

.pwishlist-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}

.pwishlist-location i {
    color: var(--prop-primary);
}

.pwishlist-details {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
}

/* Footer: price (left) + View button (right), pinned to bottom */
.pwishlist-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prop-spacing-3);
    margin-top: auto;
    flex-wrap: wrap;
}

.pwishlist-price-block {
    display: flex;
    flex-direction: column;
}

.pwishlist-price-label {
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

.pwishlist-price-value {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
}

.pwishlist-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-5);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pwishlist-view-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

/* ---------- Empty Wishlist State ---------- */
.pwishlist-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-12) var(--prop-spacing-6);
}

.pwishlist-empty-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--prop-gray-200);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: var(--prop-spacing-5);
}

.pwishlist-empty-title {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
}

.pwishlist-empty-text {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    max-width: 380px;
    margin-bottom: var(--prop-spacing-6);
}

.pwishlist-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pwishlist-empty-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

/* ============================================
   RESPONSIVE: MY WISHLIST
   ============================================ */

/* Tablet: reduce image width and inner spacing, keep horizontal layout */
@media (max-width: 991.98px) {
    .pwishlist-img-wrap {
        width: 200px;
    }

    .pwishlist-content {
        padding: var(--prop-spacing-3) var(--prop-spacing-4);
    }

    .pwishlist-title {
        font-size: var(--prop-font-size-base);
    }
}

/* Mobile: stack vertically; checkbox + delete become a clean
   floating action row over the image (modern professional pattern) */
@media (max-width: 767.98px) {
    .pwishlist-card {
        flex-direction: column;
    }

    .pwishlist-img-wrap {
        width: 100%;
        height: 200px;
    }

    /* Float checkbox + delete over the top-right of the image */
    .pwishlist-actions {
        position: absolute;
        top: var(--prop-spacing-3);
        right: var(--prop-spacing-3);
        z-index: 2;
        gap:0px;
        /* background-color: rgba(255, 255, 255, 0.95); */
        /* padding: 6px 10px; */
        border-radius: var(--prop-radius-full);
        /* box-shadow: var(--prop-shadow-sm); */
    }

    .pwishlist-img-wrap {
        position: relative;
    }

    .pwishlist-top-row {
        margin-bottom: var(--prop-spacing-2);
    }

    .pwishlist-badge {
        max-width: 100%;
    }

    .pwishlist-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--prop-spacing-3);
    }

    .pwishlist-view-btn {
        width: 100%;
        text-align: center;
    }

    .pwishlist-empty-state {
        padding: var(--prop-spacing-8) var(--prop-spacing-4);
    }
}

@media (max-width: 575.98px) {
    .pwishlist-content {
        padding: var(--prop-spacing-3);
    }

    .pwishlist-title {
        font-size: var(--prop-font-size-sm);
    }

    .pwishlist-price-value {
        font-size: var(--prop-font-size-base);
    }

    .pwishlist-empty-icon-wrap {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .pwishlist-empty-title {
        font-size: var(--prop-font-size-lg);
    }
}
/* profile page whishlist end */

/************************************************************************************/
/* PROPERTY DETAIL PAGE (pdetail-) START */
/************************************************************************************/

/* ============================================
   HERO CAROUSEL SECTION
   ============================================ */
.pdetail-hero-section {
    padding: var(--prop-spacing-4) 0;
    background-color: var(--prop-white);
}

.pdetail-carousel-wrapper {
    position: relative;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
}

.pdetail-carousel-main {
    position: relative;
    height: 480px;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
}

.pdetail-carousel-main .carousel-item,
.pdetail-carousel-main .prop-image-wrapper {
    height: 480px;
}

/* ---------- Top-left Badges ---------- */
.pdetail-carousel-badges-top {
    position: absolute;
    top: var(--prop-spacing-4);
    left: var(--prop-spacing-4);
    z-index: 10;
    display: flex;
    gap: var(--prop-spacing-2);
    flex-wrap: wrap;
}

/* ---------- Bottom-left Badges ---------- */
.pdetail-carousel-badges-bottom {
    position: absolute;
    bottom: var(--prop-spacing-4);
    left: var(--prop-spacing-4);
    z-index: 10;
    display: flex;
    gap: var(--prop-spacing-2);
    flex-wrap: wrap;
}

/* ---------- Badge base style ---------- */
.pdetail-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    padding: var(--prop-spacing-1) var(--prop-spacing-4);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    background-color: var(--prop-white);
    color: var(--prop-gray-800);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    transition: all var(--prop-transition-fast);
    cursor: default;
}

.pdetail-badge:hover {
    border-color: var(--prop-primary);
}

.pdetail-badge-icon {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Icon accent colors per badge type */

.pdetail-badge-rera  { background-color: var(--prop-badge-ready-bg); color: white; }
.pdetail-badge-verified .pdetail-badge-icon{height: 24px; width: 22px;}
.pdetail-badge-construction .pdetail-badge-icon { color: var(--prop-warning); }
.pdetail-badge-photo .pdetail-badge-icon{height: 22px; width: 22px;}
.pdetail-badge-video .pdetail-badge-icon{width:19px; height: 24px;}
/* .pdetail-badge-tour .pdetail-badge-icon { color: var(--prop-gray-700); } */

/* ---------- Prev / Next Controls ---------- */
.pdetail-carousel-control {
    width: 46px;
    height: 46px;
    background-color: var(--prop-white);
    border-radius: 50%;
    opacity: 0.9;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--prop-shadow-md);
    transition: all var(--prop-transition-normal);
    border: none;
}

.pdetail-carousel-control:hover {
    opacity: 1;
    border: 1px solid var(--prop-primary);
    transform: translateY(-50%) scale(1.05);
}

.pdetail-carousel-control.prev { left: var(--prop-spacing-4); }
.pdetail-carousel-control.next { right: var(--prop-spacing-4); }

.pdetail-carousel-control-icon {
    font-size: 1rem;
    color: var(--prop-gray-550);
    line-height: 1;
}

/* ---------- Bottom-right Indicators ---------- */
.pdetail-carousel-indicators {
    position: absolute;
    bottom: var(--prop-spacing-4);
    right: var(--prop-spacing-4);
    left: auto;
    margin: 0;
    display: flex;
    gap: var(--prop-spacing-2);
    z-index: 10;
}

.pdetail-carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--prop-radius-full);
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-carousel-indicator.active {
    width: 28px;
    background-color: var(--prop-primary);
}

.pdetail-carousel-indicator:hover {
    background-color: var(--prop-primary);
}

/* ============================================
   RESPONSIVE: HERO CAROUSEL
   ============================================ */

/* Small devices (< 576px) */
@media (max-width: 575.98px) {
    .pdetail-carousel-main,
    .pdetail-carousel-main .carousel-item,
    .pdetail-carousel-main .prop-image-wrapper {
        height: 260px;
    }

    .pdetail-carousel-badges-top,
    .pdetail-carousel-badges-bottom {
        left: var(--prop-spacing-2);
        right: var(--prop-spacing-2);
        gap: var(--prop-spacing-1);
    }

    .pdetail-badge {
        font-size: 10px;
        padding: 4px 10px;
    }

    .pdetail-carousel-control {
        width: 34px;
        height: 34px;
    }

    .pdetail-carousel-control.prev { left: var(--prop-spacing-2); }
    .pdetail-carousel-control.next { right: var(--prop-spacing-2); }

    .pdetail-carousel-indicators {
        bottom: var(--prop-spacing-2);
        right: var(--prop-spacing-2);
    }
}

/* Medium devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .pdetail-carousel-main,
    .pdetail-carousel-main .carousel-item,
    .pdetail-carousel-main .prop-image-wrapper {
        height: 340px;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pdetail-carousel-main,
    .pdetail-carousel-main .carousel-item,
    .pdetail-carousel-main .prop-image-wrapper {
        height: 400px;
    }
}

/* Large desktop (1400px - 1919px) */
@media (min-width: 1400px) and (max-width: 1919.98px) {
    .pdetail-carousel-main,
    .pdetail-carousel-main .carousel-item,
    .pdetail-carousel-main .prop-image-wrapper {
        height: 537px;
    }
}

/* Ultra wide (1920px+) */
@media (min-width: 1920px) {
    .pdetail-carousel-main,
    .pdetail-carousel-main .carousel-item,
    .pdetail-carousel-main .prop-image-wrapper {
        height: 600px;
    }
}

/* ============================================
   CONTENT SECTION WRAPPER
   ============================================ */
.pdetail-content-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-8);
    background-color: var(--prop-gray-50);
}

/* ============================================
   PROPERTY SUMMARY CARD (Left)
   ============================================ */
.pdetail-summary-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-summary-title {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-primary);
    margin-bottom: 2px;
    line-height: var(--prop-line-height-tight);
}

.pdetail-summary-by {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}

.pdetail-summary-location {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

.pdetail-summary-location-icon {
    color: var(--prop-primary);
    font-size: var(--prop-font-size-lg);
}

.pdetail-summary-divider {
    border: none;
    border-top: 1px solid var(--prop-gray-150);
    margin: var(--prop-spacing-4) 0;
}
.pdetail-status-grid{
    border: 1px solid var(--prop-gray-300);
    background-color: var(--prop-white-150);
    border-radius: 13px;
    padding: 8px 12px;
}

/* Status Grid */
.pdetail-status-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdetail-status-label {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pdetail-status-value {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-900);
}

/* RERA + Rating */
.pdetail-rera-text {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-primary);
    border: 1px solid var(--prop-gray-300);
    border-radius: 9px;
    padding: 6px 10px;
    background-color: var(--prop-white-150);
}

.pdetail-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--prop-black);
    padding: var(--prop-spacing-1) var(--prop-spacing-3);
    border-radius: var(--prop-radius-full);
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
}

.pdetail-rating-badge i {
    color: #FBBF24;
    font-size: 1.1rem;
}

.pdetail-rating-count {
    color: var(--prop-gray-20);
    margin-left: 2px;
}

/* ============================================
   SIDEBAR (Right) - Sticky
   ============================================ */
.pdetail-sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.pdetail-sidebar-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-sidebar-card:last-child {
    margin-bottom: 0;
}

/* Price Card */
.pdetail-price-label {
    display: block;
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: 2px;
}

.pdetail-price-value {
    display: block;
    font-size: 2rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
    line-height: 1.2;
}

.pdetail-emi-text {
    display: block;
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-4);
}
.pdetail-btn-requestCallback{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    background-color: transparent;
    color: var(--prop-black);
    border: 1px solid var(--prop-black);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-3);
}

/* Buttons */
.pdetail-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-3);
}

.pdetail-btn-primary:hover {
    background-color: var(--prop-primary-hover);
}

.pdetail-btn-outline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    background-color: transparent;
    color: var(--prop-primary);
    border: 1px solid var(--prop-primary);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    margin-bottom: var(--prop-spacing-3);
}

.pdetail-btn-outline:hover {
    border-color: var(--prop-primary-hover);
    color: var(--prop-primary-hover);
}

.pdetail-btn-whatsapp {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--prop-spacing-2);
    color:var(--prop-success);
    background-color: var(--prop-white);
    border: 1px solid var(--prop-success);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-btn-whatsapp:hover {
    background-color: #1ea952;
}

.pdetail-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-2);
    margin-top: var(--prop-spacing-4);
    padding-top: var(--prop-spacing-4);
    border-top: 1px solid var(--prop-gray-150);
    align-items: center;
}

.pdetail-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    transition: color var(--prop-transition-fast);
}
.pdetail-sidebar-link.blue{
    color: var(--prop-primary);
}

.pdetail-sidebar-link:hover {
    color: var(--prop-primary);
}

/* Manager Card */
.pdetail-manager-label {
    display: block;
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-800);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-manager-profile {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-manager-photo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.pdetail-manager-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdetail-manager-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdetail-manager-name {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin: 0;
}

.pdetail-manager-exp {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: 0;
}

.pdetail-manager-rating i {
    font-size: var(--prop-font-size-xs);
    color: #FBBF24;
}

.pdetail-manager-actions {
    display: flex;
    gap: var(--prop-spacing-3);
}

.pdetail-btn-primary-sm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-btn-primary-sm:hover {
    background-color: var(--prop-primary-hover);
}

.pdetail-btn-outline-sm {
    flex: 1;
    background-color: transparent;
    color: var(--prop-gray-550);
    border: 1px solid var(--prop-gray-300);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-btn-outline-sm:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
}

/* Quick Contact Form */
.pdetail-quickcontact-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.pdetail-form-group {
    width: 100%;
}

.pdetail-form-input {
    width: 100%;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-md);
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    background-color: var(--prop-white);
    outline: none;
    transition: all var(--prop-transition-normal);
}

.pdetail-form-input::placeholder {
    color: var(--prop-gray-400);
}

.pdetail-form-input:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

.pdetail-phone-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    background-color: var(--prop-white);
    overflow: hidden;
    transition: all var(--prop-transition-normal);
}

.pdetail-phone-input:focus-within {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

.pdetail-phone-code {
    padding: var(--prop-spacing-3);
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
    border-right: 1px solid var(--prop-gray-200);
    background-color: var(--prop-gray-50);
}

.pdetail-phone-field {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pdetail-phone-field:focus {
    border: none;
    box-shadow: none;
}

/* ============================================
   RESPONSIVE: SUMMARY + SIDEBAR
   ============================================ */
@media (max-width: 991.98px) {
    .pdetail-sidebar {
        position: static;
        margin-top: var(--prop-spacing-2);
    }

    .pdetail-summary-card,
    .pdetail-sidebar-card {
        padding: var(--prop-spacing-4);
    }

    .pdetail-summary-title {
        font-size: var(--prop-font-size-xl);
    }

    .pdetail-price-value {
        font-size: var(--prop-font-size-xl);
    }
}

@media (max-width: 575.98px) {
    .pdetail-summary-card,
    .pdetail-sidebar-card {
        padding: var(--prop-spacing-4);
        border-radius: var(--prop-radius-lg);
    }

    .pdetail-status-item {
        gap: 2px;
    }

    .pdetail-manager-actions {
        flex-direction: column;
    }
}

/* ============================================
   NAVIGATION TABS (Nav Pills - Overview/Amenities)
   ============================================ */
.pdetail-tabs-wrapper {
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--prop-spacing-2);
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-2);
    box-shadow: var(--prop-shadow-sm);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.pdetail-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pdetail-tabs-item {
    flex-shrink: 0;
}

.nav-link.pdetail-tabs-link {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-700);
    background-color: transparent;
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    border: none;
    white-space: nowrap;
    transition: all var(--prop-transition-fast);
}

.pdetail-tabs-link:hover {
    background-color: var(--prop-gray-100);
    color: var(--prop-gray-900);
}

.pdetail-tabs-link.active {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    font-weight: var(--prop-font-weight-semibold);
}

.pdetail-tabs-link.active:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

/* ============================================
   CONTENT CARD (shared within tab panes)
   ============================================ */
.pdetail-content-card {
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-6);
    box-shadow: var(--prop-shadow-sm);
    margin-bottom: var(--prop-spacing-12);
}

/* .pdetail-content-card:last-child {
    margin-bottom: 0;
} */

.pdetail-content-heading {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-3);
}

.pdetail-description-text {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-4);
}

/* ============================================
   FEATURE HIGHLIGHT CARDS (12 Acres / 70% Open Space / 40+ Amenities)
   ============================================ */
.pdetail-feature-row {
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-feature-card {
    background-color: var(--prop-white-150);
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    transition: border-color var(--prop-transition-fast);
    height: 100%;
}

.pdetail-feature-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-feature-title {
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    margin-bottom: 2px;
}

.pdetail-feature-subtitle {
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin: 0;
}

/* ============================================
   READ MORE LINK
   ============================================ */
.pdetail-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-1);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-decoration: none;
    transition: color var(--prop-transition-fast);
}

.pdetail-read-more:hover {
    color: var(--prop-primary-hover);
}

.pdetail-read-more i {
    font-size: var(--prop-font-size-sm);
}

/* ============================================
   RESPONSIVE: TABS + CARDS
   ============================================ */
@media (max-width: 767.98px) {
    .pdetail-tabs-wrapper {
        margin-bottom: var(--prop-spacing-3);
    }

    .pdetail-tabs-link {
        padding: var(--prop-spacing-2) var(--prop-spacing-4);
        font-size: var(--prop-font-size-sm);
    }

    .pdetail-content-card {
        padding: var(--prop-spacing-4);
    }

    .pdetail-content-heading {
        font-size: var(--prop-font-size-base);
    }
}

@media (max-width: 575.98px) {
    .pdetail-content-card {
        border-radius: var(--prop-radius-lg);
    }

    .pdetail-feature-card {
        padding: var(--prop-spacing-3);
    }
}

/* ============================================
   PROJECT INTRODUCTION SECTION
   (No white card wrapper - sits on page bg)
   ============================================ */
.pdetail-intro-section {
    margin-bottom: var(--prop-spacing-10);
    padding-top: var(--prop-spacing-4);
}

.pdetail-intro-row {
    align-items: stretch;
}

.pdetail-intro-img-wrap {
    position: relative;
    width: 100%;
    height: 355px;
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pdetail-intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pdetail-intro-content {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: flex-end;
    height: 100%;
}

.pdetail-intro-heading {
    font-size: 1.563rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-6);
}

.pdetail-intro-text {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-12);
    text-align: end;
}

.pdetail-intro-btn-wrap {
    display: flex;
    justify-content: flex-end;
}

.pdetail-btn-primary-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-10);
    border-radius: var(--prop-radius-lg);
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-bold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-btn-primary-inline:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   CARD HEADER (reusable: title left, badge right)
   ============================================ */
.pdetail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--prop-spacing-2);
    margin-bottom: var(--prop-spacing-4);
}

.pdetail-config-count-badge {
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-20);
    white-space: nowrap;
}

/* ============================================
   CONFIGURATIONS & PRICING CARDS
   ============================================ */
.pdetail-config-row {
    display: flex;
}

.pdetail-config-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4);
    box-shadow: var(--prop-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-config-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-config-name {
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
    margin-bottom: 2px;
}

.pdetail-config-area {
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin: 0;
}

.pdetail-config-units-badge {
    font-size: 0.75rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-success);
    /* background-color: rgba(16, 185, 129, 0.1); */
    padding: 3px 10px;
    border-radius: var(--prop-radius-full);
    border: 1px solid var(--prop-success);
    white-space: nowrap;
}

.pdetail-config-price {
    display: block;
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    margin: var(--prop-spacing-3) 0 var(--prop-spacing-4);
}

.pdetail-config-actions {
    display: flex;
    gap: var(--prop-spacing-3);
    margin-top: auto;
}

.pdetail-btn-outline-eq,
.pdetail-btn-primary-eq {
    flex: 1;
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-md);
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    text-align: center;
}

.pdetail-btn-outline-eq {
    background-color: transparent;
    color: var(--prop-black);
    border: 1px solid var(--prop-gray-300);
}

.pdetail-btn-outline-eq:hover {
    border-color: var(--prop-primary-hover);
    color: var(--prop-primary-hover);
}

.pdetail-btn-primary-eq {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: 1.5px solid var(--prop-primary);
}

.pdetail-btn-primary-eq:hover {
    background-color: var(--prop-primary-hover);
    border-color: var(--prop-primary-hover);
}

/* ============================================
   MASTER PLAN SECTION
   ============================================ */
.pdetail-masterplan-img-wrap {
    position: relative;
    width: 100%;
    height: 359px;
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    margin-top: var(--prop-spacing-4);
    background-color: var(--prop-gray-100);
}

.pdetail-masterplan-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Top-right overlay icon buttons */
.pdetail-masterplan-icons {
    position: absolute;
    top: var(--prop-spacing-3);
    right: var(--prop-spacing-3);
    display: flex;
    gap: var(--prop-spacing-2);
    z-index: 5;
}

.pdetail-masterplan-icon-btn {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background-color: var(--prop-white);
    border: none;
    color: var(--prop-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-sm);
    box-shadow: var(--prop-shadow-md);
    cursor: pointer;
    transition: all var(--prop-transition-fast);
}

.pdetail-masterplan-icon-btn:hover {
    border: 1px solid var(--prop-primary);
    color: var(--prop-primary);
}

/* Bottom-center overlay "See Photos" button */
.pdetail-masterplan-see-btn {
    position: absolute;
    bottom: var(--prop-spacing-4);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--prop-white);
    color: var(--prop-black);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    box-shadow: var(--prop-shadow-md);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    z-index: 5;
}

.pdetail-masterplan-see-btn:hover {
    border: 1px solid var(--prop-primary);
    color: var(--prop-primary);
}

/* ============================================
   RESPONSIVE: PROJECT INTRO / CONFIG / MASTER PLAN
   ============================================ */
@media (max-width: 991.98px) {
    .pdetail-intro-img-wrap {
        height: 300px;
    }
}
@media (max-width: 767.98px) {
    .pdetail-intro-img-wrap {
        height: 240px;
    }
    .pdetail-intro-content {
        height: auto;
        margin-top: var(--prop-spacing-3);
    }

    .pdetail-config-actions {
        flex-direction: row;
    }
        .pdetail-intro-btn-wrap {
        justify-content: center;
    }

    .pdetail-masterplan-img-wrap {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .pdetail-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pdetail-config-price {
        font-size: var(--prop-font-size-base);
    }

    .pdetail-masterplan-img-wrap {
        height: 180px;
    }
    .pdetail-intro-img-wrap {
        height: 200px;
    }

    .pdetail-masterplan-icon-btn {
        width: 30px;
        height: 30px;
        font-size: var(--prop-font-size-xs);
    }

    .pdetail-masterplan-see-btn {
        padding: var(--prop-spacing-2) var(--prop-spacing-4);
        font-size: var(--prop-font-size-sm);
        bottom: var(--prop-spacing-3);
    }
}

/* ============================================
   FLOOR PLANS SECTION
   ============================================ */
.pdetail-floorplan-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--prop-spacing-2);
    margin-bottom: var(--prop-spacing-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.pdetail-floorplan-pills::-webkit-scrollbar {
    display: none;
}

.pdetail-floorplan-pill {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-550);
    border: 1px solid var(--prop-gray-550);
    padding: var(--prop-spacing-2) var(--prop-spacing-5);
    border-radius: var(--prop-radius-full)!important;
    white-space: nowrap;
    transition: all var(--prop-transition-fast);
}

.pdetail-floorplan-pill:hover {
    background-color: var(--prop-gray-200);
    color: var(--prop-gray-900);
}

.pdetail-floorplan-pill.active {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    font-weight: var(--prop-font-weight-semibold);
}

/* Floor Plan Carousel */
.pdetail-floorplan-carousel {
    position: relative;
    padding: 0 ;
}

.pdetail-floorplan-control {
    width: 22px;
    height: 22px;
    background-color: var(--prop-white);
    border-radius: 50%;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--prop-shadow-sm);
    border: 1px solid var(--prop-gray-200);
    transition: all var(--prop-transition-fast);
}

.pdetail-floorplan-control:hover {
    border-color: var(--prop-primary);
}

.pdetail-floorplan-control.prev { left: -2.7%; }
.pdetail-floorplan-control.next { right: -2.7%; }

.pdetail-floorplan-control-icon {
    font-size: 0.5rem;
    color: var(--prop-gray-700);
}

/* Floor Plan Card */
.pdetail-floorplan-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-3);
    box-shadow: var(--prop-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-floorplan-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-floorplan-img-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: var(--prop-radius-md);
    overflow: hidden;
    margin-bottom: var(--prop-spacing-3);
    background-color: var(--prop-gray-100);
}

.pdetail-floorplan-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pdetail-floorplan-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin-bottom: 4px;
}

.pdetail-floorplan-area {
    font-size: 0.813rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
    flex: 1;
}

.pdetail-floorplan-actions {
    display: flex;
    gap: var(--prop-spacing-3);
}

.pdetail-floorplan-actions .pdetail-btn-outline-eq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ============================================
   AMENITIES SECTION
   ============================================ */
.pdetail-amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--prop-spacing-2);
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4) var(--prop-spacing-2);
    background-color: var(--prop-white);
    height: 100%;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-amenity-item:hover {
    border-color: var(--prop-primary);
}

.pdetail-amenity-icon {
    font-size: 1.5rem;
    color: var(--prop-primary);
}

.pdetail-amenity-name {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

/* ============================================
   PROJECT HIGHLIGHTS SECTION
   ============================================ */
.pdetail-highlight-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    /* gap: var(--prop-spacing-2); */
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4);
    background-color: var(--prop-white);
    height: 100%;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-highlight-card:hover {
    border-color: var(--prop-primary);
}
.pdetail-highlight-icon-cover{
    background-color: #F4F7FF;
    padding: 6px 15px;
    border-radius: 5px;
    margin-bottom: 4px;
}
.pdetail-highlight-icon {
    font-size: 1.5rem;
    color: var(--prop-primary);
}

.pdetail-highlight-title {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
}

.pdetail-highlight-distance {
    font-size: var(--prop-font-size-xs);
    font-weight: 400;
    color: var(--prop-gray-550);
}

/* ============================================
   BANK OFFERS SECTION
   ============================================ */
.pdetail-bank-offer{
    margin-bottom: var(--prop-spacing-8);
}
.pdetail-bankoffer-heading{
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    color: #000000;
}
.pdetail-bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--prop-spacing-2);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4) var(--prop-spacing-3);
    /* background-color: var(--prop-white); */
    height: 100%;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-bank-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-bank-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    max-width: 100%;
}

.pdetail-bank-text {
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE: FLOOR PLANS / AMENITIES / HIGHLIGHTS / BANK
   ============================================ */
@media (max-width: 767.98px) {
    .pdetail-floorplan-carousel {
        padding: 0 var(--prop-spacing-6);
    }

    .pdetail-floorplan-control {
        width: 32px;
        height: 32px;
    }

    .pdetail-amenity-item,
    .pdetail-highlight-card {
        padding: var(--prop-spacing-3);
    }
}

@media (max-width: 575.98px) {
    .pdetail-floorplan-img-wrap {
        height: 140px;
    }

    .pdetail-amenity-icon,
    .pdetail-highlight-icon {
        font-size: 1.25rem;
    }

    .pdetail-bank-logo {
        height: 26px;
    }
}

/* ============================================
   AVAILABLE PROPERTIES IN PROJECT SECTION
   ============================================ */
.pdetail-available-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    box-shadow: var(--prop-shadow-sm);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-fast);
     padding: var(--prop-spacing-4);
}

.pdetail-available-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-available-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pdetail-available-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.pdetail-available-body {
    padding-top: var(--prop-spacing-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pdetail-available-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-900);
    margin-bottom: 4px;
}

.pdetail-available-meta {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
    flex: 1;
}

.pdetail-available-price {
    font-size: 1.313rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-primary);
}

.pdetail-available-view-btn {
    flex: 0 0 auto;
    padding: var(--prop-spacing-2) var(--prop-spacing-10);
    border: 1px solid var(--prop-gray-300);
    font-size: 0.812rem;
    font-weight: 500;
}

/* ============================================
   BUILDER INFORMATION SECTION
   ============================================ */
.pdetail-builder-header {
    display: flex;
    align-items: flex-start;
    gap: var(--prop-spacing-4);
}

.pdetail-builder-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--prop-radius-md);
    background-color: var(--prop-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdetail-builder-icon {
    font-size: 1.75rem;
    color: var(--prop-primary);
}

.pdetail-builder-name {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: 5px;
}

.pdetail-builder-meta {
    font-size: 0.75rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: 0;
}

.pdetail-builder-stats-row {
    margin-top: var(--prop-spacing-1);
}

.pdetail-builder-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4);
    background-color: var(--prop-gray-50);
    height: 100%;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-builder-stat-box:hover {
    border-color: var(--prop-primary);
}

.pdetail-builder-stat-value {
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
}

.pdetail-builder-stat-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
}

.pdetail-btn-outline-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    background-color: transparent;
    color: var(--prop-black);
    border: 1.5px solid var(--prop-gray-300);
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pdetail-btn-outline-inline:hover {
    border-color: var(--prop-primary-hover);
    color: var(--prop-primary-hover);
}

/* ============================================
   CUSTOMER REVIEWS SECTION
   ============================================ */
   .pdetail-review-heading{
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: #000000;
   }
.pdetail-review-summary-row {
    margin-bottom: var(--prop-spacing-6);
}

.pdetail-review-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--prop-spacing-2);
}

.pdetail-review-score {
    font-size: var(--prop-font-size-4xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
}

.pdetail-review-stars i {
    font-size: 1.25rem;
    color: #FBBF24;
}

.pdetail-review-count {
    font-size: var(--prop-font-size-base);
    color: var(--prop-gray-550);
    font-weight: var(--prop-font-weight-medium);
}

.pdetail-review-bars {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.pdetail-review-bar-row {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
}

.pdetail-review-bar-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    min-width: 32px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.pdetail-review-bar-label i {
    font-size: 0.65rem;
    color: #FBBF24;
}

.pdetail-review-progress {
    flex: 1;
    height: 8px;
    background-color: var(--prop-gray-100);
    border-radius: var(--prop-radius-full);
    overflow: hidden;
}

.pdetail-review-progress-bar {
    background-color: #FBBF24;
    border-radius: var(--prop-radius-full);
    transition: width 1s ease-out;
}

.pdetail-review-bar-count {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-600);
    min-width: 20px;
    text-align: right;
}

/* Review Cards */
.pdetail-review-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-4);
    height: 100%;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-review-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-review-card-header {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-3);
}

.pdetail-review-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #EEEEEE;
    color: var(--prop-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-semibold);
    flex-shrink: 0;
}

.pdetail-review-name {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-900);
    margin: 0 0 2px;
}

.pdetail-review-stars-sm i {
    font-size: var(--prop-font-size-xs);
    color: #FBBF24;
}

.pdetail-review-text {
    font-size: 0.938rem;
    font-weight: 400;
    color: var(--prop-black);
    line-height: 1.3;
    margin: 0;
}

/* ============================================
   SIMILAR PROJECTS SECTION
   ============================================ */
   .pdetail-similiarProject-heading{
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: #000000;
   }
.pdetail-project-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-lg);
    box-shadow: var(--prop-shadow-sm);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--prop-spacing-3);
    transition: border-color var(--prop-transition-fast);
}

.pdetail-project-card:hover {
    border-color: var(--prop-primary);
}

.pdetail-project-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: var(--prop-radius-md);
    overflow: hidden;
    margin-bottom: var(--prop-spacing-3);
    background-color: var(--prop-gray-100);
}

.pdetail-project-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pdetail-project-body {
    flex: 1;
}

.pdetail-project-title {
    font-size:1.063rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: 4px;
}

.pdetail-project-location {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdetail-project-location i {
    color: var(--prop-primary);
}

.pdetail-project-config {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}

.pdetail-project-price {
    display: block;
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    margin-bottom: var(--prop-spacing-3);
}
.pdetail-project-card-btn{
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    background-color: transparent;
    color: var(--prop-black);
    border: 1px solid var(--prop-gray-300);
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
    justify-content: center;
}
.pdetail-project-card-btn:hover {
    border-color: var(--prop-primary-hover);
    color: var(--prop-primary-hover);
}

/* ============================================
   RESPONSIVE: AVAILABLE PROPERTIES / BUILDER / REVIEWS / SIMILAR PROJECTS
   ============================================ */
@media (max-width: 767.98px) {
    .pdetail-available-img-wrap {
        height: 160px;
    }

    .pdetail-builder-header {
        gap: var(--prop-spacing-3);
    }

    .pdetail-builder-icon-wrap {
        width: 48px;
        height: 48px;
    }

    .pdetail-review-score {
        font-size: var(--prop-font-size-3xl);
    }

    .pdetail-project-img-wrap {
        height: 160px;
    }
}

@media (max-width: 575.98px) {
    .pdetail-available-body {
        padding: var(--prop-spacing-3);
    }

    .pdetail-builder-stat-box {
        padding: var(--prop-spacing-3);
    }

    .pdetail-builder-stat-value {
        font-size: var(--prop-font-size-lg);
    }

    .pdetail-review-card {
        padding: var(--prop-spacing-3);
    }

    .pdetail-review-avatar {
        width: 36px;
        height: 36px;
        font-size: var(--prop-font-size-base);
    }
}

/* ============================================
   FAQ SECTION (Bootstrap Accordion)
   Full container width, outside two-column layout
   ============================================ */
.pdetail-faq-section {
    padding: 0 0 var(--prop-spacing-8) ;
    background-color: var(--prop-gray-50);
}

.pdetail-faq-heading {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-8);
}

.pdetail-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.pdetail-faq-item {
    border: 1px solid var(--prop-gray-300);
    border-radius: var(--prop-radius-lg) !important;
    overflow: hidden;
    background-color: var(--prop-white) !important;
    transition: border-color var(--prop-transition-fast);
}

.pdetail-faq-item:hover {
    border-color: var(--prop-primary);
}

/* Accordion Button */
.pdetail-faq-button {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    background-color: var(--prop-white);
    padding: var(--prop-spacing-4) var(--prop-spacing-5);
    box-shadow: none;
}

.pdetail-faq-button:not(.collapsed) {
    color: var(--prop-primary);
    background-color: var(--prop-white);
    box-shadow: none;
}

.pdetail-faq-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Custom accordion icon (replace Bootstrap default) */
.pdetail-faq-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%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");
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

.pdetail-faq-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563EB'%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");
    transform: rotate(-180deg);
}

/* Accordion Body */
.pdetail-faq-body {
    font-size:var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height:1.3;
    padding: 0 var(--prop-spacing-5) var(--prop-spacing-4);
}

/* ============================================
   RESPONSIVE: FAQ SECTION
   ============================================ */
@media (max-width: 767.98px) {
    .pdetail-faq-section {
        padding: var(--prop-spacing-6) 0;
    }

    .pdetail-faq-heading {
        font-size: var(--prop-font-size-lg);
    }

    .pdetail-faq-button {
        padding: var(--prop-spacing-3) var(--prop-spacing-4);
        font-size: var(--prop-font-size-sm);
    }

    .pdetail-faq-body {
        padding: 0 var(--prop-spacing-4) var(--prop-spacing-3);
    }
}
/************************************************************************************/
/* PROPERTY DETAIL PAGE (pdetail-) END 
/************************************************************************************/


/************************************************************************************/
/* PROPERTY LISTING PAGE (plisting-) START */
/************************************************************************************/

/* ============================================
   TOP SEARCH SECTION (Desktop/Tablet)
   ============================================ */
.plisting-search-section {
    padding: var(--prop-spacing-4) 0;
    background-color: var(--prop-white);
    /* border-bottom: 1px solid var(--prop-gray-150); */
    margin-bottom: var(--prop-spacing-8);
}

.plisting-search-row {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: var(--prop-spacing-8);
    flex-wrap: wrap;
}

/* Left: Search Input */
@media (min-width:991px) {
    .plisting-search-input-wrap {
    flex: 1 1 320px;
    max-width: 420px;
}
}


.plisting-search-input-group {
    /* border-radius: var(--prop-radius-full); */
    overflow: hidden;
    border: 1px solid var(--prop-white);
    box-shadow: var(--prop-shadow-sm);
}

.plisting-search-icon-wrap {
    background-color: var(--prop-white);
    border: none;
    color: var(--prop-black);
    padding-left: var(--prop-spacing-4);
}

.plisting-search-input {
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-4) var(--prop-spacing-2) var(--prop-spacing-2);
    font-size: 1.063rem;
    color: var(--prop-black);
    box-shadow: none;
}

.plisting-search-input:focus {
    box-shadow: none;
    border-color: transparent;
}

.plisting-search-input::placeholder {
    color: var(--prop-gray-400);
}

/* Right: Search By Buttons */
.plisting-search-by-wrap {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    flex-wrap: wrap;
}

.plisting-search-by-label {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    white-space: nowrap;
}

.plisting-search-by-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    background-color: var(--prop-white-50);
    color: var(--prop-black);
    border: 1px solid var(--prop-gray-250);
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    border-radius: 1px;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    transition: border-color var(--prop-transition-fast);
}

.plisting-search-by-btn:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
}

.plisting-search-by-btn i {
    font-size: var(--prop-font-size-base);
    /* color: var(--prop-primary); */
}

/* ============================================
   MOBILE STICKY TOOLBAR
   ============================================ */
.plisting-mobile-toolbar {
    position: sticky;
    top: 0;
    z-index: 1020;

    padding: var(--prop-spacing-3) 0;

    /* border-bottom: 1px solid var(--prop-gray-150); */
}
@media (max-width:767px) {
    .plisting-mobile-toolbar{
    box-shadow: var(--prop-shadow-sm);
    background-color: var(--prop-white);
    margin-bottom: var(--prop-spacing-4);
    }
}

.plisting-mobile-toolbar-row {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
}

.plisting-mobile-search-group {
    flex: 1 1 auto;
    border-radius: var(--prop-radius-full);
    overflow: hidden;
    border: 1px solid var(--prop-gray-250);
}

.plisting-mobile-search-group .plisting-search-input {
    padding: var(--prop-spacing-2) var(--prop-spacing-3) var(--prop-spacing-2) var(--prop-spacing-1);
}

.plisting-mobile-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background-color: var(--prop-white);
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-gray-250);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    transition: border-color var(--prop-transition-fast);
}

.plisting-mobile-toolbar-btn:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
}

.plisting-mobile-toolbar-btn i {
    font-size: var(--prop-font-size-base);
    color: var(--prop-primary);
}

/* ============================================
   RESPONSIVE: TOP SEARCH SECTION
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .plisting-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .plisting-search-input-wrap {
        max-width: 100%;
    }

    .plisting-search-by-wrap {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .plisting-mobile-toolbar-btn span {
        display: none;
    }
}

/* ============================================
   LEFT FILTER PANEL
   ============================================ */
.plisting-filter-card {
    background-color: var(--prop-white-60);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-4);
    box-shadow: var(--prop-shadow-sm);
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--prop-gray-300) transparent;
}

.plisting-filter-card::-webkit-scrollbar {
    width: 5px;
}

.plisting-filter-card::-webkit-scrollbar-thumb {
    background-color: var(--prop-gray-300);
    border-radius: var(--prop-radius-full);
}

/* Filter Header */
.plisting-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--prop-spacing-3);
}

.plisting-filter-title {
    font-size: 1.375rem;
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    /* letter-spacing: 0.05em; */
    margin: 0;
   
}

.plisting-filter-reset-btn {
    background: none;
    border: none;
    color: var(--prop-primary);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    padding: 0;
    transition: color var(--prop-transition-fast);
}

.plisting-filter-reset-btn:hover {
    color: var(--prop-primary-hover);
    text-decoration: underline;
}

/* Accordion (Budget/Size/Localities) */
.accordion-item{
    background-color: var(--prop-white-60);
}
.plisting-filter-accordion {
    margin-bottom: var(--prop-spacing-3);
    /* border-top: 1px solid var(--prop-gray-300); */
}

.plisting-accordion-item {
    border: none;
    border-bottom: 1px solid var(--prop-gray-150);
}

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

.plisting-accordion-button {
    font-size: 1.188rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    background-color: transparent;
    padding: var(--prop-spacing-3) 0;
    box-shadow: none;
}

.plisting-accordion-button:not(.collapsed) {
    color: var(--prop-gray-900);
    background-color: transparent;
    box-shadow: none;
}

.plisting-accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.plisting-accordion-body {
    padding: 0 0 var(--prop-spacing-3);
}

.plisting-filter-select {
    font-size:var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-black);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    padding: var(--prop-spacing-2) var(--prop-spacing-2);
}

.plisting-filter-select:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

/* Static Filter Groups (Building Type, Property Type, Bedrooms, Furnishing, Amenities, Facing) */
.plisting-filter-group {
    padding: var(--prop-spacing-3) 0;
    border-bottom: 1px solid var(--prop-gray-150);
}

.plisting-filter-group-last {
    border-bottom: none;
    padding-bottom: 0;
}

.plisting-filter-group-title {
    font-size: 1.188rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin-bottom: var(--prop-spacing-3);
}

/* Reusable Checkbox Box Component */
.plisting-check-box {
    position: relative;
    height: 100%;
}

.plisting-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.plisting-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    background-color: var(--prop-white);
    cursor: pointer;
    transition: border-color var(--prop-transition-fast), color var(--prop-transition-fast);
    margin: 0;
}

.plisting-check-icon {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-300);
    flex-shrink: 0;
    transition: color var(--prop-transition-fast);
}

.plisting-check-label:hover {
    border-color: var(--prop-primary);
}

.plisting-check-input:checked + .plisting-check-label {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    background-color: var(--prop-gray-200);
}

.plisting-check-input:checked + .plisting-check-label .plisting-check-icon {
    color: var(--prop-primary);
}

/* Localities Search + Scrollable List */
.plisting-locality-search-wrap {
    position: relative;
    margin-bottom: var(--prop-spacing-3);
}

.plisting-locality-search-icon {
    position: absolute;
    top: 50%;
    left: var(--prop-spacing-3);
    transform: translateY(-50%);
    color: var(--prop-gray-400);
    font-size: var(--prop-font-size-sm);
}

.plisting-locality-search-input {
    padding-left: var(--prop-spacing-8);
    font-size: var(--prop-font-size-sm);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
}

.plisting-locality-search-input:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

.plisting-locality-list {
    height: 250px;
    overflow-y: auto;
    padding-right: var(--prop-spacing-2);
    scrollbar-width: thin;
    scrollbar-color: var(--prop-gray-300) transparent;
}

.plisting-locality-list::-webkit-scrollbar {
    width: 5px;
}

.plisting-locality-list::-webkit-scrollbar-thumb {
    background-color: var(--prop-gray-300);
    border-radius: var(--prop-radius-full);
}

.plisting-locality-item {
    padding: var(--prop-spacing-2) 0;
    margin-bottom: 0;
}

.plisting-locality-item .form-check-input {
    border-color: var(--prop-gray-300);
}

.plisting-locality-item .form-check-input:checked {
    background-color: var(--prop-primary);
    border-color: var(--prop-primary);
}

.plisting-locality-item .form-check-label {
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-700);
    font-weight: var(--prop-font-weight-medium);
    cursor: pointer;
}
.plisting-locality-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
}

.plisting-locality-item .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE: FILTER PANEL (Tablet)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .plisting-filter-card {
        padding: var(--prop-spacing-3);
    }

    .plisting-check-label {
        font-size: 11px;
        padding: var(--prop-spacing-2);
    }
}



/* ============================================
   SORTING TOOLBAR
   ============================================ */
.plisting-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-4);
}
.plisting-results-subcount{
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-500);
    margin-bottom: 2px;
}

.plisting-results-heading {
    font-size: var(--prop-font-size-4xl);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-black);
    margin-bottom: 2px;
}

.plisting-results-subtext {
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-black);
    margin: 0;
}

.plisting-results-updated {
    color: var(--prop-gray-20);
    font-size: 12px;
    font-weight: var(--prop-font-weight-medium);
    margin-bottom: 0px;
}

.plisting-toolbar-right {
    flex-shrink: 0;
}

.plisting-sort-btn {
    background-color: var(--prop-white);
    color: var(--prop-gray-500);
    border: 0.5px solid var(--prop-gray-500);
    padding: var(--prop-spacing-1) var(--prop-spacing-4);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: 400;
}

.plisting-sort-btn:hover,
.plisting-sort-btn:focus,
.plisting-sort-btn.show {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    background-color: var(--prop-white);
}

.plisting-sort-menu {
    border-radius: var(--prop-radius-md);
    box-shadow: var(--prop-shadow-lg);
    border: 1px solid var(--prop-gray-150);
    padding: var(--prop-spacing-2);
    min-width: 200px;
}

.plisting-sort-item {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-700);
    border-radius: var(--prop-radius-md);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
}

.plisting-sort-item:hover,
.plisting-sort-item:active {
    background-color: var(--prop-gray-100);
    color: var(--prop-primary);
}

/* ============================================
   PROPERTY CARDS
   ============================================ */
.plisting-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-4);
}

.plisting-property-card {
    display: flex;
    gap: var(--prop-spacing-4);
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-4);
    box-shadow: var(--prop-shadow-sm);
    transition: border-color var(--prop-transition-fast);
}

.plisting-property-card:hover {
    border-color: var(--prop-primary);
}

/* Left: Image Column */
.plisting-card-img-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* gap: var(--prop-spacing-2); */
}

.plisting-card-img-wrap {
    position: relative;
    width: 263px;
    height: 100%;
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.plisting-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Agent info row below image */
.plisting-card-agent {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    width: 263px;
}

.plisting-card-agent-avatar {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: var(--prop-success);
    color: var(--prop-white);
    font-size: 1.375rem;
    font-weight: var(--prop-font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plisting-card-agent-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex: 1;
}

.plisting-card-agent-name {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin-bottom: var(--prop-spacing-1);
}

.plisting-card-agent-badge {
    font-size: 12px;
    font-weight: 400;
    color: var(--prop-primary);
    letter-spacing: 0.03em;
}

.plisting-card-agent-rating {
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-white-10);
    border-radius: 5px;
    padding: var(--prop-spacing-1);
    display: flex;
    align-items: center;
    gap: 3px;
}

.plisting-card-agent-rating i {
    color: #FBBF24;
}

/* Right: Details Column */
.plisting-card-details-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plisting-card-title {
    font-size: var(--prop-font-size-lg);
    font-weight: 800;
    color: var(--prop-gray-500);
    margin-bottom: var(--prop-spacing-4);
}

.plisting-card-meta {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-1);
    flex-wrap: wrap;
}

.plisting-card-rating {
    font-size: 0.938rem;
    font-weight: 300;
    color: var(--prop-gray-500);
    display: flex;
    align-items: center;
    gap: 3px;
}

.plisting-card-rating i {
    color: #FBBF24;
}

.plisting-card-location {
    font-size: 0.938rem;
    font-weight: 300;
    color: var(--prop-gray-500);
    display: flex;
    align-items: center;
    gap: 3px;
}

.plisting-card-location i {
    color: var(--prop-primary);
}

.plisting-card-price {
    font-size: 1.063rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-primary);
    margin-bottom: var(--prop-spacing-2);
}

.plisting-card-price-period {
    font-size: 1.063rem;
    font-weight: 400;
    color: var(--prop-gray-500);
}

/* Status Grid */
.plisting-status-grid{
    border: 1px solid var(--prop-gray-300);
    background-color: var(--prop-white-150);
    border-radius: 13px;
    padding: 6px 8px;
    justify-content: space-around;
    margin: var(--prop-spacing-1) 0 var(--prop-spacing-2);

}

.plisting-status-item {
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
}

.plisting-status-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plisting-status-value {
    font-size: 0.78rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-900);
}


.plisting-card-config {
    font-size: 0.938rem;
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-500);
    margin-bottom: var(--prop-spacing-4);
}

.plisting-card-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-black);
    /* line-height: var(--prop-line-height-relaxed); */
    margin-bottom: var(--prop-spacing-3);
    flex: 1;
}

.plisting-read-more {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.plisting-read-more:hover {
    text-decoration: underline;
}

.plisting-card-footer {
    display: flex;
    justify-content: flex-end;
}

.plisting-contact-btn {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--prop-transition-normal);
}

.plisting-contact-btn:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   RESPONSIVE: TOOLBAR + PROPERTY CARDS
   ============================================ */
@media (max-width: 991.98px) {
    .plisting-results-heading {
        font-size: var(--prop-font-size-xl);
    }
}

@media (max-width: 767.98px) {
    .plisting-property-card {
        flex-direction: column;
        padding: var(--prop-spacing-3);
    }

    .plisting-card-img-wrap,
    .plisting-card-agent {
        width: 100%;
    }

    .plisting-card-img-wrap {
        height: 220px;
    }

    .plisting-contact-btn {
        width: 100%;
    }

    .plisting-card-footer {
        justify-content: stretch;
    }

    .plisting-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .plisting-toolbar-right {
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .plisting-results-heading {
        font-size: var(--prop-font-size-lg);
    }

    .plisting-card-title {
        font-size: var(--prop-font-size-base);
    }

    .plisting-card-price {
        font-size: var(--prop-font-size-lg);
    }
}


/* ============================================
   PAGINATION
   ============================================ */
.plisting-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--prop-spacing-6);
}

.plisting-pagination {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    flex-wrap: wrap;
}

.plisting-page-item {
    display: flex;
}

.plisting-page-link {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: var(--prop-white);
    color: var(--prop-gray-700);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    transition: all var(--prop-transition-fast);
}

.plisting-page-link:hover {
    border-color: var(--prop-primary);
    color: var(--prop-primary);
    background-color: var(--prop-white);
}

.plisting-page-item.active .plisting-page-link {
    background-color: var(--prop-primary);
    border-color: var(--prop-primary);
    color: var(--prop-white);
    font-weight: var(--prop-font-weight-semibold);
}

.plisting-page-link-prev,
.plisting-page-link-next {
    font-weight: var(--prop-font-weight-medium);
}

/* ============================================
   RESPONSIVE: PAGINATION
   ============================================ */
@media (max-width: 575.98px) {
    .plisting-pagination {
        gap: var(--prop-spacing-1);
    }

    .plisting-page-link {
        padding: var(--prop-spacing-2) var(--prop-spacing-3);
        font-size: var(--prop-font-size-xs);
    }

    .plisting-page-link-prev span,
    .plisting-page-link-next span {
        display: none;
    }
}



/* ============================================
   MOBILE FILTER OFFCANVAS
   ============================================ */
.plisting-filter-offcanvas {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.plisting-offcanvas-header {
    padding: var(--prop-spacing-4);
    border-bottom: 1px solid var(--prop-gray-150);
}

.plisting-offcanvas-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: 0;
}

.plisting-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--prop-spacing-4) var(--prop-spacing-4);

}

.plisting-offcanvas-footer {
    position: sticky;
    bottom: 0;
    padding: var(--prop-spacing-4);
    background-color: var(--prop-white);
    border-top: 1px solid var(--prop-gray-150);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.plisting-apply-btn {
    width: 100%;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--prop-transition-normal);
}

.plisting-apply-btn:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   MOBILE SORT DROPDOWN (triggered from sticky toolbar)
   ============================================ */
.plisting-mobile-sort-menu {
    border-radius: var(--prop-radius-md);
    box-shadow: var(--prop-shadow-lg);
    border: 1px solid var(--prop-gray-150);
    padding: var(--prop-spacing-2);
    min-width: 200px;
}

/************************************************************************************/
/* PROPERTY LISTING PAGE (plisting-) end-  */
/************************************************************************************/


/************************************************************************************/
/* HOME PAGE (phome-) START */
/************************************************************************************/

/* ============================================
   HERO BANNER SECTION
   ============================================ */
.phome-hero-section {
    position: relative;
    height: 553px;
    overflow: hidden;
}

.phome-hero-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.phome-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.phome-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.phome-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 720px;
}

/* Google Reviews Badge */
.phome-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    width: fit-content;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--prop-white);
    padding: var(--prop-spacing-1) var(--prop-spacing-4);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    margin-bottom: var(--prop-spacing-4);
}

.phome-hero-badge-icon {
    font-size: var(--prop-font-size-base);
    color: #FBBF24;
}

/* Heading */
.phome-hero-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-bottom: var(--prop-spacing-4);
}

.phome-hero-heading-light {
    font-size: 3rem;
    font-weight: var(--prop-font-weight-normal);
    color: var(--prop-white);
}

.phome-hero-heading-bold {
    font-size: 3rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
}

/* Description */
.phome-hero-desc {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-normal);
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-6);
    max-width: 560px;
}

/* ============================================
   PROPERTY SEARCH FORM
   ============================================ */
.phome-search-form {
    display: flex;
    align-items: center;
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-full);
    padding: var(--prop-spacing-2);
    /* box-shadow: var(--prop-shadow-lg); */
    max-width: 640px;
    width: 100%;
}

/* Location Dropdown */
/* .phome-search-location {
    flex-shrink: 0;
}

.phome-search-location-btn {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    background: none;
    border: none;
    color: var(--prop-gray-800);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    padding: var(--prop-spacing-2) var(--prop-spacing-3);
    white-space: nowrap;
}

.phome-search-location-btn i {
    color: var(--prop-primary);
}


.phome-search-divider {
    width: 1px;
    height: 24px;
    background-color: var(--prop-gray-250);
    flex-shrink: 0;
} */

/* Search Input */
.phome-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.phome-search-input-icon {
    position: absolute;
    left: var(--prop-spacing-3);
    color: var(--prop-gray-400);
    font-size: var(--prop-font-size-base);
    pointer-events: none;
}

.phome-search-input {
    width: 100%;
    border: none;
    outline: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-2) var(--prop-spacing-2) 2.4rem;
    font-size: var(--prop-font-size-sm);
    color: var(--prop-gray-800);
    background: transparent;
}

.phome-search-input::placeholder {
    color: var(--prop-gray-400);
}

/* Search Button */
.phome-search-btn {
    flex-shrink: 0;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-8);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.phome-search-btn:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   RESPONSIVE: HERO BANNER
   ============================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991.98px) {
    .phome-hero-section {
        height: 480px;
    }

    .phome-hero-heading-light,
    .phome-hero-heading-bold {
        font-size: 2.5rem;
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767.98px) {
    .phome-hero-section {
        height: auto;
        min-height: 480px;
        padding: var(--prop-spacing-8) 0;
    }

    .phome-hero-content {
        height: auto;
        padding: var(--prop-spacing-6) 0;
    }

    .phome-hero-heading-light,
    .phome-hero-heading-bold {
        font-size: 2rem;
    }

    .phome-hero-desc {
        font-size: var(--prop-font-size-base);
    }

    /* .phome-search-form {
        flex-wrap: wrap;
        border-radius: var(--prop-radius-lg);
        padding: var(--prop-spacing-3);
        gap: var(--prop-spacing-2);
    } */
    /* .phome-search-form{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;

    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    } */

    /* .phome-search-location,
    .phome-search-divider {
        display: none;
    } */

    /* .phome-search-input-wrap {
        flex: 1 1 100%;
        order: 1;
    } */
         /* White Search Bar */
    /* .phome-search-input-wrap{
        width: 100%;
        background: var(--prop-white);
        border-radius: 50px;
        box-shadow: var(--prop-shadow-lg);
        min-height: 58px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .phome-search-input-icon{
    left: 20px;
    font-size: 18px;
    }
    .phome-search-input{
    height:58px;
    padding:0 20px 0 52px;
    font-size:15px;
    } */

    /* .phome-search-btn {
        flex: 1 1 100%;
        order: 2;
        border-radius: var(--prop-radius-md);
    } */
         /* Modern Button */
    /* .phome-search-btn{
        width:100%;
        height:54px;

        border-radius:14px;

        background:var(--prop-primary);
        color:#fff;

        box-shadow:none;

        font-size:16px;
        font-weight:600;
    }

    .phome-search-btn:hover{
        background:var(--prop-primary-hover);
    } */
}

/* Small Mobile (< 576px) */
@media (max-width: 599.98px) {
    .phome-hero-section {
        min-height: 420px;
    }

    .phome-hero-heading-light,
    .phome-hero-heading-bold {
        font-size: 1.75rem;
    }

    .phome-hero-badge {
        font-size: var(--prop-font-size-xs);
    }

    .phome-hero-desc {
        font-size: var(--prop-font-size-sm);
        margin-bottom: var(--prop-spacing-4);
    }
    .phome-search-form{
        flex-direction:column;
        align-items:stretch;
        background:transparent;
        box-shadow:none;
        padding:0;
        gap:16px;
    }
    .phome-search-input-wrap{
        width:100%;
        min-height:56px;
        display:flex;
        align-items:center;
        position:relative;
        background:#fff;
        border-radius:50px;
        box-shadow:var(--prop-shadow-lg);
    }

    .phome-search-input{
        height:54px;
        font-size:14px;
    }

    .phome-search-btn{
        width:60%;
        min-width:170px;
        max-width:220px;
        height:52px;
        margin:0 auto;
        border-radius:14px;
        transition:all .25s ease;
    }
}

/* Ultra wide (1920px+) */
@media (min-width: 1920px) {
    .phome-hero-section {
        height: 620px;
    }

    .phome-hero-heading-light,
    .phome-hero-heading-bold {
        font-size: 3.5rem;
    }
}

/* ============================================
   SECTION HEADING (shared: Recommended/Most Viewed)
   ============================================ */
.phome-projects-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

.phome-section-heading-wrap {
    margin-bottom: var(--prop-spacing-8);
}

.phome-section-subheading {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--prop-spacing-2);
}

.phome-section-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: 0;
}

/* ============================================
   SWIPER SLIDER WRAPPER + NAV BUTTONS
   ============================================ */
.phome-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    /* gap: var(--prop-spacing-3); */
}

.phome-swiper {
    flex: 1;
    overflow: hidden;
    padding: var(--prop-spacing-1) 0 var(--prop-spacing-4);
}

.phome-slider-nav {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prop-gray-700);
    font-size: var(--prop-font-size-lg);
    box-shadow: var(--prop-shadow-sm);
    cursor: pointer;
    transition: border-color var(--prop-transition-fast);
}

.phome-slider-nav:hover {
    border-color: var(--prop-primary);
}
.phome-slider-nav-prev {
    position: absolute;
    left:-1%;
    z-index: 2;
}
.phome-slider-nav-next{
    position:absolute;
    right:-1%;
    z-index:2;
}

/* ============================================
   PROJECT CARD
   ============================================ */
.phome-project-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    box-shadow: var(--prop-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-fast);
}

.phome-project-card:hover {
    border-color: var(--prop-primary);
}

.phome-project-img-wrap {
    position: relative;
    width: 100%;
    height: 269px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.phome-project-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.phome-project-body {
    padding: var(--prop-spacing-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.phome-project-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: 0;
}

.phome-project-price {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-primary);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.phome-project-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: var(--prop-spacing-2) 0 var(--prop-spacing-3);
}

.phome-project-location i {
    color: var(--prop-primary);
}

.phome-project-config {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin: 0 0 2px;
}

.phome-project-area {
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin: 0 0 var(--prop-spacing-3);
}

.phome-project-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: auto;
}

.phome-project-rating i {
    font-size: var(--prop-font-size-sm);
    color: #FBBF24;
}

.phome-project-rating-value {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin-left: 4px;
}

/* ============================================
   RESPONSIVE: PROJECTS SLIDER
   ============================================ */
@media (max-width: 767.98px) {
    .phome-projects-section {
        padding: var(--prop-spacing-8) 0;
    }

    .phome-section-heading {
        font-size: var(--prop-font-size-2xl);
    }

    .phome-slider-nav {
        width: 36px;
        height: 36px;
        font-size: var(--prop-font-size-base);
    }

    .phome-project-img-wrap {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .phome-section-heading {
        font-size: var(--prop-font-size-xl);
    }

    .phome-slider-wrap {
        gap: var(--prop-spacing-2);
    }
}

/* ============================================
   SAVED LISTED PROPERTY SECTION
   ============================================ */
.phome-saved-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

.phome-saved-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-6);
}

/* Slider Wrapper + Nav Buttons */
.phome-saved-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    /* gap: var(--prop-spacing-3); */
}

.phome-saved-swiper {
    flex: 1;
    overflow: hidden;
    padding: var(--prop-spacing-1) 0 var(--prop-spacing-4);
}

.phome-saved-nav {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-250);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prop-gray-700);
    font-size: var(--prop-font-size-lg);
    box-shadow: var(--prop-shadow-sm);
    cursor: pointer;
    transition: border-color var(--prop-transition-fast);
}

.phome-saved-nav:hover {
    border-color: var(--prop-primary);
}
.phome-saved-nav-prev{
    position: absolute;
    left: -1%;
    z-index: 2;
}
.phome-saved-nav-next{
    position: absolute;
    right: -1%;
    z-index: 2;
}

/* Right nav hidden on initial load - shown via JS after first interaction */
.phome-saved-nav-next {
    display: none;
}

.phome-saved-nav-next.phome-show {
    display: flex;
}

/* Saved Property Card */
.phome-saved-card {
    max-width: 383px;
    margin: 0 auto;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    box-shadow: var(--prop-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-normal);
}

.phome-saved-card:hover {
    border-color: var(--prop-primary);
}

.phome-saved-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.phome-saved-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Badge overlapping the bottom of the image */
.phome-saved-badge-wrap {
    position: relative;
    z-index: 2;
    padding: 0 var(--prop-spacing-4);
    margin-top: -14px;
}

.phome-saved-badge {
    display: inline-block;
    max-width: 100%;
    background-color: var(--prop-gray-900);
    color: var(--prop-white);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    padding: 6px 14px;
    border-radius: var(--prop-radius-full);
    box-shadow: var(--prop-shadow-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phome-saved-body {
    padding: var(--prop-spacing-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.phome-saved-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: var(--prop-spacing-1) 0 4px;
}

.phome-saved-location {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}

.phome-saved-details {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: 1.4;
    margin-bottom: var(--prop-spacing-3);
}

.phome-saved-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prop-spacing-3);
    margin-top: auto;
    flex-wrap: wrap;
}

.phome-saved-price-label {
    display: block;
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
}

.phome-saved-price-value {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-black);
}

.phome-saved-btn {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-2) var(--prop-spacing-4);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.phome-saved-btn:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   RESPONSIVE: SAVED LISTED PROPERTY
   ============================================ */
@media (max-width: 767.98px) {
    .phome-saved-section {
        padding: var(--prop-spacing-8) 0;
    }

    .phome-saved-heading {
        font-size: var(--prop-font-size-2xl);
    }

    .phome-saved-nav {
        width: 36px;
        height: 36px;
        font-size: var(--prop-font-size-base);
    }

    .phome-saved-img-wrap {
        height: 170px;
    }
}

@media (max-width: 575.98px) {
    .phome-saved-heading {
        font-size: var(--prop-font-size-xl);
    }

    .phome-saved-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .phome-saved-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   EVERYTHING AT ONE PLACE SECTION
   ============================================ */
.phome-everything-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

.phome-everything-card {
    background-color: var(--prop-primary);
    border-radius: var(--prop-radius-2xl);
    padding: var(--prop-spacing-8);
}

.phome-everything-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    margin-bottom: var(--prop-spacing-5);
}

/* Nav Tabs */
.phome-everything-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    gap: var(--prop-spacing-6);
    margin-bottom: var(--prop-spacing-8);
    flex-wrap: wrap;
}

.phome-everything-tabs .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    background: none;
    border: none;
    padding: 0 0 var(--prop-spacing-3);
    border-bottom: 2px solid transparent;
    transition: all var(--prop-transition-fast);
}

.phome-everything-tabs .nav-link:hover {
    color: var(--prop-white);
}

.phome-everything-tabs .nav-link.active {
    color: var(--prop-white);
    font-weight: var(--prop-font-weight-semibold);
    background: none;
    border-bottom-color: var(--prop-white);
}

/* Services Row */
.phome-everything-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--prop-spacing-5);
}

.phome-everything-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--prop-spacing-2);
    flex: 0 0 45%;
}

.phome-everything-service-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--prop-white);
    transition: all var(--prop-transition-normal);
}

.phome-everything-service-item:hover .phome-everything-service-icon-wrap {
    background-color: var(--prop-white);
    color: var(--prop-primary);
}

.phome-everything-service-name {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-white);
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE: EVERYTHING AT ONE PLACE
   ============================================ */
@media (min-width: 576px) {
    .phome-everything-service-item {
        flex: 0 0 30%;
    }
}

@media (min-width: 768px) {
    .phome-everything-service-item {
        flex: 0 0 22%;
    }
}

@media (min-width: 992px) {
    .phome-everything-card {
        padding: var(--prop-spacing-8) var(--prop-spacing-10);
    }

    .phome-everything-services {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .phome-everything-service-item {
        flex: 1 1 0;
    }
}

@media (max-width: 767.98px) {
    .phome-everything-heading {
        font-size: var(--prop-font-size-xl);
    }

    .phome-everything-card {
        padding: var(--prop-spacing-6) var(--prop-spacing-5);
    }

    .phome-everything-tabs {
        gap: var(--prop-spacing-4);
    }

    .phome-everything-tabs .nav-link {
        font-size: var(--prop-font-size-sm);
    }
}

@media (max-width: 575.98px) {
    .phome-everything-service-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .phome-everything-service-name {
        font-size: var(--prop-font-size-xs);
        white-space: normal;
    }
}

/* ============================================
   BUY / RENT / SELL CARDS SECTION
   ============================================ */
.phome-brs-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

.phome-brs-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color var(--prop-transition-normal);
}

.phome-brs-card:hover {
    border-color: var(--prop-primary);
}

.phome-brs-img-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: var(--prop-spacing-4);
    overflow: hidden;
}

.phome-brs-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.phome-brs-title {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
}

.phome-brs-desc {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-5);
}

.phome-brs-btn {
    margin-top: auto;
    background-color: transparent;
    color: var(--prop-primary);
    border: 1.5px solid var(--prop-primary);
    padding: var(--prop-spacing-2) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.phome-brs-btn:hover {
    background-color: var(--prop-primary);
    color: var(--prop-white);
}

/* ============================================
   RESPONSIVE: BUY / RENT / SELL CARDS
   ============================================ */
@media (max-width: 767.98px) {
    .phome-brs-section {
        padding: var(--prop-spacing-8) 0;
    }

    .phome-brs-img-wrap {
        width: 100px;
        height: 100px;
    }

    .phome-brs-title {
        font-size: var(--prop-font-size-lg);
    }
}

/* ============================================
   BLOG SECTION
   ============================================ */
.phome-blog-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

/* Centered Heading */
.phome-blog-heading-wrap {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--prop-spacing-8);
}

.phome-blog-heading {
    font-size: var(--prop-font-size-4xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-primary-dark);
    margin-bottom: var(--prop-spacing-2);
}

.phome-blog-subtext {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin: 0;
}

/* Blog Card */
.phome-blog-card {
    display: block;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: border-color var(--prop-transition-normal);
}

.phome-blog-card:hover {
    border-color: var(--prop-primary);
}

.phome-blog-img-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.phome-blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.phome-blog-body {
    padding: var(--prop-spacing-4);
}

.phome-blog-date {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-400);
    margin-bottom: var(--prop-spacing-2);
}

.phome-blog-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
    line-height: var(--prop-line-height-tight);
}

.phome-blog-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    margin: 0;
}

/* ============================================
   RESPONSIVE: BLOG SECTION
   ============================================ */
@media (max-width: 991.98px) {
    .phome-blog-heading {
        font-size: var(--prop-font-size-3xl);
    }
}

@media (max-width: 767.98px) {
    .phome-blog-section {
        padding: var(--prop-spacing-8) 0;
    }

    .phome-blog-heading {
        font-size: var(--prop-font-size-2xl);
    }

    .phome-blog-heading-wrap {
        margin-bottom: var(--prop-spacing-6);
    }

    .phome-blog-img-wrap {
        height: 200px;
    }
}

@media (max-width: 575.98px) {
    .phome-blog-heading {
        font-size: var(--prop-font-size-xl);
    }

    .phome-blog-subtext {
        font-size: var(--prop-font-size-sm);
    }

    .phome-blog-img-wrap {
        height: 190px;
    }
}

/************************************************************************************/
/* HOME PAGE (phome-) end  */
/************************************************************************************/

/* ============================================
   BLOG DETAIL PAGE (pblog-) START
   ============================================ */

/* ============================================
   HERO SECTION
   ============================================ */
.pblog-hero-section {
    padding: var(--prop-spacing-2) 0 var(--prop-spacing-6);
    background-color: var(--prop-white);
}

.pblog-hero-img-wrap {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pblog-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark gradient overlay - bottom heavy for text readability */
.pblog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

/* Bottom-left overlay content */
.pblog-hero-content {
    position: absolute;
    left: var(--prop-spacing-6);
    right: var(--prop-spacing-6);
    bottom: var(--prop-spacing-6);
    z-index: 2;
}

/* Category Badge */
.pblog-hero-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-white);
    margin-bottom: var(--prop-spacing-2);
}

.pblog-hero-badge i {
    color: var(--prop-primary);
    font-size: 1.75rem;
    line-height: 0;
    margin-right: 2px;
}

/* Title */
.pblog-hero-title {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-2);
    max-width: 780px;
}

/* Meta row: date + reading time */
.pblog-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: rgba(255, 255, 255, 0.9);
}

.pblog-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pblog-hero-meta-item i {
    font-size: var(--prop-font-size-base);
}

.pblog-hero-meta-dot {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

/* ============================================
   RESPONSIVE: HERO SECTION
   ============================================ */
@media (max-width: 991.98px) {
    .pblog-hero-img-wrap {
        height: 340px;
    }

    .pblog-hero-title {
        font-size: var(--prop-font-size-2xl);
    }
}

@media (max-width: 767.98px) {
    .pblog-hero-img-wrap {
        height: 280px;
        border-radius: var(--prop-radius-lg);
    }

    .pblog-hero-content {
        left: var(--prop-spacing-4);
        right: var(--prop-spacing-4);
        bottom: var(--prop-spacing-4);
    }

    .pblog-hero-title {
        font-size: var(--prop-font-size-xl);
    }

    .pblog-hero-badge {
        font-size: var(--prop-font-size-xs);
    }
}

@media (max-width: 575.98px) {
    .pblog-hero-img-wrap {
        height: 220px;
    }

    .pblog-hero-title {
        font-size: var(--prop-font-size-lg);
    }

    .pblog-hero-meta {
        font-size: var(--prop-font-size-xs);
        flex-wrap: wrap;
    }
}

/* ============================================
   BLOG DETAIL SECTION (Two Column Layout)
   ============================================ */
.pblog-detail-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-10);
    background-color: var(--prop-white);
}

/* ---------- LEFT COLUMN: Article ---------- */
.pblog-article {
    max-height: none;
    overflow: visible;
}

.pblog-article-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: var(--prop-spacing-8) 0 var(--prop-spacing-4);
    line-height: var(--prop-line-height-tight);
    scroll-margin-top: 100px;
}

.pblog-article-heading:first-child {
    margin-top: 0;
}

.pblog-article-subheading {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: var(--prop-spacing-6) 0 var(--prop-spacing-3);
    scroll-margin-top: 100px;
}

.pblog-article-text {
    font-size: 1.063rem;
    font-weight: 400;
    color: var(--prop-gray-700);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-4);
}

.pblog-article-list {
    margin: 0 0 var(--prop-spacing-4);
    padding-left: var(--prop-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
}

.pblog-article-list li {
    font-size: 1.063rem;
    font-weight: 400;
    color: var(--prop-gray-700);
    line-height: var(--prop-line-height-relaxed);
}

.pblog-article-list li strong {
    color: var(--prop-gray-900);
    font-weight: var(--prop-font-weight-semibold);
}

/* ---------- RIGHT SIDEBAR: Sticky (no outer scroll) ---------- */
.pblog-sidebar {
    position: sticky;
    top: 90px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-4);
}

/* ---------- CARD 1: Author Card ---------- */
.pblog-author-card {
    background: linear-gradient(145deg, var(--prop-primary) 0%, var(--prop-primary-dark) 100%);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-md);
    color: var(--prop-white);
    flex-shrink: 0;
}

.pblog-author-top {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    margin-bottom: var(--prop-spacing-4);
}

.pblog-author-photo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.pblog-author-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pblog-author-linkedin-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--prop-white);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-lg);
    flex-shrink: 0;
    transition: all var(--prop-transition-fast);
}

.pblog-author-linkedin-badge:hover {
    background-color: var(--prop-gray-100);
    transform: translateY(-2px);
}

.pblog-author-name {
    font-size: var(--prop-font-size-xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    margin-bottom: var(--prop-spacing-2);
}

.pblog-author-title {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-white);
    line-height: var(--prop-line-height-normal);
    margin-bottom: var(--prop-spacing-3);
}

.pblog-author-bio {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--prop-line-height-normal);
    margin: 0;
}

/* ---------- CARD 2: Share Card ---------- */
.pblog-share-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-4) var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    flex-shrink: 0;
}

.pblog-share-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

.pblog-share-icons {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    flex-wrap: wrap;
}

.pblog-share-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--prop-font-size-base);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pblog-share-icon:hover {
    background-color: var(--prop-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--prop-shadow-md);
    color: var(--prop-white);
}

.pblog-copy-link-btn i {
    font-size: var(--prop-font-size-lg);
}

/* ---------- CARD 3: Table of Contents ---------- */
.pblog-toc-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    padding: var(--prop-spacing-4) var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    flex-shrink: 0;
    overscroll-behavior: contain;
}

.pblog-toc-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

/* Fixed height + internal vertical scroll + custom scrollbar
   (scales cleanly as the number of TOC headings grows in future) */
.pblog-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-3);
    height: 450px;
    overflow-y: auto;
    padding-right: var(--prop-spacing-3);
    scrollbar-width: thin;
    scrollbar-color: var(--prop-gray-300) transparent;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.pblog-toc-list::-webkit-scrollbar {
    width: 5px;
}

.pblog-toc-list::-webkit-scrollbar-track {
    background: transparent;
}

.pblog-toc-list::-webkit-scrollbar-thumb {
    background-color: var(--prop-gray-300);
    border-radius: var(--prop-radius-full);
}

.pblog-toc-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--prop-gray-400);
}

.pblog-toc-link {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    border-left: 2px solid var(--prop-gray-150);
    padding-left: var(--prop-spacing-3);
    transition: all var(--prop-transition-fast);
    flex-shrink: 0;
}

.pblog-toc-link:hover {
    color: var(--prop-primary);
    border-left-color: var(--prop-primary);
}

/* Active heading - highlighted via custom IntersectionObserver JS */
.pblog-toc-link.active {
    color: var(--prop-primary);
    font-weight: var(--prop-font-weight-semibold);
    border-left-color: var(--prop-primary);
}

/* ============================================
   RESPONSIVE: RIGHT SIDEBAR
   ============================================ */

/* Tablet: sidebar stays sticky, sits below article */
@media (max-width: 991.98px) {
    .pblog-sidebar {
        margin-top: var(--prop-spacing-6);
        position: sticky;
        top: 20px;
    }
}

/* Mobile: sidebar unsticks, stacks below article, TOC scroll shortened */
@media (max-width: 767.98px) {
    .pblog-sidebar {
        position: static;
        margin-top: var(--prop-spacing-5);
    }

    .pblog-toc-list {
        height: 320px;
    }
}

@media (max-width: 575.98px) {
    .pblog-author-card,
    .pblog-share-card,
    .pblog-toc-card {
        padding: var(--prop-spacing-4);
    }

    .pblog-share-icon {
        width: 34px;
        height: 34px;
        font-size: var(--prop-font-size-sm);
    }
}

/* ============================================
   RELATED ARTICLES SECTION
   ============================================ */
.pblog-related-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-10);
    background-color: var(--prop-white);
}

.pblog-related-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-6);
}

/* Related Article Card */
.pblog-related-card {
    display: block;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--prop-shadow-sm);
    transition: all var(--prop-transition-normal);
}

.pblog-related-card:hover {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-lg);
    transform: translateY(-4px);
}

.pblog-related-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pblog-related-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--prop-transition-slow);
}

.pblog-related-card:hover .pblog-related-img-wrap img {
    transform: scale(1.06);
}

/* Category Badge overlapping bottom of image */
.pblog-related-badge {
    position: absolute;
    left: var(--prop-spacing-3);
    bottom: var(--prop-spacing-2);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--prop-gray-800);
    font-size: 0.688rem;
    font-weight: var(--prop-font-weight-medium);
    padding: 3px 10px 3px 4px;
    border-radius: var(--prop-radius-full);
    box-shadow: var(--prop-shadow-sm);
    white-space: nowrap;
}

.pblog-related-badge i {
    color: var(--prop-primary);
    font-size: 1.5rem;
    line-height: 0;
}

.pblog-related-body {
    padding: var(--prop-spacing-4);
}

.pblog-related-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pblog-related-meta {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-xs);
    font-weight: 400;
    color: var(--prop-gray-550);
}

.pblog-related-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pblog-related-meta-dot {
    color: var(--prop-gray-300);
    line-height: 1;
}

/* ============================================
   RESPONSIVE: RELATED ARTICLES
   ============================================ */
@media (max-width: 991.98px) {
    .pblog-related-heading {
        font-size: var(--prop-font-size-xl);
    }
}

@media (max-width: 767.98px) {
    .pblog-related-section {
        padding: var(--prop-spacing-4) 0 var(--prop-spacing-8);
    }

    .pblog-related-img-wrap {
        height: 200px;
    }
}

@media (max-width: 575.98px) {
    .pblog-related-heading {
        font-size: var(--prop-font-size-lg);
    }

    .pblog-related-img-wrap {
        height: 190px;
    }
}


/* ============================================
   BLOG DETAIL PAGE (pblog-) end
   ============================================ */

   /************************************************************************************/
/* BLOG LISTING PAGE (pbloglist-) START */
/************************************************************************************/

/* ============================================
   HERO SECTION
   ============================================ */
.pbloglist-hero-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-8);
    background-color: var(--prop-gray-50);
    border-bottom: 1px solid var(--prop-gray-150);
}

.pbloglist-hero-title {
    font-size: var(--prop-font-size-4xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin: var(--prop-spacing-4) 0 var(--prop-spacing-2);
}

.pbloglist-hero-subtitle {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin: 0;
    max-width: 640px;
}

/* ============================================
   BLOG CARDS GRID SECTION
   ============================================ */
.pbloglist-grid-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

/* Card - Flexbox column so Read More always sits at the bottom,
   and h-100 (via d-flex on parent col) makes all cards in a row
   stretch to equal height automatically via Bootstrap's row/flex behavior */
.pbloglist-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    overflow: hidden;
    box-shadow: var(--prop-shadow-sm);
    transition: border-color var(--prop-transition-normal);
}

.pbloglist-card:hover {
    border-color: var(--prop-primary);
}

/* Image Wrapper - fixed-ratio container so backend images
   (landscape, tall portrait, any size) never distort or
   break the card layout. Height is fixed; width is 100%;
   object-fit: cover crops to fill without stretching. */
.pbloglist-card-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--prop-gray-100);
    flex-shrink: 0;
}

.pbloglist-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Card Body - flex-grow fills remaining card height so the
   footer (Read More) can be pushed down via margin-top: auto */
.pbloglist-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--prop-spacing-4);
}

.pbloglist-card-meta {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-2);
    font-size: var(--prop-font-size-xs);
    font-weight: var(--prop-font-weight-semibold);
    margin-bottom: var(--prop-spacing-2);
}

.pbloglist-card-category {
    color: var(--prop-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pbloglist-card-meta-dot {
    color: var(--prop-gray-300);
    font-weight: 400;
    line-height: 1;
}

.pbloglist-card-date {
    color: var(--prop-gray-550);
    font-weight: 400;
    text-transform: none;
}

.pbloglist-card-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-2);
    word-wrap: break-word;
}

.pbloglist-card-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    margin-bottom: var(--prop-spacing-3);
    word-wrap: break-word;
}

/* Pinned to the bottom of the card body regardless of
   description length - the key to equal Read More alignment */
.pbloglist-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    margin-top: auto;
    transition: gap var(--prop-transition-fast);
}

.pbloglist-card:hover .pbloglist-card-readmore {
    gap: 10px;
}

.pbloglist-card-readmore i {
    font-size: var(--prop-font-size-sm);
}

/* ============================================
   RESPONSIVE: BLOG LISTING PAGE
   ============================================ */
@media (max-width: 991.98px) {
    .pbloglist-hero-title {
        font-size: var(--prop-font-size-3xl);
    }
}

@media (max-width: 767.98px) {
    .pbloglist-hero-section {
        padding: var(--prop-spacing-4) 0 var(--prop-spacing-6);
    }

    .pbloglist-hero-title {
        font-size: var(--prop-font-size-2xl);
    }

    .pbloglist-hero-subtitle {
        font-size: var(--prop-font-size-sm);
    }

    .pbloglist-grid-section {
        padding: var(--prop-spacing-8) 0;
    }

    .pbloglist-card-img-wrap {
        height: 190px;
    }
}

@media (max-width: 575.98px) {
    .pbloglist-hero-title {
        font-size: var(--prop-font-size-xl);
    }

    .pbloglist-card-title {
        font-size: var(--prop-font-size-base);
    }

    .pbloglist-card-img-wrap {
        height: 200px;
    }
}

/************************************************************************************/
/* BLOG LISTING PAGE (pbloglist-) END */
/************************************************************************************/


/************************************************************************************/
/* ABOUT US PAGE (pabout-) START */
/************************************************************************************/

/* ============================================
   HERO SECTION
   ============================================ */
.pabout-hero-section {
    position: relative;
    height: 460px;
    overflow: hidden;
}

.pabout-hero-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pabout-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pabout-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.pabout-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 720px;
}

/* Breadcrumb (hero-specific, on dark background) */
.pabout-hero-breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: var(--prop-spacing-6);
}

.pabout-hero-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    transition: color var(--prop-transition-fast);
}

.pabout-hero-breadcrumb-item a:hover {
    color: var(--prop-white);
}

.pabout-hero-breadcrumb-item.active {
    color: var(--prop-white);
    font-weight: var(--prop-font-weight-semibold);
    font-size: var(--prop-font-size-sm);
}

.pabout-hero-breadcrumb-item + .pabout-hero-breadcrumb-item::before {
    content: '>';
    color: rgba(255, 255, 255, 0.6);
    padding: 0 var(--prop-spacing-2);
    font-size: var(--prop-font-size-sm);
}

/* Heading */
.pabout-hero-heading {
    font-size: 3rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    line-height: 1.1;
    margin-bottom: var(--prop-spacing-3);
}

/* Description */
.pabout-hero-desc {
    font-size: var(--prop-font-size-lg);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-6);
    max-width: 560px;
}

/* CTA Buttons */
.pabout-hero-cta-wrap {
    display: flex;
    align-items: center;
    gap: var(--prop-spacing-3);
    flex-wrap: wrap;
}

.pabout-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pabout-hero-btn-primary:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

.pabout-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-white);
    color: var(--prop-gray-900);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pabout-hero-btn-secondary:hover {
    background-color: var(--prop-gray-150);
    color: var(--prop-gray-900);
}

/* ============================================
   RESPONSIVE: HERO SECTION
   ============================================ */
@media (max-width: 991.98px) {
    .pabout-hero-section {
        height: 420px;
    }

    .pabout-hero-heading {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .pabout-hero-section {
        height: auto;
        min-height: 400px;
        padding: var(--prop-spacing-8) 0;
    }

    .pabout-hero-content {
        height: auto;
        padding: var(--prop-spacing-4) 0;
    }

    .pabout-hero-heading {
        font-size: 2rem;
    }

    .pabout-hero-desc {
        font-size: var(--prop-font-size-base);
    }

    .pabout-hero-cta-wrap {
        width: 100%;
    }

    .pabout-hero-btn-primary,
    .pabout-hero-btn-secondary {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .pabout-hero-heading {
        font-size: 1.75rem;
    }

    .pabout-hero-desc {
        font-size: var(--prop-font-size-sm);
        margin-bottom: var(--prop-spacing-4);
    }

    .pabout-hero-cta-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .pabout-hero-btn-primary,
    .pabout-hero-btn-secondary {
        width: 100%;
    }
}

@media (min-width: 1920px) {
    .pabout-hero-section {
        height: 540px;
    }

    .pabout-hero-heading {
        font-size: 3.5rem;
    }
}

/* ============================================
   ABOUT / INTRO SECTION
   ============================================ */
.pabout-intro-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

/* Image Wrapper - controlled container so backend images
   never distort or break the layout */
.pabout-intro-img-wrap {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    background-color: var(--prop-gray-100);
}

.pabout-intro-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Text Content */
.pabout-intro-eyebrow {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--prop-spacing-3);
}

.pabout-intro-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-4);
}

.pabout-intro-text {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-4);
}

.pabout-intro-text:last-of-type {
    margin-bottom: var(--prop-spacing-6);
}

.pabout-intro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pabout-intro-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

/* ============================================
   RESPONSIVE: ABOUT / INTRO SECTION
   ============================================ */
@media (max-width: 991.98px) {
    .pabout-intro-img-wrap {
        height: 360px;
    }

    .pabout-intro-heading {
        font-size: var(--prop-font-size-2xl);
    }
}

@media (max-width: 767.98px) {
    .pabout-intro-section {
        padding: var(--prop-spacing-8) 0;
    }

    .pabout-intro-img-wrap {
        height: 300px;
    }

    .pabout-intro-heading {
        font-size: var(--prop-font-size-xl);
    }

    .pabout-intro-text {
        font-size: var(--prop-font-size-sm);
    }
}

@media (max-width: 575.98px) {
    .pabout-intro-img-wrap {
        height: 260px;
        border-radius: var(--prop-radius-lg);
    }

    .pabout-intro-heading {
        font-size: var(--prop-font-size-lg);
    }

    .pabout-intro-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   OUR MISSION SECTION
   ============================================ */
.pabout-mission-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-gray-50);
}

.pabout-mission-heading-wrap {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--prop-spacing-8);
}

.pabout-mission-eyebrow {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--prop-spacing-3);
}

.pabout-mission-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: var(--prop-line-height-tight);
    margin-bottom: var(--prop-spacing-3);
}

.pabout-mission-subtext {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin: 0;
}

/* Mission Card */
.pabout-mission-card {
    width: 100%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-5);
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-normal);
}

.pabout-mission-card:hover {
    border-color: var(--prop-primary);
}

.pabout-mission-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--prop-gray-200);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--prop-spacing-4);
}

.pabout-mission-card-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
}

.pabout-mission-card-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    margin: 0;
}

/* ============================================
   WHY CHOOSE DWELL SECTION
   ============================================ */
.pabout-why-section {
    padding: var(--prop-spacing-10) 0;
    background-color: var(--prop-white);
}

.pabout-why-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-6);
}

/* Why Card */
.pabout-why-card {
    width: 100%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    padding: var(--prop-spacing-5);
    box-shadow: var(--prop-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-normal);
}

.pabout-why-card:hover {
    border-color: var(--prop-primary);
}

.pabout-why-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--prop-gray-200);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--prop-spacing-4);
}

.pabout-why-card-title {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-2);
}

.pabout-why-card-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    margin: 0;
}

/* ============================================
   EVERYTHING YOU NEED SECTION
   ============================================ */
.pabout-services-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-10);
    background-color: var(--prop-white);
}

.pabout-services-card {
    background-color: var(--prop-primary);
    border-radius: var(--prop-radius-2xl);
    padding: var(--prop-spacing-8);
}

.pabout-services-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-white);
    text-align: center;
    margin-bottom: var(--prop-spacing-8);
}

/* Grid: 4 columns x 2 rows on desktop */
.pabout-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--prop-spacing-6) var(--prop-spacing-4);
}

.pabout-services-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--prop-spacing-2);
}

.pabout-services-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--prop-white);
    transition: all var(--prop-transition-normal);
}

.pabout-services-item:hover .pabout-services-icon-wrap {
    background-color: var(--prop-white);
    color: var(--prop-primary);
}

.pabout-services-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-white);
}

/* ============================================
   CTA SECTION
   ============================================ */
.pabout-cta-section {
    padding: 0 0 var(--prop-spacing-10);
    background-color: var(--prop-white);
}

.pabout-cta-card {
    background-color: var(--prop-gray-50);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-2xl);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-10) var(--prop-spacing-6);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.pabout-cta-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

.pabout-cta-text {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    max-width: 560px;
    margin: 0 auto var(--prop-spacing-6);
}

.pabout-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pabout-cta-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

/* ============================================
   RESPONSIVE: MISSION / WHY CHOOSE / SERVICES / CTA
   ============================================ */
@media (max-width: 991.98px) {
    .pabout-mission-heading,
    .pabout-why-heading,
    .pabout-cta-heading {
        font-size: var(--prop-font-size-2xl);
    }

    .pabout-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pabout-mission-section,
    .pabout-why-section {
        padding: var(--prop-spacing-8) 0;
    }

    .pabout-services-section {
        padding: var(--prop-spacing-4) 0 var(--prop-spacing-8);
    }

    .pabout-cta-section {
        padding: 0 0 var(--prop-spacing-8);
    }

    .pabout-mission-heading {
        font-size: var(--prop-font-size-xl);
    }

    .pabout-why-heading {
        font-size: var(--prop-font-size-xl);
    }

    .pabout-services-card {
        padding: var(--prop-spacing-6) var(--prop-spacing-4);
    }

    .pabout-services-heading {
        font-size: var(--prop-font-size-xl);
        margin-bottom: var(--prop-spacing-6);
    }

    .pabout-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--prop-spacing-5) var(--prop-spacing-3);
    }

    .pabout-cta-card {
        padding: var(--prop-spacing-8) var(--prop-spacing-4);
    }

    .pabout-cta-heading {
        font-size: var(--prop-font-size-xl);
    }
}

@media (max-width: 575.98px) {
    .pabout-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pabout-services-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .pabout-services-label {
        font-size: var(--prop-font-size-xs);
    }

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

/************************************************************************************/
/* ABOUT US PAGE (pabout-) end */
/************************************************************************************/

/************************************************************************************/
/* CONTACT US PAGE (pcontact-) START */
/************************************************************************************/

/* ============================================
   PAGE HEADER / INTRO SECTION
   ============================================ */
.pcontact-hero-section {
    padding: var(--prop-spacing-4) 0 var(--prop-spacing-10);
    background-color: var(--prop-gray-50);
}

.pcontact-hero-eyebrow {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--prop-spacing-6) 0 var(--prop-spacing-2);
}

.pcontact-hero-heading {
    font-size: 2.75rem;
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    line-height: 1.15;
    margin-bottom: var(--prop-spacing-3);
    max-width: 700px;
}
.pcontact-hero-subtext {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    max-width: 620px;
    margin: 0;
}

/* ============================================
   CONTACT INFORMATION CARDS SECTION
   ============================================ */
.pcontact-info-section {
    padding: var(--prop-spacing-8) 0;
    background-color: var(--prop-white);
}

.pcontact-info-card {
    width: 100%;
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-lg);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-5);
    display: flex;
    flex-direction: column;
    transition: border-color var(--prop-transition-normal);
}

.pcontact-info-card:hover {
    border-color: var(--prop-primary);
}

.pcontact-info-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--prop-gray-200);
    color: var(--prop-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--prop-spacing-4);
}

.pcontact-info-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-1);
}

.pcontact-info-desc {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-2);
}

.pcontact-info-link {
    display: inline-block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-primary);
    margin-top: auto;
    transition: color var(--prop-transition-fast);
}

.pcontact-info-link:hover {
    color: var(--prop-primary-hover);
}

.pcontact-info-link-static {
    color: var(--prop-primary);
    cursor: default;
}

/* ============================================
   SEND US A MESSAGE SECTION
   ============================================ */
.pcontact-form-section {
    padding: var(--prop-spacing-8) 0;
    background-color: var(--prop-white);
}

/* Left: Details */
.pcontact-form-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

.pcontact-form-subtext {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-6);
    max-width: 460px;
}

.pcontact-form-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--prop-spacing-4);
}

.pcontact-form-detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--prop-spacing-3);
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-700);
    line-height: var(--prop-line-height-normal);
}

.pcontact-form-detail-item i {
    color: var(--prop-primary);
    font-size: var(--prop-font-size-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Right: Form Card */
.pcontact-form-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-6);
}

.pcontact-form-label {
    display: block;
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-800);
    margin-bottom: var(--prop-spacing-2);
}

.pcontact-form-input,
.pcontact-form-select,
.pcontact-form-textarea {
    width: 100%;
    padding: var(--prop-spacing-3) var(--prop-spacing-4);
    border: 1px solid var(--prop-gray-250);
    border-radius: var(--prop-radius-md);
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-medium);
    color: var(--prop-gray-800);
    background-color: var(--prop-white);
    outline: none;
    transition: all var(--prop-transition-normal);
    font-family: var(--prop-font-family);
}

.pcontact-form-input::placeholder,
.pcontact-form-textarea::placeholder {
    color: var(--prop-gray-400);
    font-weight: 400;
}

.pcontact-form-input:focus,
.pcontact-form-select:focus,
.pcontact-form-textarea:focus {
    border-color: var(--prop-primary);
    box-shadow: var(--prop-shadow-focus);
}

.pcontact-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%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");
    background-repeat: no-repeat;
    background-position: right var(--prop-spacing-4) center;
    background-size: 0.9rem;
    padding-right: var(--prop-spacing-8);
}

.pcontact-form-textarea {
    resize: vertical;
    min-height: 120px;
}

.pcontact-form-submit-btn {
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-8);
    border-radius: var(--prop-radius-lg);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pcontact-form-submit-btn:hover {
    background-color: var(--prop-primary-hover);
}

/* ============================================
   FIND US / MAP SECTION
   ============================================ */
.pcontact-map-section {
    padding: var(--prop-spacing-8) 0;
    background-color: var(--prop-white);
}

.pcontact-map-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-6);
}

/* Map Wrapper controls dimensions - iframe never dictates layout */
.pcontact-map-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--prop-radius-xl);
    overflow: hidden;
    border: 1px solid var(--prop-gray-150);
    background-color: var(--prop-gray-50);
}

.pcontact-map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Visual placeholder (diagonal stripes) shown over the dummy iframe */
.pcontact-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-linear-gradient(
        45deg,
        var(--prop-gray-100) 0,
        var(--prop-gray-100) 10px,
        var(--prop-white) 10px,
        var(--prop-white) 20px
    );
}

.pcontact-map-pin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    background-color: var(--prop-white);
    border-radius: var(--prop-radius-lg);
    box-shadow: var(--prop-shadow-md);
    padding: var(--prop-spacing-4) var(--prop-spacing-6);
}

.pcontact-map-pin-card i {
    color: var(--prop-primary);
    font-size: 1.5rem;
    margin-bottom: var(--prop-spacing-1);
}

.pcontact-map-pin-title {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
}

.pcontact-map-pin-sub {
    font-size: var(--prop-font-size-xs);
    font-weight: 400;
    color: var(--prop-gray-550);
}

/* Office Address Card */
.pcontact-office-card {
    background-color: var(--prop-white);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-xl);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-5);
    height: 100%;
}

.pcontact-office-title {
    font-size: var(--prop-font-size-lg);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

.pcontact-office-text {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-normal);
    margin-bottom: var(--prop-spacing-4);
}

.pcontact-office-label {
    font-size: var(--prop-font-size-sm);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    margin-bottom: 2px;
}

.pcontact-office-value {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    margin-bottom: var(--prop-spacing-3);
}

.pcontact-office-value-last {
    margin-bottom: 0;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.pcontact-faq-section {
    padding: var(--prop-spacing-8) 0;
    background-color: var(--prop-gray-50);
}

.pcontact-faq-heading {
    font-size: var(--prop-font-size-2xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-6);
}

.pcontact-faq-accordion {
    /* max-width: 900px; */
}

.pcontact-faq-item {
    border: 1px solid var(--prop-gray-150);
    border-radius: 0 !important;
    background-color: var(--prop-white);
}

.pcontact-faq-item:first-child {
    border-top-left-radius: var(--prop-radius-lg) !important;
    border-top-right-radius: var(--prop-radius-lg) !important;
}

.pcontact-faq-item:last-child {
    border-bottom-left-radius: var(--prop-radius-lg) !important;
    border-bottom-right-radius: var(--prop-radius-lg) !important;
}

.pcontact-faq-item + .pcontact-faq-item {
    border-top: none;
}

.pcontact-faq-button {
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    color: var(--prop-gray-900);
    background-color: var(--prop-white);
    padding: var(--prop-spacing-4) var(--prop-spacing-5);
    box-shadow: none;
}

.pcontact-faq-button:not(.collapsed) {
    color: var(--prop-primary);
    background-color: var(--prop-white);
    box-shadow: none;
}

.pcontact-faq-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Custom +/- accordion icon instead of Bootstrap chevron */
.pcontact-faq-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232563EB' viewBox='0 0 16 16'%3e%3cpath d='M8 3.5a.5.5 0 0 1 .5.5v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-1 0v-4h-4a.5.5 0 0 1 0-1h4V4a.5.5 0 0 1 .5-.5Z'/%3e%3c/svg%3e");
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem;
}

.pcontact-faq-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232563EB' viewBox='0 0 16 16'%3e%3cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8Z'/%3e%3c/svg%3e");
    transform: none;
}

.pcontact-faq-body {
    font-size: var(--prop-font-size-sm);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    padding: 0 var(--prop-spacing-5) var(--prop-spacing-4);
}

/* ============================================
   CTA SECTION
   ============================================ */
.pcontact-cta-section {
    padding: var(--prop-spacing-8) 0 var(--prop-spacing-10);
    background-color: var(--prop-white);
}

.pcontact-cta-card {
    background-color: var(--prop-gray-50);
    border: 1px solid var(--prop-gray-150);
    border-radius: var(--prop-radius-2xl);
    box-shadow: var(--prop-shadow-sm);
    padding: var(--prop-spacing-10) var(--prop-spacing-6);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.pcontact-cta-heading {
    font-size: var(--prop-font-size-3xl);
    font-weight: var(--prop-font-weight-bold);
    color: var(--prop-gray-900);
    margin-bottom: var(--prop-spacing-3);
}

.pcontact-cta-text {
    font-size: var(--prop-font-size-base);
    font-weight: 400;
    color: var(--prop-gray-550);
    line-height: var(--prop-line-height-relaxed);
    margin-bottom: var(--prop-spacing-6);
}

.pcontact-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--prop-primary);
    color: var(--prop-white);
    border: none;
    padding: var(--prop-spacing-3) var(--prop-spacing-6);
    border-radius: var(--prop-radius-full);
    font-size: var(--prop-font-size-base);
    font-weight: var(--prop-font-weight-semibold);
    cursor: pointer;
    transition: all var(--prop-transition-normal);
}

.pcontact-cta-btn:hover {
    background-color: var(--prop-primary-hover);
    color: var(--prop-white);
}

/* ============================================
   RESPONSIVE: CONTACT US PAGE
   ============================================ */
@media (max-width: 991.98px) {
    .pcontact-hero-heading {
        font-size: var(--prop-font-size-3xl);
    }

    .pcontact-map-wrap {
        height: 340px;
        margin-bottom: var(--prop-spacing-4);
    }
}

@media (max-width: 767.98px) {
    .pcontact-hero-section {
        padding: var(--prop-spacing-4) 0 var(--prop-spacing-6);
    }

    .pcontact-hero-heading {
        font-size: var(--prop-font-size-2xl);
    }

    .pcontact-hero-subtext {
        font-size: var(--prop-font-size-sm);
    }

    .pcontact-info-section,
    .pcontact-form-section,
    .pcontact-map-section,
    .pcontact-faq-section {
        padding: var(--prop-spacing-6) 0;
    }

    .pcontact-cta-section {
        padding: var(--prop-spacing-6) 0 var(--prop-spacing-8);
    }

    .pcontact-form-heading,
    .pcontact-map-heading,
    .pcontact-faq-heading,
    .pcontact-cta-heading {
        font-size: var(--prop-font-size-xl);
    }

    .pcontact-form-card {
        padding: var(--prop-spacing-4);
    }

    .pcontact-map-wrap {
        height: 280px;
    }

    .pcontact-cta-card {
        padding: var(--prop-spacing-8) var(--prop-spacing-4);
    }
}

@media (max-width: 575.98px) {
    .pcontact-hero-heading {
        font-size: var(--prop-font-size-lg);
    }

    .pcontact-info-card {
        padding: var(--prop-spacing-4);
    }

    .pcontact-form-submit-btn {
        width: 100%;
    }

    .pcontact-faq-button {
        padding: var(--prop-spacing-3) var(--prop-spacing-4);
        font-size: var(--prop-font-size-sm);
    }

    .pcontact-faq-body {
        padding: 0 var(--prop-spacing-4) var(--prop-spacing-3);
    }

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

/************************************************************************************/
/* CONTACT US PAGE (pcontact-) END */
/************************************************************************************/