.fade-slider{
    position:relative;
    width:100%;
    
    height:50vh;
    margin:0px auto;
    overflow:hidden;
    border-radius:0;
  }
  .fade-slide{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    opacity:0;
    transition:opacity 1s ease-in-out;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    text-align:center;
  }
  .fade-slide.active{ opacity:1; z-index:1; }

  .fade-slide .content{
    background:rgba(0,0,0,0.5);
    padding:20px;
    border-radius:10px;
  }
  .fade-slide h2{margin-bottom:10px;font-size:28px}
  .fade-slide p{margin:0;font-size:16px}
  
  /* dots */
  .fade-dots{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex; gap:8px;
  }
  .fade-dots button{
     width:9px;height:9px;border-radius:999px;background:#ffffff40;border:1px solid #ffffff80;cursor:pointer
   
  }
  /* .fade-dots button.active{background:#fff} */
  /* .fade-slide{
      position:relative;overflow:hidden;isolation:isolate;background:#0b0d12;
    }
    .fade-slide{
      display:flex;transition:transform var(--speed) ease;will-change:transform;
    }
    .fade-slide{
      position:relative;min-width:100%;height:var(--slide-h);display:grid;place-items:center;
    } */
    .fade-slide img.bg{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);
    }
    .fade-slide .content{
      position:relative;z-index:1;max-width:min(90%, 1100px);margin:auto;display:grid;gap:10px;
      text-align:left;
    }
    .badge{
      display:inline-block;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
      padding:.35rem .7rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.8rem
    }
     .fade-slider h2{margin:.2rem 0;font-size:clamp(1.6rem, 4vw, 3rem);line-height:1.1}
    .fade-slider p{margin:0;max-width:65ch;opacity:.9}
    .cta{
      margin-top:.8rem;display:inline-flex;gap:.6rem;align-items:center;
      padding:.7rem 1rem;border-radius:12px;background:#ffffff14;border:1px solid #ffffff30;
      text-decoration:none;color:#fff;transition:transform .15s ease, background .2s ease;
    }
    .cta:hover{transform:translateY(-2px);background:#ffffff22}
    /* arrows */
    .nav{
      position:absolute;inset:0;pointer-events:none
    }
    .btn{
      pointer-events:auto;position:absolute;top:50%;translate:0 -50%;
      border:none;background:#ffffff20;border:1px solid #ffffff35;color:#fff;width:44px;height:44px;
      border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:background .2s ease;
    }
    .btn:hover{background:#ffffff35}
    .prev{left:12px}
    .next{right:12px}
    /* dots */
    .dots{
      position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:8px
    }
    .dot{
      width:9px;height:9px;border-radius:999px;background:#ffffff40;border:1px solid #ffffff80;cursor:pointer
    }
    .fade-dots button.active{background:#fff}
    /* responsive height */
    @media (max-width: 860px){
      :root{--slide-h: 64vh}
      .fade-slide .content{text-align:left}
    }
    @media (max-width: 520px){
      :root{--slide-h: 64vh}
      .btn{width:40px;height:40px}
    }
    /* reduce motion */
    @media (prefers-reduced-motion: reduce){
      .slides{transition:none}
    }