:root{
    --accent:#c9962e;
    --dark:#1c1c1c;
  }
 
  * { box-sizing: border-box; }
 
  .sb-slideshow{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    background: #000;
    font-family: "Segoe UI", "Noto Sans Devanagari", sans-serif;
  }
 
  /* fallback height until JS calculates the real poster ratio */
  .sb-slideshow{ aspect-ratio: 16 / 9; }
 
  .sb-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
  }
 
  .sb-slide.active{
    opacity: 1;
    pointer-events: auto;
  }
 
  .sb-slide a{
    display:block;
    width: 100%;
    height: 100%;
  }
 
  .sb-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
 
  /* subtle bottom gradient so dots/arrows are always readable */
  .sb-slide::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
    pointer-events:none;
  }
 
  /* Prev / Next arrows */
  .sb-arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(28,28,28,0.55);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 20px;
    line-height:1;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s ease;
    user-select:none;
  }
 
  .sb-arrow:hover{ background: var(--accent); border-color: var(--accent); }
  .sb-arrow.prev{ left: 16px; }
  .sb-arrow.next{ right: 16px; }
 
  /* Dot indicators */
  .sb-dots{
    position:absolute;
    left:0; right:0;
    bottom: 14px;
    display:flex;
    justify-content:center;
    gap: 8px;
    z-index: 5;
  }
 
  .sb-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
 
  .sb-dot.active{
    background: var(--accent);
    transform: scale(1.2);
  }
 
  /* Thin accent progress line under the whole slideshow (classic touch) */
  .sb-slideshow::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height: 4px;
    background: var(--accent);
    z-index: 6;
  }
 
  @media (max-width: 600px){
    .sb-slideshow{ border-radius: 6px; }
    .sb-arrow{ width: 34px; height: 34px; font-size: 16px; }
  }