#lottie-preloader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #FFFFFF;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;

}



#lottie-preloader.fade-out {

    opacity: 0;

    visibility: hidden;

}



#lottie-container {

    width: 400px;

    height: 400px;

    margin-bottom: 30px;

}



.progress-container {

    width: 80%;

    height: 3px;

    background-color: rgb(239 194 55 / 10%);

    border-radius: 9px;

    overflow: hidden;

    position: absolute;
    
    bottom: 40px;

}



.progress-bar {

    height: 100%;

    background: linear-gradient(90deg, #38A4A5 0%, #C2E9C4 50%, #F2CC54 100%);

    border-radius: 10px;

    width: 0%;

    transition: width 0.3s ease;

    position: relative;

}



.progress-bar::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    animation: shimmer 2s infinite;

}


@media(max-width: 767px) {
    #lottie-container {

        width: 80%;

        height: auto;

        margin-bottom: 30px;

    }	
}



@keyframes shimmer {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(100%); }

}