.element-reveal {
    transform: translateY(150px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.reveal-active {
    /* display: inline; */
    transform: translate(0px, 0px);
    opacity: 1;
}




@keyframes ripple {
    from {
        opacity: 0.7;
        transform: scale(0);
    }

    to {
        opacity: 0;
        transform: scale(10);
    }
}

.btn {
    overflow: hidden;
}

.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: #e4e4e7;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: ripple 1s ease-in;
    opacity: 0;
}


.fade-in {
    opacity: 0; /* początkowa przezroczystość */
    animation: fadeIn 1s forwards; /* animacja 1s, zatrzymuje się w końcowym stanie */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.fade-out {
    opacity: 1;
    animation: fadeOut 1s forwards; /* animacja 1s, końcowa opacity: 0 */
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.box-shadow-anim {

}