.scroll-hidden{
    opacity:0 ;
    transition: all 0.7s;
    filter: blur(2px);
}
.scroll-show{
    opacity: 1;
    filter: blur(0px);
}
.hiddenFromleft{
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
    transform: translateX(-100%);
}
.showFromleft{
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0%);
}
@media(prefers-reduced-motion){
    .hiddenFromleft{
        transition: none;
    }
}

.hiddenFromright{
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
    transform: translateX(100%);
}
.showFromright{
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0%);
}
@media(prefers-reduced-motion){
    .hiddenFromright{
        transition: none;
    }
}