/* Define the slow slide-in keyframe animation */
@keyframes slowSlideInR {
    0% {
        opacity: 0;
        transform: translateX(50px); 
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slow-slide-in-r {
    animation: slowSlideInR 2s ease-out forwards;
}

@keyframes slowSlideInL {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slow-slide-in-l {
    animation: slowSlideInL 2s ease-out forwards;
}

@keyframes slowAppe {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.slow-appear {
    animation: slowAppe 2s ease-out;
}


@keyframes slowZoomOut {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

.slow-zoom-out {
    animation: slowZoomOut 2s ease-out;
}

.btn-light-blue {
    display: inline-block;
    padding: 10px 22px;
    background-color: #64b5f6;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.btn-light-blue:hover {
    background-color: #42a5f5;
}
a.btn-light-blue {
    display: inline-block;
    padding: 10px 22px;
    background-color: #64b5f6;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}
a.btn-light-blue:hover,
a.btn-light-blue:focus,
a.btn-light-blue:active {
    background-color: #42a5f5;
    color: #ffffff; 
    text-decoration: none;
}