/* =========================================
   INDEPENDENCE DAY 2026
========================================= */

.custom-swiper-dots{
    bottom: 15%;
}

.banner_independence{
    position: relative;
    min-height: clamp(680px, 85vh, 850px);
    overflow: hidden !important;
    padding: clamp(95px, 8vw, 130px) 0 90px !important;
    z-index: 0;
}


/* =========================================
   BACKGROUND
========================================= */

.independence-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.banner_independence .container{
    position: relative;
    z-index: 2;
}

.independence-content{
    position: relative;
    width: 100%;
    text-align: center;
}


/* =========================================
   HEADING
========================================= */

.independence-heading{
    position: relative;
    z-index: 5;
}

.happy-text{
    opacity: 0;
    transform: translateY(-30px);
    animation: independenceFadeTop .9s ease .2s forwards;
}

.happy-text img{
    display: block;
    width: clamp(90px, 9vw, 145px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.independence-text{
    margin-top: 0;
}

.independence-text img{
    display: block;
    width: clamp(320px, 37vw, 570px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;

    opacity: 0;
    transform: translateY(-60px);

    animation: independenceTitle 1s ease .8s forwards;
}

.independence-date{
    margin-top: 8px;

    opacity: 0;
    transform: translateY(15px);

    animation: independenceFadeUp 1s ease 1s forwards;
}

.independence-date img{
    width: clamp(130px, 15vw, 220px);
    max-width: 100%;
    height: auto;
}


/* =========================================
   MAIN ARTWORK
========================================= */

.independence-art{
    position: relative;

    width: min(850px, 78vw);

    margin: -5px auto 0;

    /* enough space for Chakra + fort */
    min-height: clamp(330px, 35vw, 455px);
}


/* =========================================
   ASHOKA CHAKRA
========================================= */

.chakra-img{
    position: absolute;

    width: clamp(150px, 17vw, 235px);
    height: auto;

    left: 50%;
    top: 10%;

    opacity: 0;

    z-index: 0;

    transform: translateX(-50%) scale(.7);

    animation:
        chakraReveal 1.1s ease 1.1s forwards,
        chakraRotate 30s linear 2.2s infinite;
}


/* =========================================
   CLOUDS
========================================= */

.clouds{
    position: absolute;

    width: 90%;
    max-width: 730px;
    height: auto;

    left: 50%;
    bottom: 22%;

    opacity: 0;

    z-index: 0;

    transform: translate(-50%, 50px);

    animation: monumentReveal 1.1s ease 1.15s forwards;
}


/* =========================================
   FORT WRAPPER
   IMPORTANT:
   Flag is locked to this wrapper
========================================= */

.fort-wrap{
    position: absolute;

    width: 100%;
    max-width: 730px;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%) translateY(60px);

    opacity: 0;

    z-index: 3;

    animation: fortReveal 1.1s ease 1.2s forwards;
}


/* =========================================
   FORT IMAGE
========================================= */

.monuments-img{
    position: relative;

    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    margin: 0;

    opacity: 1;

    z-index: 3;

    transform: none;

    animation: none;
}


/* =========================================
   FLAG
   Locked relative to fort image
========================================= */

.flag-gif{
    position: absolute;

    /*
       These are relative to fort-wrap.
       Once desktop alignment is correct,
       DO NOT change them in media queries.
    */

    width: 20%;

    left: 51%;
    bottom: 67%;

    height: auto;

    opacity: 0;

    z-index: 1;

    transform: translateX(-15%);

    animation: flagFade 1.3s ease 1.8s forwards;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes independenceFadeTop{

    to{
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes independenceTitle{

    to{
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes independenceFadeUp{

    to{
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes chakraReveal{

    to{
        opacity: .22;

        transform:
            translateX(-50%)
            scale(1);
    }

}


@keyframes chakraRotate{

    from{
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    to{
        transform:
            translateX(-50%)
            rotate(360deg);
    }

}


@keyframes monumentReveal{

    to{
        opacity: 1;

        transform:
            translate(-50%, 0);
    }

}


@keyframes fortReveal{

    to{
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }

}


@keyframes flagFade{

    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }

}


/* =========================================
   LAPTOP / SMALL DESKTOP
========================================= */

@media (max-width:1199px){

    .banner_independence{
        min-height: 690px;
        padding: 105px 0 80px !important;
    }

    .independence-art{
        width: min(780px, 82vw);
        min-height: 390px;
    }

    .chakra-img{
        width: 200px;
        top: 10%;
    }

    .clouds{
        width: 90%;
        bottom: 22%;
    }

    /*
       IMPORTANT:
       No flag left/bottom changes here
    */
}


/* =========================================
   TABLET
========================================= */

@media (max-width:991px){

    .banner_independence{
        min-height: 650px;
        padding: 100px 0 70px !important;
    }

    .happy-text img{
        width: 105px;
    }

    .independence-text img{
        width: min(470px, 70vw);
    }

    .independence-date img{
        width: 165px;
    }

    .independence-art{
        width: min(700px, 90vw);
        min-height: 360px;
        margin-top: 5px;
    }

    .chakra-img{
        width: 175px;
        top: 11%;
    }

    .clouds{
        width: 90%;
        bottom: 20%;
    }

    .fort-wrap{
        width: 100%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:767px){

    .banner_independence{
        min-height: 520px;
        padding: 78px 0 45px !important;
    }

    .independence-heading{
        margin-top: 10%;
    }

    .happy-text img{
        width: 75px;
    }

    .independence-text img{
        width: min(330px, 88vw);
    }

    .independence-date{
        margin-top: 5px;
    }

    .independence-date img{
        width: 120px;
    }

    .independence-art{
        width: 92vw;
        min-height: 330px;
        margin-top: 0;
    }

    .chakra-img{
        width: 190px;
        top: 8%;
    }

    .clouds{
        width: 95%;
        bottom: 20%;
    }

    .fort-wrap{
        width: 100%;
        max-width: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width:480px){

    .banner_independence{
        min-height: 500px;
        padding: 70px 0 35px !important;
    }

    .independence-heading{
        margin-top: 18%;
    }

    .happy-text img{
        width: 65px;
    }

    .independence-text img{
        width: 88vw;
    }

    .independence-date img{
        width: 105px;
    }

    .independence-art{
        width: 105vw;

        min-height: 340px;

        margin-left: 50%;

        transform: translateX(-50%);
    }

    .chakra-img{
        width: 220px;
        top: 5%;
    }

    .clouds{
        width: 100%;
        bottom: 18%;
    }

    .fort-wrap{
        width: 100%;
        max-width: none;
    }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width:360px){

    .banner_independence{
        min-height: 470px;
        padding: 65px 0 30px !important;
    }

    .independence-heading{
        margin-top: 18%;
    }

    .happy-text img{
        width: 58px;
    }

    .independence-text img{
        width: 92vw;
    }

    .independence-date img{
        width: 95px;
    }

    .independence-art{
        width: 108vw;
        min-height: 310px;
    }

    .chakra-img{
        width: 195px;
    }

    .clouds{
        width: 100%;
    }

}

/* =========================================================
   SIRI INNOVATIONS — DIWALI 2026 FESTIVAL BANNER
   Asset paths match the user's existing diwali-2026 folders.
   ========================================================= */
.banner_diwali_2026{position:relative;min-height:0;padding:0!important;overflow:hidden!important;background:#fff7f5;isolation:isolate}
.banner_diwali_2026 .diwali-stage{position:relative;width:100%;height:clamp(750px,42vw,810px);min-height:830px;overflow:hidden;isolation:isolate;background:#fff5f2}
.banner_diwali_2026 .diwali-scene-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}

/* Greeting: match the approved left-side circular composition */
.banner_diwali_2026 .diwali-greeting{position:absolute;z-index:5;left:7.2%;top:17.5%;width:min(30%,570px);aspect-ratio:684/667}
.banner_diwali_2026 .diwali-greeting img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.banner_diwali_2026 .diwali-greeting-frame {
    z-index: 1;
    transform-origin: 50% 50%;
    animation: diwali-frame-rotate 75s linear 1s infinite;
}

.banner_diwali_2026 .diwali-greeting-happy {
    z-index: 2;
    animation: diwali-greeting-happy 1s cubic-bezier(.2,.75,.25,1) 2s both;
}

.banner_diwali_2026 .diwali-greeting-title {
    z-index: 3;
    animation: diwali-greeting-title 1.15s cubic-bezier(.16,1,.3,1) 2s both;
}

.banner_diwali_2026 .diwali-greeting-divider {
    z-index: 4;
    animation: diwali-greeting-fade .8s ease 2.15s both;
}

.banner_diwali_2026 .diwali-greeting-quote {
    z-index: 5;
    animation: diwali-greeting-quote 1s ease 3.35s both;
}
@keyframes diwali-frame-rotate{to{transform:rotate(360deg)}}
@keyframes diwali-greeting-happy{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
@keyframes diwali-greeting-title{from{opacity:0;transform:translateY(28px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes diwali-greeting-fade{from{opacity:0}to{opacity:1}}
@keyframes diwali-greeting-quote{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Four family cut-outs: adults behind, children in front, as in approved artwork */
.banner_diwali_2026 .diwali-family{position:absolute;z-index:6;inset:0;pointer-events:none; bottom: 7%}
.banner_diwali_2026 .diwali-character{position:absolute;bottom:5%;display:block;transform-origin:50% 88%;animation:diwali-character-sway 6.2s ease-in-out infinite}
.banner_diwali_2026 .diwali-character img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.banner_diwali_2026 .diwali-character .character-open{z-index:1;opacity:1}
.banner_diwali_2026 .diwali-character .character-blink{z-index:2;opacity:0;animation:diwali-eye-blink 5.2s linear infinite}
.banner_diwali_2026 .diwali-father{left:38.5%;bottom:6%;width:22%;height:70%;z-index:1;animation-delay:-.8s}
.banner_diwali_2026 .diwali-mother{left:57.5%;bottom:6%;width:19%;height:68%;z-index:1;animation-delay:-2.1s}
.banner_diwali_2026 .diwali-boy{left:36%;bottom:5%;width:21%;height:48%;z-index:3;animation-delay:-1.4s}
.banner_diwali_2026 .diwali-girl{left:65%;bottom:5%;width:21%;height:52%;z-index:4;animation-delay:-3s}
.banner_diwali_2026 .diwali-father .character-blink{animation-delay:1.2s}
.banner_diwali_2026 .diwali-mother .character-blink{animation-delay:3.1s}
.banner_diwali_2026 .diwali-boy .character-blink{animation-delay:.4s}
.banner_diwali_2026 .diwali-girl .character-blink{animation-delay:2.2s}
@keyframes diwali-eye-blink{0%,91%,94%,100%{opacity:0}92%,93%{opacity:1}}
@keyframes diwali-character-sway{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-4px) rotate(.3deg)}}

/* Firework bursts use the existing burst PNGs in the fireworks folder */
.banner_diwali_2026 .diwali-fireworks{position:absolute;z-index:4;inset:0;pointer-events:none}
.banner_diwali_2026 .diwali-burst{position:absolute;width:clamp(55px,7.5vw,125px);height:auto;opacity:0;animation:diwali-firework-burst 3.4s ease-out infinite}
.banner_diwali_2026 .diwali-burst-one{left:48%;top:10%;animation-delay:.2s}
.banner_diwali_2026 .diwali-burst-two{left:62%;top:8%;animation-delay:1.35s}
.banner_diwali_2026 .diwali-burst-three{left:55%;top:22%;width:clamp(42px,5.8vw,88px);animation-delay:2.25s}
.banner_diwali_2026 .diwali-star-sparkles{position:absolute;left:66%;top:28%;width:clamp(45px,5.5vw,90px);height:auto;opacity:0;animation:diwali-stars-twinkle 2.4s ease-in-out 1s infinite}
@keyframes diwali-firework-burst{0%{opacity:0;transform:scale(.15) rotate(-12deg)}12%{opacity:1}58%{opacity:.9;transform:scale(1.08) rotate(8deg)}100%{opacity:0;transform:scale(1.35) rotate(20deg)}}
@keyframes diwali-stars-twinkle{0%,100%{opacity:0;transform:scale(.65)}45%,65%{opacity:.95;transform:scale(1)}}

/* Chichu buddi: four real stages from the chichu-buddi folder */
.banner_diwali_2026 .diwali-chichu{position:absolute;z-index:8;left:57.5%;bottom:4%;width:clamp(45px,2.5vw,119px);height:clamp(165px,23vw,330px);pointer-events:none}
.banner_diwali_2026 .diwali-chichu img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.banner_diwali_2026 .chichu-unlit{z-index:1;opacity:1;animation:chichu-unlit-cycle 6s linear infinite}
.banner_diwali_2026 .chichu-ignition{z-index:2;opacity:0;animation:chichu-ignition-cycle 6s linear infinite}
.banner_diwali_2026 .chichu-small-fountain{z-index:3;opacity:0;animation:chichu-small-cycle 6s ease-out infinite}
.banner_diwali_2026 .chichu-fountain{z-index:4;opacity:0;animation:chichu-full-cycle 6s ease-out infinite}
@keyframes chichu-unlit-cycle{0%,14%{opacity:1}18%,100%{opacity:1}}
@keyframes chichu-ignition-cycle{0%,14%{opacity:0}17%,25%{opacity:1}29%,100%{opacity:0}}
@keyframes chichu-small-cycle{0%,24%{opacity:0;transform:scale(.88)}30%,43%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.04)}}
@keyframes chichu-full-cycle{0%,40%{opacity:0;transform:scale(.9)}48%,78%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1.05)}}
/* Hand Spark Effects */
.hand-spark {
    position: absolute;
    width: 55px;
    height: 55px;
    pointer-events: none;
    z-index: 10;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0%, #fff9a6 8%, #ffb300 20%, transparent 65%);
    animation: handSparkFlicker 0.35s infinite alternate;
}

.boy-hand-spark {
        left: 87%;
    bottom: 46%;
}

.girl-hand-spark {
      left: -4%;
    bottom: 43%;
}

@keyframes handSparkFlicker {
    0% {
        transform: scale(0.65);
        opacity: 0.65;
        filter: brightness(1);
    }
    100% {
        transform: scale(1.25);
        opacity: 1;
        filter: brightness(1.8);
    }
}

.banner_diwali_2026 .diwali-diya-glow {
    position: absolute;
    z-index: 5;
    width: 12px;
    height: 35px;
    border-radius: 75% 10% 70% 10%;

    background: radial-gradient(
        ellipse at 65% 65%,
        #fff 0 8%,
        #fff8b2 25%,
        #ffb21d 62%,
        #f15a24 100%
    );

    filter:
        drop-shadow(0 0 6px #ffb21d)
        drop-shadow(0 0 13px rgba(255,145,0,.65));

    transform: rotate(0deg);
    transform-origin: 50% 100%;

    animation: diwali-diya-flicker 0.1s ease-in-out infinite alternate;
}

.banner_diwali_2026 .diya-glow-one {
    left: 5.2%;
    bottom: 16.2%;
    animation-duration: .65s;
    animation-delay: -.2s;
}

.banner_diwali_2026 .diya-glow-two {
    left: 13.4%;
    bottom: 21%;
    animation-duration: 1.05s;
    animation-delay: -.7s;
}

.banner_diwali_2026 .diya-glow-three {
    left: 5.3%;
    bottom: 40%;
    animation-duration: .75s;
    animation-delay: -.35s;
}

.banner_diwali_2026 .diya-glow-four {
    right: 7.5%;
    bottom: 18%;
    animation-duration: 1.2s;
    animation-delay: -.9s;
}

@keyframes diwali-diya-flicker {
    0% {
        opacity: .75;
        transform: rotate(0deg) scale(.92, .96);
    }
    35% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05, 1.12);
    }
    70% {
        opacity: .85;
        transform: rotate(0deg) scale(.96, 1.04);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1.08, 1.15);
    }
}
/* Glow on the hanging lanterns and roof lights already included in bg.jpg */
.banner_diwali_2026 .diwali-lantern-light{position:absolute;z-index:3;width:clamp(35px,5vw,72px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,245,154,.65) 0 12%,rgba(255,174,36,.24) 35%,transparent 72%);filter:blur(5px);animation:diwali-lantern-blink 1.9s ease-in-out infinite alternate;pointer-events:none}
.banner_diwali_2026 .lantern-light-left{left:2.2%;top:5%}
.banner_diwali_2026 .lantern-light-right{right:3.2%;top:7%;animation-delay:-.9s}
.banner_diwali_2026 .diwali-fairy-light-glow{position:absolute;z-index:3;top:3.2%;right:5%;width:20%;height:11%;background:radial-gradient(ellipse,rgba(255,220,91,.22),transparent 68%);animation:diwali-lantern-blink 1.35s ease-in-out infinite alternate;pointer-events:none}
@keyframes diwali-lantern-blink{from{opacity:.45;filter:brightness(.9) blur(5px)}to{opacity:1;filter:brightness(1.35) blur(8px)}}

/* Tablet */
@media(max-width:1199px){
 .banner_diwali_2026 .diwali-stage{height:clamp(600px,55vw,720px);min-height:600px}
 .banner_diwali_2026 .diwali-greeting{left:5%;top:7%;width:33%}
 .banner_diwali_2026 .diwali-father{left:36%;width:24%;height:68%}
 .banner_diwali_2026 .diwali-mother{left:57%;width:25%;height:68%}
 .banner_diwali_2026 .diwali-boy{left:37%;width:22%;height:47%}
 .banner_diwali_2026 .diwali-girl{left:73%;width:24%;height:51%}
 .banner_diwali_2026 .diwali-chichu{left:64%;width:7.5%}
 .banner_diwali_2026 .diwali-kakara{left:76%;top:61%}
}

/* Mobile: keep greeting above the family; no desktop overlap */
@media(max-width:767px){
 .banner_diwali_2026 .diwali-stage{height:780px;min-height:780px}
 .banner_diwali_2026 .diwali-scene-bg{object-fit:cover;object-position:51% center}
 .banner_diwali_2026 .diwali-greeting{left:50%;top:4%;width:min(62vw,330px);transform:translateX(-50%)}
 .banner_diwali_2026 .diwali-family{top:0}
 .banner_diwali_2026 .diwali-character{bottom:3%}
 .banner_diwali_2026 .diwali-father{left:5%;bottom:15%;width:36%;height:39%}
 .banner_diwali_2026 .diwali-mother{left:57%;bottom:15%;width:37%;height:39%}
 .banner_diwali_2026 .diwali-boy{left:22%;bottom:1%;width:33%;height:31%}
 .banner_diwali_2026 .diwali-girl{left:62%;bottom:1%;width:34%;height:33%}
 .banner_diwali_2026 .diwali-burst-one{left:8%;top:42%;width:48px}
 .banner_diwali_2026 .diwali-burst-two{left:76%;top:40%;width:48px}
 .banner_diwali_2026 .diwali-burst-three{left:48%;top:45%;width:38px}
 .banner_diwali_2026 .diwali-star-sparkles{left:72%;top:47%;width:42px}
 .banner_diwali_2026 .diwali-chichu{left:83%;bottom:4%;width:52px;height:155px}
 .banner_diwali_2026 .diwali-kakara{left:75%;top:65%;width:70px;height:125px}
 .banner_diwali_2026 .diwali-diya-glow{width:8px;height:16px}
 .banner_diwali_2026 .diya-glow-one{left:7%;bottom:20%}
 .banner_diwali_2026 .diya-glow-two{left:20%;bottom:17%}
 .banner_diwali_2026 .diya-glow-three{left:46%;bottom:12%}
 .banner_diwali_2026 .diya-glow-four{right:7%;bottom:18%}
 .banner_diwali_2026 .diwali-lantern-light{width:40px}
}
@media(max-width:420px){
 .banner_diwali_2026 .diwali-stage{height:720px;min-height:720px}
 .banner_diwali_2026 .diwali-greeting{top:4%;width:66vw}
 .banner_diwali_2026 .diwali-father{left:4%;bottom:15%;width:37%;height:37%}
 .banner_diwali_2026 .diwali-mother{left:57%;bottom:15%;width:38%;height:37%}
 .banner_diwali_2026 .diwali-boy{left:22%;bottom:1%;width:34%;height:30%}
 .banner_diwali_2026 .diwali-girl{left:62%;bottom:1%;width:35%;height:31%}
 .banner_diwali_2026 .diwali-chichu{left:43%;bottom:-4%;width:46px;height:138px}
 .banner_diwali_2026 .diwali-kakara{left:75%;top:66%;width:62px;height:112px}
}

/* Respect visitors who prefer reduced motion */
@media(prefers-reduced-motion:reduce){
 .banner_diwali_2026 *,.banner_diwali_2026 *::before,.banner_diwali_2026 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
/* =====================================
   DIWALI 2026 - MOBILE RESPONSIVE FIX
===================================== */

@media (max-width: 767px) {

    .banner_diwali_2026 {
        overflow: hidden;
    }

    .banner_diwali_2026 .diwali-stage {
        position: relative;
        width: 100%;
        height: calc(100svh - 115px);
        min-height: 430px;
        max-height: 620px;
        overflow: hidden;
    }

    /* Background */
    .banner_diwali_2026 .diwali-scene-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* Greeting Circle */
    .banner_diwali_2026 .diwali-greeting {
        position: absolute;
        width: 62%;
        max-width: 300px;
        left: 50%;
        top: 5%;
        transform: translateX(-50%);
        z-index: 6;
    }

    /* Family */
    .banner_diwali_2026 .diwali-family {
        position: absolute;
        width: 100%;
        height: 58%;
        left: 0;
        bottom: 0;
        z-index: 8;
    }

    .banner_diwali_2026 .diwali-character {
        position: absolute;
        bottom: 0;
        height: 100%;
    }

    .banner_diwali_2026 .diwali-character img {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
    }

    /* Father */
    .banner_diwali_2026 .diwali-father {
        left: 17%;
        width: 37%;
        z-index: 1;
    }

    /* Mother */
    .banner_diwali_2026 .diwali-mother {
        left: 48%;
        width: 34%;
        z-index: 2;
    }

    /* Boy */
    .banner_diwali_2026 .diwali-boy {
        left: 3%;
        width: 37%;
        z-index: 3;
    }

    /* Girl */
    .banner_diwali_2026 .diwali-girl {
        right: 0;
        width: 37%;
        z-index: 4;
         
    }
    .banner_diwali_2026 .diwali-girl .girl-hand-spark {
                left: -14%;
        bottom: 8%;
    }

    /* Hand Sparks */
    .banner_diwali_2026 .hand-spark {
        transform: scale(.7);
        left: 80%;
        bottom: 10%;
    }

    /* Fireworks */
    .banner_diwali_2026 .diwali-fireworks {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
                top: -40%;
    }

    .banner_diwali_2026 .diwali-burst {
        max-width: 65px;
    }
}

/* ==========================================
   DIWALI 2026 - RESPONSIVE REFINEMENTS
   Existing desktop and small mobile untouched
========================================== */



/* Tablet Landscape */
@media (min-width: 1025px) and (max-width: 1200px) {

    .banner_diwali_2026 .diwali-greeting {
        width: 31%;
        left: 5%;
    }

    .banner_diwali_2026 .diwali-family {
        width: 58%;
        right: 2%;
    }
}

/* ==========================================
   TABLET: 768px - 1024px
========================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    .banner_diwali_2026 .diwali-stage {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }

    .banner_diwali_2026 .diwali-greeting {
        width: 34%;
        max-width: 350px;
        left: 5%;
        top: 10%;
    }

    .banner_diwali_2026 .diwali-family {
        width: 66%;
        height: 72%;
        right: 0;
        left: auto;
        bottom: 0;
    }

    .banner_diwali_2026 .diwali-father {
        left: 15%;
        width: 38%;
    }

    .banner_diwali_2026 .diwali-mother {
        left: 46%;
        width: 40%;
    }

    .banner_diwali_2026 .diwali-boy {
        left: 0;
        width: 38%;
    }

    .banner_diwali_2026 .diwali-girl {
        right: 0;
        width: 38%;
    }
}

/* Large Mobile: 576px - 767px */
@media (min-width: 576px) and (max-width: 767px) {

    .banner_diwali_2026 .diwali-stage {
        height: 570px;
        min-height: 570px;
        max-height: 570px;
    }

    .banner_diwali_2026 .diwali-greeting {
        width: 43%;
        max-width: 290px;
        left: 7%;
        top: 7%;
        transform: none;
    }

    .banner_diwali_2026 .diwali-family {
        width: 65%;
        height: 65%;
        right: 0;
        left: auto;
        bottom: 0;
    }
}


/* Medium Mobile: 401px - 575px */
@media (min-width: 401px) and (max-width: 575px) {

    .banner_diwali_2026 .diwali-stage {
        height: 540px;
        min-height: 540px;
        max-height: 540px;
    }

    .banner_diwali_2026 .diwali-greeting {
        width: 57%;
        max-width: 270px;
        left: 50%;
        top: 3%;
        transform: translateX(-50%);
    }

    .banner_diwali_2026 .diwali-family {
                height: 87%;
        bottom: 0;
    }

    .banner_diwali_2026 .diwali-father {
        left: 17%;
        width: 36%;
    }

    .banner_diwali_2026 .diwali-mother {
        left: 47%;
        width: 38%;
    }

    .banner_diwali_2026 .diwali-boy {
        left: 2%;
        width: 36%;
    }

    .banner_diwali_2026 .diwali-girl {
        right: 0;
        width: 36%;
    }

    .banner_diwali_2026 .diwali-fireworks {
        pointer-events: none;
    }
}


/* Small Mobile */
@media (max-width: 400px) {

    .banner_diwali_2026 .diwali-stage {
        min-height: 430px;
    }

    .banner_diwali_2026 .diwali-greeting {
        width: 70%;
        top: 16%;
    }

    .banner_diwali_2026 .diwali-family {
        height: 93%;
    }

}