/* Initial hidden state for benefit items */
.benefit-item {
    opacity: 0;
    transform: translateY(20px); /* Starts slightly below its final position */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}
/* Visible state when 'is-visible' class is added */
.benefit-item.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its original position */
}