/* THE SLIDER FOR HEADER NOTE */

/* Container styles */

/* FOR SIMPLE TEXT */

/* Slide-in and slide-out animation for .topic */
@keyframes slideInOutFromTop {
    0% {
        transform: translateY(-100%); /* Start off-screen above */
        opacity: 0;
    }
    20% {
        transform: translateY(0); /* Slide to its final position quickly */
        opacity: 1;
    }
    80% {
        transform: translateY(0); /* Stay in place */
        opacity: 1;
    }
    90% {
        transform: translateY(-100%); /* Slide out back to the top */
        opacity: 0;
    }
    100% {
        transform: translateY(-100%); /* End off-screen above */
        opacity: 0;
    }
}

/* Apply the animation to .topic */
.topic {
    animation: slideInOutFromTop 10s infinite; /* 7 seconds cycle, repeat forever */
    animation-timing-function: ease-in-out;
    animation-delay: 0s; /* No initial delay */
    opacity: 0; /* Start with invisible */
}

.note2{
    animation: slideInOutFromTop 10s infinite; /* 7 seconds cycle, repeat forever */
    animation-timing-function: ease-in-out;
    animation-delay: 0s; /* No initial delay */
    opacity: 0; /* Start with invisible */
}




/* HERE GOES THE SLIDERS */
/* Basic styling */
.buttons {
    position: relative;
    height: 80px; /* Adjust based on the height you want */
    overflow: hidden; /* Hide the buttons when they are out of view */
}



/* Slide-in from right for the .header-note */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%); /* Start off-screen to the right */
        opacity: 0;
    }
    20% {
        transform: translateX(0); /* Slide to the original position quickly */
        opacity: 1;
    }
    80% {
        transform: translateX(0); /* Stay in place */
        opacity: 1;
    }
    90% {
        transform: translateX(100%); /* Slide out to the right */
        opacity: 0;
    }
    100% {
        transform: translateX(100%); /* End off-screen to the right */
        opacity: 0;
    }
}

/* For the header-note container */
.header-note .note {
    animation: slideInFromRight 10s infinite; /* 7 seconds cycle */
    animation-timing-function: ease-in-out;
    animation-delay: 0s; /* No initial delay */
}

/* Slide-in and slide-out animation for the buttons (stay bottom) */
@keyframes slideInOutBottom {
    0% {
        transform: translateY(100%); /* Start below the container */
        opacity: 0;
    }
    20% {
        transform: translateY(0); /* Slide up to the original position quickly */
        opacity: 1;
    }
    80% {
        transform: translateY(0); /* Stay in place */
        opacity: 1;
    }
    90% {
        transform: translateY(100%); /* Slide out down quickly */
        opacity: 0;
    }
    100% {
        transform: translateY(100%); /* End below the container */
        opacity: 0;
    }
}

/* For buttons */
.buttons .appoint, .buttons .apply {
    animation: slideInOutBottom 10s infinite; /* Same 7 seconds cycle for buttons */
    animation-timing-function: ease-in-out;
    animation-delay: 0s; /* No initial delay */
}