/* 1 SOLUTION | DIWALI HERO v2  ->  /css/diwali-hero.css */
:root{--dw-pink:#ff4f93;--dw-saf:#ff8a1f;--dw-ease:cubic-bezier(.22,.61,.36,1)}

/* shared: sparkles + string lights */
.dw-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dw-sparkles span{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0,var(--c,#ffd0e4) 40%,transparent 72%);animation:dwFloat var(--d,6s) ease-in-out var(--delay,0s) infinite}
.dw-lights{position:absolute;left:0;right:0;top:0;height:14px;z-index:3;pointer-events:none;overflow:hidden}
.dw-lights::before,.dw-lights::after{content:"";position:absolute;left:0;right:0;top:3px;height:8px;background-repeat:repeat-x;background-size:36px 8px}
.dw-lights::before{background-image:radial-gradient(circle at 6px 4px,#ff6aa5 0 2.2px,rgba(255,106,165,.35) 3px,transparent 4.5px),radial-gradient(circle at 24px 4px,#ff9a3c 0 2.2px,rgba(255,154,60,.35) 3px,transparent 4.5px);animation:dwBlink 2.4s ease-in-out infinite}
.dw-lights::after{background-image:radial-gradient(circle at 15px 4px,#fff 0 2px,rgba(255,255,255,.35) 3px,transparent 4.5px),radial-gradient(circle at 33px 4px,#ffc2dc 0 2px,rgba(255,194,220,.35) 3px,transparent 4.5px);animation:dwBlink 2.4s ease-in-out -1.2s infinite}

/* ================= DESKTOP ================= */
.hero-new.hero-diwali{isolation:isolate;
  background:radial-gradient(55% 90% at 80% 60%,rgba(255,79,147,.34),transparent 65%),radial-gradient(40% 70% at 4% 0,rgba(255,138,31,.16),transparent 70%),linear-gradient(120deg,#12082e 0%,#3a1480 45%,#8a1d6e 100%);
  background-size:100% 100%,100% 100%,170% 170%;animation:dwGrad 16s ease-in-out infinite alternate;
  box-shadow:0 24px 60px rgba(58,20,128,.32)}
.hero-diwali::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,var(--dw-pink),var(--dw-saf),var(--dw-pink),transparent);opacity:.8}
.hero-diwali .dw-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:var(--dw-bg-img,none) center/cover no-repeat;animation:dwDrift 26s ease-in-out infinite alternate;will-change:transform}
.hero-diwali .dw-glow{position:absolute;right:calc(8% - 120px);bottom:-120px;width:520px;height:520px;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,120,170,.38),rgba(255,138,31,.12) 45%,transparent 70%);animation:dwGlow 5s ease-in-out infinite}
.hero-diwali .dw-rangoli{position:absolute;right:calc(8% - 160px);bottom:-150px;width:600px;height:600px;border-radius:50%;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,138,31,.24) 0 5deg,transparent 5deg 15deg),repeating-conic-gradient(from 7.5deg,rgba(255,79,147,.24) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 55%,#000 57% 85%,transparent 100%);mask:radial-gradient(closest-side,transparent 0 55%,#000 57% 85%,transparent 100%);
  animation:dwSpin 80s linear infinite;will-change:transform}
.hero-diwali .dw-rangoli::after{content:"";position:absolute;inset:27%;border-radius:50%;border:2px dotted rgba(255,200,230,.5)}

/* fireworks */
.dw-fw{position:absolute;width:120px;height:120px;z-index:1;pointer-events:none;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(var(--c) 0 3deg,transparent 3deg 22.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 45%,#000 48% 70%,transparent 74%);mask:radial-gradient(closest-side,transparent 0 45%,#000 48% 70%,transparent 74%);
  animation:dwBurst 5s ease-out var(--delay,0s) infinite}

/* lanterns */
.dw-lantern{position:absolute;top:0;z-index:2;pointer-events:none;transform-origin:50% 0;animation:dwSwing 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(255,79,147,.45));will-change:transform}
.dw-lantern i{display:block;width:1.5px;margin:0 auto;height:var(--len,30px);background:linear-gradient(#ffd0e4,#ff8a1f)}
.dw-lantern svg{display:block;width:100%;height:auto}
.dw-l1{left:55%;width:44px;--len:26px;animation-delay:-.8s}
.dw-l2{left:61%;width:34px;--len:62px;animation-delay:-2.4s}
.dw-l3{left:66.5%;width:40px;--len:38px;animation-delay:-3.6s}

/* diyas */
.dw-diya{position:absolute;z-index:2;pointer-events:none}
.dw-diya svg{display:block;width:100%;height:auto;position:relative}
.dw-diya::before{content:"";position:absolute;left:50%;top:-34%;width:150%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,150,80,.55),rgba(255,79,147,.16) 40%,transparent 68%);animation:dwPulse 2.6s ease-in-out infinite}
.dw-flame{transform-box:fill-box;transform-origin:50% 100%;animation:dwFlicker 1.4s ease-in-out infinite}
.dw-d1{left:56%;bottom:18px;width:60px}.dw-d2{left:61.5%;bottom:12px;width:74px}.dw-d3{left:67.5%;bottom:20px;width:52px}
.dw-d2 .dw-flame{animation-delay:-.5s}.dw-d3 .dw-flame{animation-delay:-.9s}

/* content */
.hero-diwali .hero-container{position:relative;z-index:3}
.hero-diwali .hero-left{align-self:center;padding-bottom:6px}
.hero-diwali .hero-logo{height:30px;margin-bottom:22px;display:block}
.hero-diwali .hero-left h1{display:block;font-size:50px;line-height:1.06;margin:0 0 14px;letter-spacing:-.5px;color:#fff;text-shadow:0 4px 22px rgba(255,79,147,.35);animation:dwRise .9s var(--dw-ease) .1s both}
.hero-diwali .hero-left h2 {
    display: block;
    font-size: 45px;
    font-weight: 900;
    line-height: 1.06;
    margin: 0 0 30px;
    letter-spacing: -0.5px;
    color: #fff;
    animation: dwRise .9s var(--dw-ease) .1s both;
}

.hero-diwali .hero-left p{font-size:18px;margin:0 0 5px;color:rgba(255,255,255,.88);animation:dwRise .9s var(--dw-ease) .25s both}
.hero-new.hero-diwali .book-btn,.hero-new.hero-diwali .book-btn:visited{position:relative;overflow:hidden;margin-top:0;padding:10px 25px;font-size:20px;font-weight:800;border-radius:14px;color:#483d8b !important;text-decoration:none;
  background: #fff;
  transition:transform .3s var(--dw-ease),box-shadow .3s var(--dw-ease);animation:dwRise .9s var(--dw-ease) .4s both}
.hero-new.hero-diwali .book-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:dwSweep 3.6s ease-in-out 1.2s infinite}
.hero-new.hero-diwali .book-btn:hover{color:#fff !important;transform:translateY(-3px) scale(1.04);box-shadow:0 18px 42px rgba(255,79,147,.55)}
.hero-diwali .hero-right{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;animation:dwSlide 1s var(--dw-ease) .2s both}
.hero-diwali .hero-right img{height:88%;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 20px 36px rgba(0,0,0,.4));animation:dwBreath 6s ease-in-out 1.2s infinite;will-change:transform}
.hero-diwali .hero-top-right{z-index:6}

@media (max-width:1180px){.dw-l3,.dw-d3{display:none}}
@media (max-width:1000px){.hero-diwali .hero-left h1{font-size:42px}.dw-lantern,.dw-diya,.dw-fw{display:none}}

/* ================= MOBILE (single static image) ================= */
.hero-header{height:auto !important;aspect-ratio:900/500;border-radius:0 0 28px 28px !important;background:#2a0f55;box-shadow:0 18px 40px rgba(90,25,120,.28),0 8px 18px rgba(0,0,0,.08)}
.hero-header .hbc-track{transform:none !important}
.hero-header .hero-bg-slide{height:100%}
.hero-header .hero-bg-slide img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none;transition:none}
.hero-header .hero-bg-carousel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(26,8,59,.5),rgba(26,8,59,0) 45%),radial-gradient(70% 55% at 90% 100%,rgba(255,79,147,.2),transparent 70%)}
.hero-header .hero-bg-carousel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--dw-pink),var(--dw-saf),var(--dw-pink),transparent)}
.hero-header .hbc-dots{display:none !important}
.hero-header .nav-logo img{height:24px;width:auto}
.hero-header .hero-btn{color:#4b1a8a;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.hero-header .dw-sparkles{z-index:2}

/* keyframes */
@keyframes dwSpin{to{transform:rotate(360deg)}}
@keyframes dwSwing{0%,100%{transform:rotate(3.5deg)}50%{transform:rotate(-3.5deg)}}
@keyframes dwFlicker{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.94,1.08) skewX(-3deg)}60%{transform:scale(1.04,.95) skewX(3deg)}}
@keyframes dwPulse{0%,100%{opacity:.65;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
@keyframes dwGlow{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes dwFloat{0%{opacity:0;transform:translateY(8px) scale(.4)}50%{opacity:.95;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-28px) scale(.5)}}
@keyframes dwBlink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes dwSweep{0%{left:-60%}55%,100%{left:130%}}
@keyframes dwRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dwSlide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes dwBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes dwGrad{from{background-position:0 0,0 0,0% 50%}to{background-position:0 0,0 0,100% 50%}}
@keyframes dwDrift{from{transform:scale(1.1) translateX(-2.5%)}to{transform:scale(1.1) translateX(2.5%)}}
@keyframes dwBurst{0%{opacity:0;transform:scale(.2)}12%{opacity:.9}60%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  .hero-diwali,.hero-diwali *,.hero-diwali::after,.hero-header .dw-sparkles span,.dw-lights::before,.dw-lights::after{animation:none !important}
}