*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body{
    overflow-x: clip;
}
.ecard-header{
    background: url('../images/header-background.png') center/cover no-repeat;
    height: 95vh;
    position: relative;
}
.suvobibaho{
    position: absolute;
    width: 27vw;
    top: 4%;
    left: 33%;
    animation-duration: 3s;
}
.names{
    position: absolute;
    width: 27vw;
    top: 25%;
    left: 28%;
    animation-duration: 5s;
}
.dakhshileft{
    position: absolute;
    width: 30vw;
    left: 2.3%;
    top: 29.8%;
    animation: slideFromBottom 4s ease-out;
}
.howrahmid{
    position: absolute;
    width: 57vw;
    top: 14%;
    right: 20%;
    animation: slideFromTop 3s ease-out;
}
.victoriaright{
    position: absolute;
    width: 31.8vw;
    right: -7.8%;
    top: 32%;
    animation: slideFromRight 3s ease-out;
}
.taximiddle{
    position: absolute;
    width: 23vw;
    top: 47%;
    left: 52%;
    animation: slide 2s infinite linear;
}
@keyframes slideFromRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideFromTop {
    0% {
        transform: translateY(-120px);
        opacity: 0;
    }

    60% {
        transform: translateY(15px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideFromBottom {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide{
    25%{
        transform: translateY(-5px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(5px);
    }
}
.sangeet{
    background: url('../images/sangeet-background.png') center/cover no-repeat;
    height: 103vh;
    position: relative;
}
.sangeet-top{
    top: -10%;
}
.lbox1{
    position: absolute;
    width: 7.5vw;
    bottom: 12%;
    right: 0%;
    transform-origin: bottom center;
    animation: zoom 3.5s ease-in-out infinite;
}
.lbox2{
    position: absolute;
    width: 19vw;
    bottom: 0%;
    right: 0%;
}
.rbox{
    position: absolute;
    width: 7.5vw;
    bottom: 12%;
    left: 0%;
    transform-origin: bottom center;
    animation: zoom 3s ease-in-out infinite;
}
.lfig1{
    position: absolute;
    width: 12.7vw;
    bottom: 17%;
    right: 27%;
    z-index: 9;
    animation: slidehori 3s infinite linear;
}
.lfig2{
    position: absolute;
    width: 9.8vw;
    bottom: 17%;
    right: 18%;
}
.lfig3{
    position: absolute;
    width: 11.5vw;
    bottom: 15%;
    right: 8%;
    transform-origin: bottom center;
    animation: swingBottom 4s linear infinite;
}
.lfig4{
    position: absolute;
    width: 12.7vw;
    bottom: 1%;
    right: 21%;
    z-index: 9;
    transform-origin: bottom center;
    animation: swingBottom 5s ease-in-out infinite;
}
.rfig1{
    position: absolute;
    width: 14.8vw;
    bottom: 8%;
    left: 6%;
    transform-origin: bottom center;
    animation: swingBottom 4s linear infinite;
}
.rfig2{
    position: absolute;
    width: 11.5vw;
    bottom: 16%;
    left: 19%;
}
.rfig3{
    position: absolute;
    width: 14.5vw;
    bottom: 1%;
    left: 25%;
    transform-origin: bottom center;
    animation: swingBottom 5s ease-in-out infinite;
}
.fig{
    position: absolute;
    width: 20.5vw;
    top: 28%;
    left: 40%;
    transform-origin: bottom center;
    animation: slideSwing 6s ease-in-out infinite;
}
@keyframes slidehori{
    25%{
        transform: translateX(-10px);
    }
    50%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(10px);
    }
}
@keyframes slideSwing {
    0% {
        transform: translateX(-30px) rotate(-3deg);
    }

    25% {
        transform: translateX(-10px) rotate(2deg);
    }

    50% {
        transform: translateX(30px) rotate(-3deg);
    }

    75% {
        transform: translateX(-10px) rotate(1deg);
    }

    100% {
        transform: translateX(-30px) rotate(-3deg);
    }
}

.aiburobhat{
    background: url(../images/aiburobhat-background.png) center/cover no-repeat;
    position: relative;
    height: 103vh;
}
.aiburobhat-bottom{
     top: -4.5%;
     z-index: 9;
}
.groom{
    position: absolute;
    width: 19vw;
    right: 28%;
    bottom: 17%;
}
.bride{
    position: absolute;
    width: 18vw;
    left: 33%;
    bottom: 17%;
}
.light1{
    position: absolute;
    width: 8vw;
    top: 1%;
    left: 11%;
    transform-origin: top center;
    animation: swingBottom 5s ease-in-out infinite;
}
.light2{
    position: absolute;
    width: 8vw;
    right: 16%;
    top: 1%;
    transform-origin: top center;
    animation: swingBottom 5s ease-in-out infinite;
}
.plate1{
    position: absolute;
    width: 24vw;
    bottom: 4%;
    left: 0%;
}
.plate2{
    position: absolute;
    width: 16.5vw;
    bottom: 5%;
    left: 33.5%;
}
.plate3{
    position: absolute;
    width: 16.5vw;
    bottom: 5%;
    right: 27.5%;
}
.ghoti{
    position: absolute;
    width: 11vw;
    bottom: 15%;
    right: 7%;
}
@keyframes swingBottom {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(-8deg);
    }
    75% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes zoomIn {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    50% { transform: rotate(-1deg); }
    75% { transform: rotate(0.5deg); }
    100% { transform: rotate(0deg); }
}

/* Apply both animations */
.swing-ani{
    transform-origin: bottom center;
    animation: swing 5s ease-in-out infinite;
}

.gayeholud{
    background: url(../images/gayeholud-background.png) center/cover no-repeat;
    position: relative;
    height: 180vh;
}
.gayeholud-bottom{
    bottom: -1%;
}
.leftm{
    position: absolute;
    width: 28vw;
    top: 17%;
    left: 3%;
}
.midm{
    position: absolute;
    width: 38vw;
    top: 15.5%;
    left: 31.5%;
}
.rightm{
    position: absolute;
    width: 28vw;
    top: 18%;
    right: 2.5%;
}
.left-light{
    position: absolute;
    width: 34vw;
    top: 0%;
    left: 0%;
    animation: pulseGlowYellow 2s infinite ease-in-out;
}
.right-light{
    position: absolute;
    width: 34vw;
    top: 0%;
    right: 0%;
    animation: pulseGlowYellow 2s infinite ease-in-out;
}
.leftkg{
    position: absolute;
    width: 25vw;
    bottom: 0%;
    left: -5%;
    transform-origin: bottom center;
    animation: swingBottom 5s ease-in-out infinite;
}
.rightkg{
    position: absolute;
    width: 25vw;
    bottom: 0%;
    right: -5%;
    transform-origin: bottom center;
    animation: swingBottom 5s ease-in-out infinite;
}
.leftghot{
    position: absolute;
    width: 7.5vw;
    bottom: 0%;
    left: 3%;
}
.rightghot{
    position: absolute;
    width: 7.5vw;
    bottom: 0%;
    right: 3%;
}
.holud{
    position: absolute;
    width: 28vw;
    bottom: 2.2%;
    left: 33%;
}
@keyframes pulseGlowYellow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 183, 0, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1))
                drop-shadow(0 0 40px rgba(255, 215, 0, 0.8));
    }

    100% {
        filter: drop-shadow(0 0 5px rgba(255, 196, 0, 0.6));
    }
}
@keyframes slideLeftRight {
    0% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(-10px);
    }
}
.slide-l-r{
    animation: slideLeftRight 3s ease-in-out infinite;
}
.wedding{
    background: url(../images/wedding-background.png) center/cover no-repeat;
    position: relative;
    height: 180vh;
}
.leftcurt{
    left: -6%;
    transform-origin: top center;
    animation: swing 4s infinite;
}
.rightcurt{
    right: -6%;
    transform-origin: top center;
    animation: swing 4s infinite;
}
.bor{
    position: absolute;
    width: 18vw;
    bottom: 24%;
    right: 30%;
}
.kone{
    position: absolute;
    width: 18vw;
    bottom: 24%;
    left: 28%;
}
.leftmala{
    position: absolute;
    width: 22vw;
    top: 0%;
    left: 0%;
}
.rightmala{
    position: absolute;
    width: 22vw;
    top: 0%;
    right: 0%;
}
.jhar{
    position: absolute;
    width: 7.5vw;
    top: 25%;
    left: 46.5%;
    transform-origin: top center;
    animation: swingBottom 5s ease-in-out infinite;
}
.agun{
    position: absolute;
    width: 14vw;
    bottom: 22%;
    left: 43.5%;
}
.kath{
    position: absolute;
    width: 17vw;
    bottom: 18.6%;
    left: 41.5%;
}
.swing-glow{
    transform-origin: bottom center;

    animation: 
        swing 3s ease-in-out infinite,
        pulseGlowYellow 2s ease-in-out infinite;
}
@keyframes zoom {
    0% {
        transform: scale(0.7);
        opacity: 0.8;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.7);
        opacity: 0.8;
    }
}
.zoom-glow{
    transform-origin: bottom center;

    animation: 
        zoom 5s ease-in-out infinite,
        pulseGlowYellow 2s ease-in-out infinite;
}
.reception{
    background: url(../images/reception-background.png) center/cover no-repeat;
    position: relative;
    height: 103vh;
}
.leftjhar{
    position: absolute;
    width: 7.2vw;
    top: 13%;
    left: 34.5%;
    transform-origin: top center;
    animation: swingBottom 4s linear infinite;
}
.rightjhar{
    position: absolute;
    width: 7.2vw;
    top: 12.5%;
    right: 35%;
    transform-origin: top center;
    animation: swingBottom 4s linear infinite;
}
.midjhar{
    position: absolute;
    width: 9.5vw;
    top: -0.3%;
    left: 45.5%;
    transform-origin: top center;
    animation: swingBottom 5s ease-in-out infinite;
}
.maguest{
    position: absolute;
    width: 18vw;
    bottom: 0%;
    right: 17%;
}
.feguest{
    position: absolute;
    width: 18vw;
    bottom: 0%;
    left: 17%;

}
.couple{
    position: absolute;
    width: 12vw;
    top: 46%;
    left: 44.5%;
}

.ending{
    background: url(../images/dfbgw.png) center/cover no-repeat;
    height: 117vh;
}

.header-bottom{
    z-index: 99;
}

.doekworwer img{
    width: 90%;
}

.ending .col-lg-2:nth-of-type(2n) .doekworwer img:last-child{
    width: 70%;
}

.ending .col-lg-2:nth-of-type(3n) .doekworwer img:last-child{
    width: 45%;
}

.ending .col-lg-2:nth-of-type(4n) .doekworwer img:last-child{
    width: 40%;
}

.ending .col-lg-2:last-child .doekworwer img:last-child{
    width: 50%;
}