:root{
    --accent:#c9962e;
    --dark:#1c1c1c;
  }
 
  * { box-sizing: border-box; }
 
  .sb-slideshow{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 2048 / 768;   /* desktop: exact banner ratio, fills perfectly */
    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;
  }
 
  .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%;
    position: relative;
  }
 
  /* Blurred backdrop copy: always fills the whole box, so there is
     never a blank/black gap, even when the main image doesn't
     perfectly match the box's shape on small screens. */
  .sb-slide-bg{
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) brightness(0.55);
    transform: scale(1.15); /* avoids blurred edge transparency */
    z-index: 1;
  }
 
  /* Sharp main image on top: on desktop this covers edge-to-edge
     (ratio matches exactly), on mobile it switches to "contain" so
     the complete banner is always visible, never cropped. */
  .sb-slide-fg{
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    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;
    z-index: 3;
  }
 
  /* 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;
  }
 
  /* MOBILE: shorter box + full image visible (no crop), gap filled
     by the blurred backdrop so it never looks blank. */
  @media (max-width: 600px){
    .sb-slideshow{
      aspect-ratio: 1700 / 620;  /* shorter height than desktop */
      border-radius: 6px;
    }
    .sb-slide-fg{ object-fit: contain; }
    .sb-arrow{ width: 34px; height: 34px; font-size: 16px; }
  }