/*------------------------------------------ ABOUT BANNER SECTION START--------------------------  */
:root{
    --luxbc-bg-dark:#0b0c10;
    --luxbc-gold:red;
    --luxbc-gold-2:#f2dea6;
    --luxbc-ink:#f5f7fb;
    --luxbc-glass: rgba(255,255,255,.10);
    --luxbc-stroke: rgba(255,255,255,.25);
  }

  /* Section skeleton */
  #luxbc-banner{
    min-height: 60vh;
    display:grid; place-items:center;
    color: var(--luxbc-ink);
    overflow:hidden;
    background: #0e0f14;
  }

  /* Video fills */
  .luxbc-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter: saturate(1.05) contrast(1.06);
    z-index:0;
  }

  /* Gold gradient wash + diagonal sheen */
  .luxbc-gradient{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(130deg, rgba(0,0,0,.65) 10%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.65) 100%),
      radial-gradient(700px 400px at 15% 10%, rgba(212,182,101,.28), transparent 60%),
      radial-gradient(700px 400px at 85% 90%, rgba(242,222,166,.18), transparent 60%);
    pointer-events:none;
  }
  .luxbc-vignette{
    position:absolute; inset:-10%;
    background: radial-gradient(80% 80% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
    z-index:1; pointer-events:none;
  }

  /* Corner ornaments (thin luxury strokes) */
  .luxbc-ornament{
    position:absolute; width:120px; height:120px; z-index:2; opacity:.65;
  }
  .luxbc-ornament--tl{ top:12px; left:12px; }
  .luxbc-ornament--br{ right:12px; bottom:12px; transform: rotate(180deg); }

  .luxbc-ornament::before,
  .luxbc-ornament::after{
    content:""; position:absolute; background:linear-gradient(90deg, var(--luxbc-gold), var(--luxbc-gold-2));
  }
  .luxbc-ornament::before{ width:110px; height:2px; top:0; left:0; border-radius:2px; }
  .luxbc-ornament::after{ width:2px; height:110px; top:0; left:0; border-radius:2px; }

  /* Content */
  .luxbc-content{ z-index:3; padding:3.2rem 0; }
  .luxbc-title{
    font-family:"Playfair Display", serif;
    font-weight:700;
    font-size: clamp(30px, 5vw, 56px);
    letter-spacing:.3px;
    position:relative; display:inline-block;
  }
  .luxbc-underline{
    position:absolute; left:10%; right:10%; bottom:-10px; height:4px;
    background: linear-gradient(90deg, var(--luxbc-gold), var(--luxbc-gold-2));
    border-radius:2px;
    transform-origin:left; transform: scaleX(0);
    animation: luxbc-underline-in .9s .25s ease-out forwards;
  }
  @keyframes luxbc-underline-in{ to{ transform: scaleX(1); } }

  .luxbc-subtitle{
    color:#e9ecf3; opacity:.9;
    font-size: clamp(14px, 2.2vw, 18px);
    max-width: 820px; margin-inline:auto;
  }

  /* Glass breadcrumb */
  .luxbc-breadcrumb{
    --bs-breadcrumb-divider: '›';
    background: var(--luxbc-glass);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border:1px solid var(--luxbc-stroke);
    border-radius: 999px;
    display:inline-flex; padding:.55rem 1rem;
    gap:.35rem;
  }
  .luxbc-crumb-link{
    color:#f7f7fb; text-decoration:none; font-weight:600; opacity:.92;
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.25rem .65rem; border-radius:999px;
  }
  .luxbc-crumb-link:hover{ color:#fff; background: rgba(255,255,255,.08); }
  .luxbc-crumb-link.active{ color:#1a1a1a; background: linear-gradient(135deg,var(--luxbc-gold),var(--luxbc-gold-2)); }
  .luxbc-crumb-dot{
    width:8px; height:8px; border-radius:50%;
    background: linear-gradient(135deg,var(--luxbc-gold),var(--luxbc-gold-2));
    box-shadow: 0 0 0 2px rgba(212,182,101,.25);
  }

  /* Responsive tweaks */
  @media (max-width: 575.98px){
    #luxbc-banner{ min-height: 42vh; margin-top: 50px !important; }
    .luxbc-content{ padding: 2.2rem 0; }
  }

  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .luxbc-video{ animation:none; }
    .luxbc-underline{ animation:none; transform: scaleX(1); }
  }


/*------------------------------------------ project BANNER SECTION END--------------------------  */



  :root{
    --px-ink:#0f172a;
    --px-line:#e9edf3;
    --px-shine:rgba(255,255,255,.55);
    --px-border:#e6eaf0;
  }
  
  /* ==== CARD (image-only) ==== */
  .px-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--px-border);
    border-radius:12px;                 /* radius kam kiya */
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    height:100%;
  }
  .px-card .px-media{
    position:relative;
    height:280px;
    background:#f6f8fb;
    overflow:hidden;
  }
  .px-card .px-media img{
    width:100%; height:100%;
    object-fit:cover;
    transform:scale(1);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
    display:block;
  }

  /* ===== Shine Hover Effect ===== */
  .px-card::before{
    content:"";
    position:absolute;
    top:0; left:-75%;
    width:50%; height:100%;
    background:linear-gradient(120deg,transparent,var(--px-shine),transparent);
    transform:skewX(-25deg);
    opacity:0; pointer-events:none;
  }
  .px-card:hover::before{
    animation:pxShine 1s ease-in-out forwards;
    opacity:1;
  }
  @keyframes pxShine { 0%{ left:-75% } 100%{ left:125% } }

  .px-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 38px rgba(15,23,42,.12);
    border-color:rgba(79,70,229,.22);
  }
  .px-card:hover .px-media img{
    transform:scale(1.06);
    filter:saturate(1.04);
  }

  /* smooth hide/show on filter */
  .px-hide{opacity:0; transform:scale(.98); pointer-events:none; transition:opacity .35s ease, transform .35s ease}

  /* responsive media height */
  @media (max-width: 991.98px){ .px-card .px-media{ height:240px } }
  @media (max-width: 575.98px){ .px-card .px-media{ height:210px } }

  /* ===== Filter buttons (use your existing active class) ===== */
  .btn-indigo-active{
    background-color:#4f46e5 !important;
    border-color:#4f46e5 !important;
    color:#fff !important;
  }
  .btn-outline-custom{ color:#495057; border-color:transparent; font-weight:600; transition:.2s }
  .btn-outline-custom:hover{ background:#eef2ff; color:#4f46e5; border-color:transparent }

  /* utility (optional nicer gap on xl) */
  @media (min-width:1200px){ .g-xl-5 { --bs-gutter-x:3rem; --bs-gutter-y:3rem; } }
  
  
  /* replace the @media (max-width:576px){...} block with this */
@media (max-width: 576px){
  #filter-controls{
    width:100% !important;
    padding:10px !important;
    display:flex !important;
    overflow-x:auto;
    gap:10px !important;
    border-radius:18px !important;
    scroll-snap-type:x mandatory;
  }
  #filter-controls .filter-btn{
    flex:0 0 auto;                 /* chips don't shrink */
    scroll-snap-align:start;
  }
  /* hide thick scrollbar on mobile WebKit */
  #filter-controls::-webkit-scrollbar{ height:6px }
  #filter-controls::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px }
}