/* Sab kuch is .wps-slider wrapper ke andar hi scoped hai — kahin bhi
     global body/*, font-family ya reserved-naam variable use nahi kiya gaya,
     isliye ye baaki site (navbar/menu) ko touch nahi karega. */
  .wps-slider{
    --wps-gold:#c9a96e;
    --wps-gold2:#e2c48a;
    --wps-cream:#f5f0e8;
    --wps-black:#0c0a08;
    --wps-muted:rgba(245,240,232,.62);
    --wps-border:rgba(201,169,110,.18);
    font-family:'Segoe UI',Arial,sans-serif;
  }
  .wps-slider, .wps-slider *{box-sizing:border-box; margin:0; padding:0}

  /* ============ SLIDER ============ */
  .wps-slider{
    position:relative;
    width:100%;
    height:100vh;
    min-height:560px;
    overflow:hidden;
    background:#000;
  }

  .wps-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.12);
    transition:opacity 1.4s ease, transform 8s ease;
    background-size:cover;
    background-position:center;
  }
  .wps-slide.active{
    opacity:1;
    transform:scale(1);
    z-index:1;
  }

  /* Har slide me PEHLE apni real photo ka local path likhein (./assets/images/slider/slide-X.jpg),
     wahi upar dikhegi. Abhi demo ke liye placeholder photo layer bhi lagi hai — jab aap apna real
     path daalenge (aur file wahan maujood hogi) to wahi automatically upar dikhne lagegi. */
  /*.wps-slide:nth-child(1){background-image:linear-gradient(135deg,rgba(58,13,16,.35),rgba(21,6,7,.55)), url('./assets/images/slider/slide-1.jpg'), url('./home/wedding-photographers-in-india.png')}*/
  /*.wps-slide:nth-child(2){background-image:linear-gradient(135deg,rgba(43,26,5,.35),rgba(16,10,2,.55)), url('./assets/images/slider/slide-2.jpg'), url('./home/best-wedding-photographers-in-india.png')}*/
  .wps-slide:nth-child(3){background-image:linear-gradient(135deg,rgba(14,26,28,.35),rgba(5,11,12,.55)), url('./assets/images/slider/slide-3.jpg'), url('./home/top-wedding-photographers-in-india.png')}
  .wps-slide:nth-child(4){background-image:linear-gradient(135deg,rgba(36,18,38,.35),rgba(10,5,11,.55)), url('./assets/images/slider/slide-4.jpg'), url('./home/wedding-photographers-in-indiano1.png')}

  .wps-slide::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 100%),
               linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 30%);
  }

  /* ============ CONTENT ============ */
  .wps-content{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 clamp(24px,6vw,90px);
    max-width:800px;
  }

  .wps-eyebrow{
    font-size:11px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--wps-gold);
    margin-bottom:22px;
    opacity:0;
    animation:fadeUp .9s ease .3s forwards;
  }

  .wps-h1{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(38px,7vw,84px);
    font-weight:500;
    line-height:1.05;
    color:var(--wps-cream);
    margin-bottom:26px;
    opacity:0;
    animation:fadeUp 1s ease .5s forwards;
  }
  .wps-h1 em{
    font-style:italic;
    color:var(--wps-gold2);
    font-weight:400;
  }

  .wps-sub{
    font-size:clamp(14px,1.6vw,17px);
    line-height:1.8;
    color:var(--wps-muted);
    max-width:480px;
    margin-bottom:38px;
    opacity:0;
    animation:fadeUp 1s ease .7s forwards;
  }

  .wps-btns{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
    opacity:0;
    animation:fadeUp 1s ease .9s forwards;
  }

  .wps-btn-fill{
    background:var(--wps-gold);
    color:#1a1206;
    border:none;
    padding:16px 34px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600;
    cursor:pointer;
    transition:background .3s, transform .3s;
  }
  .wps-btn-fill:hover{background:var(--wps-gold2); transform:translateY(-2px)}

  .wps-btn-outline{
    background:transparent;
    border:1px solid rgba(245,240,232,.35);
    color:var(--wps-cream);
    padding:15px 30px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    cursor:pointer;
    transition:border-color .3s, color .3s;
  }
  .wps-btn-outline:hover{border-color:var(--wps-gold); color:var(--wps-gold)}

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(18px)}
    to{opacity:1; transform:translateY(0)}
  }

  /* ============ STATS (desktop only) ============ */
  .wps-stats{
    position:absolute;
    right:clamp(24px,5vw,70px);
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:34px;
    text-align:right;
  }
  .wps-stat-n{
    font-family:'Playfair Display',Georgia,serif;
    font-size:26px;
    color:var(--wps-gold2);
  }
  .wps-stat-l{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wps-muted);
    margin-top:2px;
  }

  /* ============ ARROWS ============ */
  .wps-arrow{
    position:absolute;
    top:50%;
    left:auto;
    transform:translateY(-50%);
    z-index:6;
    width:48px;height:48px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(245,240,232,.25);
    background:rgba(0,0,0,.25);
    color:var(--wps-cream);
    cursor:pointer;
    backdrop-filter:blur(4px);
    transition:border-color .3s,background .3s;
    display:grid;
    place-items:center;
  }
  .wps-arrow svg{
    width:16px;height:16px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .wps-arrow:hover{border-color:var(--wps-gold); background:rgba(0,0,0,.5)}
  .wps-prev{left:24px}
  .wps-next{right:24px}

  /* ============ DOTS ============ */
  .wps-dots{
    position:absolute;
    bottom:110px;
    left:clamp(24px,6vw,90px);
    z-index:6;
    display:flex;
    gap:10px;
  }
  .wps-dot{
    width:34px;height:2px;
    background:rgba(245,240,232,.28);
    cursor:pointer;
    position:relative;
    overflow:hidden;
  }
  .wps-dot::after{
    content:'';
    position:absolute; inset:0;
    background:var(--wps-gold);
    transform:scaleX(0);
    transform-origin:left;
  }
  .wps-dot.active::after{
    transform:scaleX(1);
    transition:transform 5.5s linear;
  }

  /* ============ SCROLL HINT ============ */
  .wps-scroll{
    position:absolute;
    bottom:34px;
    left:clamp(24px,6vw,90px);
    z-index:6;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--wps-muted);
  }
  .wps-scroll-line{
    width:1px;height:32px;
    background:linear-gradient(var(--wps-gold), transparent);
  }

  /* ============ COUNTER ============ */
  .wps-counter{
    position:absolute;
    bottom:34px;
    right:clamp(24px,6vw,90px);
    z-index:6;
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Playfair Display',Georgia,serif;
    color:var(--wps-muted);
    font-size:13px;
  }
  .wps-counter strong{color:var(--wps-gold2); font-size:16px}
  .wps-counter-sep{width:24px;height:1px;background:rgba(245,240,232,.25)}

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .wps-stats{display:none}
  }
  @media (max-width:640px){
    .wps-slider{height:100svh}
    .wps-content{padding:0 20px; max-width:100%}
    .wps-h1{font-size:clamp(32px,10vw,46px)}
    .wps-sub{font-size:14px}
    .wps-btns{gap:12px}
    .wps-btn-fill,.wps-btn-outline{padding:14px 22px; font-size:10px}
    .wps-dots{bottom:88px; left:20px}
    .wps-scroll{display:none}
    .wps-counter{right:20px; bottom:20px}
    .wps-arrow{width:38px;height:38px}
    .wps-arrow svg{width:13px;height:13px}
    .wps-prev{left:12px}
    .wps-next{right:12px}
  }