/* Add this to your CSS file */
@keyframes smoke-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes smoke-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.smoke-in {
    animation: smoke-in 0.5s forwards; /* Adjust duration as needed */
}

.smoke-out {
    animation: smoke-out 0.5s forwards; /* Adjust duration as needed */
}






.wrapper.hidden {
    display: none; /* Initially hide the wrapper */
}

.wrapper.fade-in {
    animation: fadeIn 0.5s ease-in-out; /* Smoother fade-in */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start fully transparent */
    }
    to {
        opacity: 1; /* End fully opaque */
    }
}


.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid var(--main-clr); /* Blue */
    border-radius: 50%;
    width: 60px; /* Size of the loader */
    height: 60px; /* Size of the loader */
    animation: spin 1s linear infinite; /* Spinning animation */
    position: fixed; /* Center the loader */
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%); /* Centering */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}