/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
    width: 100%;
    height: auto;
}
.social.position-absolute.w-100.text-center.redirect-btn {
    width: 50% !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.social.position-absolute.w-100.text-center.redirect-btn a img {
    width: 50px;
 }
@media(max-width: 500px){
 .social.position-absolute.w-100.text-center.redirect-btn a img {
    width: 70px !important;
 }
}

.social.position-absolute.w-100.text-center.redirect-btn {
    top: 90%;
}

/*-------------------------------------------Title Animation---------------------------------------------*/
/* Comment if using Slide keyframe */
.add-animation-zoom {
    animation: zoomBounce 0.5s ease;
    animation: zoomOut 0.5s ease;
}

/* Comment all if using Zoomout keyframe */
.add-animation {
    animation: frmslideRight 0.8s ease;
}

/* Comment all if using Zoomout keyframe */
.exit-animation {
    animation: toslideLeft 0.8s ease;
}

.fade-in {
    animation: fadeOut 0.5s ease;
    animation: fadeIn 0.5s ease;
}

/* .fade-out {
    animation: fadeOut 1s ease;
} */

/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
    top: 75%;
}
.position-absolute.w-100.text-center.redirect-btn {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.redirect-btn img {
    width: 100%;
    animation: pulse 1.2s  infinite linear;
}

.pop {
    top: 28%;
}

.pop img {
    /* width: 50%; */
    animation: pulse 1.6s  infinite linear;
}

.pop2 {
    top: 28%;
}

.pop2 img {
    /* width: 50%; */
    animation: pulse 1.6s  infinite linear;
    animation-delay: 0.8s;
}



/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Keyframes for fade in */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    35% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    65% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    35% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    55% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    65% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    85% {
        transform: scale(1.2);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes frmslideLeft {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toslideRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(50%);
        opacity: 0;
    }
}

@keyframes frmslideRight {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toslideLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%);
        opacity: 0;
    }
}

@keyframes nudgeRight {
    0% {
      transform: translateX(0);
    }
    10% {
      transform: translateX(-10px); /* Nudge distance */
    }
    20% {
      transform: translateX(0); /* Return to original position */
    }
    30% {
        transform: translateX(-10px); /* Return to original position */
    }
    40% {
    transform: translateX(0); /* Return to original position */
    }
    100% {
      transform: translateX(0); /* Stay in place for the rest of the cycle */
    }
}


/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #bg {
        height: 100vh;
    }
}