<!-- === Projects Showcase (Fancy Carousel) === -->
<style>
  /* --- Carousel Look & Feel --- */
  #showcase {
    position: relative;
    background: #0e0f12;
    overflow: hidden;
  }
  #showcase .carousel,
  #showcase .carousel-item {
    height: 520px;
  }
  @media (min-width: 992px){
    #showcase .carousel,
    #showcase .carousel-item { height: 560px; }
  }

  /* Slide backgrounds (edit freely) */
  .slide-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: saturate(1.05) contrast(1.02);
  }
  .bg-pub        { background-image:
      radial-gradient(1200px 600px at 100% 0%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
      linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d); }
  .bg-booking    { background-image:
      radial-gradient(1200px 600px at 0% 100%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
      linear-gradient(45deg, #0f2027, #203a43, #2c5364); }
  .bg-cityquest  { background-image:
      radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
      linear-gradient(45deg, #23074d, #cc5333); }
  .bg-classroom  { background-image:
      radial-gradient(1200px 600px at 0% 0%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
      linear-gradient(45deg, #11998e, #38ef7d); }
  .bg-python     { background-image:
      radial-gradient(1200px 600px at 100% 100%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
      linear-gradient(45deg, #141E30, #243B55); }

  /* Glass card */
  .glass {
    position: relative;
    z-index: 2;
    border-radius: 16px;
    padding: 2rem 2rem 1.75rem;
    max-width: 880px;
    margin: 0 auto;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    color: #f2f4f8;
  }
  .glass .lead { color: #dce1ea; }

  /* Icon badge */
  .proj-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    margin-right: .75rem;
  }

  /* Progress bar */
  .carousel-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,.12);
  }
  .carousel-progress .bar {
    width: 0; height: 100%;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    transition: width .2s linear;
  }

  /* Controls */
  #showcase .carousel-control-prev,
  #showcase .carousel-control-next {
    width: 7%; opacity: .85;
    transition: opacity .2s ease;
  }
  #showcase .carousel-control-prev:hover,
  #showcase .carousel-control-next:hover { opacity: 1; }

  /* Thumbnail indicators */
  .thumbs {
    position: relative; z-index: 3;
    margin-top: -22px; /* overlap slightly */
  }
  .thumbs .thumb {
    cursor: pointer; user-select: none;
    border-radius: 12px;
    padding: .65rem .75rem;
    background: rgba(255,255,255,.06);
    border: 1px solid transparent;
    color: #cfd6e4;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thumbs .thumb.active {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    color: #fff;
  }
  .thumbs .thumb:hover { transform: translateY(-2px); }

  /* Section header */
  .section-title {
    letter-spacing: .5px; font-weight: 700; color: #fff;
  }
  .section-sub {
    color: #cfd6e4; max-width: 880px; margin: 0 auto 1.25rem;
  }
</style>