/*Animation designed by Muhammad Naqvi*/

/* Container styling */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensures the overlay is on top */
}

.logo-container {
    overflow: hidden; /* Hide the initial positions of the elements */
    animation: fadeOut 1s ease-out forwards;
    animation-delay: 4s; /* Adjust timing based on your animation duration */
}

/* Logo text animation */
.logo-text {
    opacity: 0; /* Initial state for fade-in effect */
    transform: translateX(-100%); /* Initial position for sliding in */
    animation: slideInLeft 1s ease-out forwards; /* Animation applied */
    animation-delay: 0.5s; /* Delay before the animation starts */
}

    /* Bold text in the second line */
    .logo-text:nth-of-type(2) {
        animation-delay: 1s; /* Slight delay for the second line */
    }

/* Divider animation */
.logo-divider {
    opacity: 0; /* Initial state for fade-in effect */
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 1.5s; /* Delay for the divider */
}

/* Subheading text animation */
.subheading-text {
    opacity: 0; /* Initial state for fade-in effect */
    transform: translateX(100%); /* Initial position for sliding in from right */
    animation: slideInRight 1s ease-out forwards;
    animation-delay: 2s; /* Delay before the subheading animates */
}

/* Keyframes for sliding in from the left */
@keyframes slideInLeft {
    to {
        transform: translateX(0); /* Final position */
        opacity: 1; /* Final opacity */
    }
}

/* Keyframes for sliding in from the right */
@keyframes slideInRight {
    to {
        transform: translateX(0); /* Final position */
        opacity: 1; /* Final opacity */
    }
}

/* Keyframes for fading in */
@keyframes fadeIn {
    to {
        opacity: 1; /* Final opacity */
    }
}

/* Keyframes for fading out the entire logo container */
/*@keyframes fadeOut {
    to {
        opacity: 0;*/ /* Final opacity */
/*visibility: hidden;*/ /* Makes it disappear from the DOM */
/*}
}*/