/*------------------------------------------ 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; }
    .luxbc-content{ padding: 2.2rem 0; margin-top: 50px !important; }
  }

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


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



/* project section start ----------------------------------------- */


        /* Custom Font (Inter remains the default clean font) */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
        

        /* Custom Rounded Corners (Bootstrap only goes to rounded-5) */
        .rounded-4 { border-radius: 1.5rem !important; }
        .rounded-5 { border-radius: 2rem !important; }

        /* Filter Active State */
        .btn-indigo-active {
            background-color: #4f46e5 !important; /* Indigo 600 */
            border-color: #4f46e5 !important;
            color: white !important;
        }
        .btn-outline-custom {
            color: #495057; /* Dark Grey Text */
            border-color: transparent;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        .btn-outline-custom:hover {
            background-color: #eef2ff; /* Light Indigo on hover */
            color: #4f46e5;
            border-color: transparent;
        }

       /* ======================= FINAL PREMIUM CARD (CSS-ONLY) ======================= */
/* Scope: only your existing cards */
#project-grid .project-card{
  --pc-radius:22px;
  --pc-border:#e9edf3;
  --pc-shadow:0 8px 22px rgba(15,23,42,.06);
  --pc-shadow-hover:0 18px 44px rgba(15,23,42,.12);
  --pc-ink:#0f172a;
  --pc-muted:#64748b;
  --pc-accent:#4f46e5;

  background:#fff !important;
  border:1px solid var(--pc-border) !important;
  border-radius:var(--pc-radius) !important;
  box-shadow:var(--pc-shadow) !important;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:100%;                 /* keep equal heights with your h-100 */
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Uniform media area across all cards (override any p-5 etc.) */
#project-grid .project-card .card-img-top{
  position:relative;
  height:280px !important;
  padding:0 !important;
  background:#f6f8fb !important;
  border-top-left-radius:var(--pc-radius);
  border-top-right-radius:var(--pc-radius);
  overflow:hidden;
}

/* Make images cover neatly (works even if some cards had padding before) */
#project-grid .project-card .card-img-top img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

/* Subtle sheen overlay on hover (classy, not flashy) */
#project-grid .project-card .card-img-top::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15,23,42,.05) 100%);
  opacity:.0; transition:opacity .28s ease;
  pointer-events:none;
}

/* Card body tidy */
#project-grid .project-card .card-body{
  background:#fff !important;
  padding:1.25rem 1.25rem 1.45rem !important;
  display:flex; flex-direction:column; gap:.4rem;
  color:var(--pc-ink);
  border-top:1px solid #eef1f6;
}

/* Typography polish */
#project-grid .project-card .card-title{
  font-weight:800 !important;
  letter-spacing:.2px;
  margin-bottom:.25rem !important;
  color:#1f2937 !important;
}
#project-grid .project-card .card-text{
  color:var(--pc-muted) !important;
  line-height:1.58; font-size:15px;
  margin:0 !important;
}

/* Badge refinement (keeps your existing classes) */
#project-grid .project-card .badge{
  background:#eef2ff !important;
  color:var(--pc-accent) !important;
  border:1px solid #e6ebff !important;
  font-weight:700; letter-spacing:.05em;
  padding:.4rem .65rem;
  border-radius:999px;
  align-self:flex-start;
  margin-bottom:.35rem;
}

/* Hover: gentle lift + deeper shadow + light border accent */
#project-grid .project-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--pc-shadow-hover) !important;
  border-color:rgba(79,70,229,.22) !important;
}
#project-grid .project-card:hover .card-img-top::before{ opacity:1; }
#project-grid .project-card:hover .card-img-top img{
  transform:scale(1.06);
  filter:saturate(1.02);
}

/* Focus ring for accessibility (keyboard navigation) */
#project-grid .project-card:focus,
#project-grid .project-card:focus-within{
  outline:0;
  box-shadow:0 0 0 3px rgba(79,70,229,.15), var(--pc-shadow-hover) !important;
  border-color:rgba(79,70,229,.35) !important;
}

/* Responsive media height tweaks */
@media (max-width: 991.98px){
  #project-grid .project-card .card-img-top{ height:240px !important; }
}
@media (max-width: 575.98px){
  #project-grid .project-card .card-img-top{ height:210px !important; }
}

/* Optional: equalize long titles without HTML change (clamp to 2 lines) */
#project-grid .project-card .card-title{
  display:-webkit-box; 
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#project-grid .project-card .card-text{
  display:-webkit-box; 
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}


/* ======================= ARROW BUTTON FOR EACH CARD ======================= */

/* Button container (bottom of card body) */
#project-grid .project-card .card-body {
  position: relative;
  padding-bottom: 3rem !important; /* space for arrow */
}

/* Arrow button style */
#project-grid .project-card .card-body::after {
  content: "→";
  position: absolute;
  bottom: 1.2rem;
  right: 1.6rem;
  font-size: 1.4rem;
  color: #4f46e5;
  background: #eef2ff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
#project-grid .project-card:hover .card-body::after {
  background: #4f46e5;
  color: #fff;
  transform: translateX(4px);
}

/* Make it act as link */
#project-grid .project-card .card-body a.arrow-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}




/* ======= FIX FILTER SECTION ALIGNMENT ON MOBILE ======= */
@media (max-width: 767.98px) {
  #filter-controls {
    width: 100% !important;
    margin: 0 auto !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.6rem 0.8rem !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* Filter buttons inside */
  #filter-controls .filter-btn {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
    font-size: 13px !important;
    padding: 0.45rem 0.75rem !important;
  }
}