.slide-in-element {
    opacity: 0;
    transform: translateX(100%);
    z-index: -10;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.slide-in-element.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-elemen {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.slide-in-elemen.visible {
    opacity: 1;
    transform: translateX(0);
}

.animated-item {
    opacity: 0;
    transform: translateY(50%);
    z-index: -1;
    transition: opacity 0.1s ease-out, transform 0.2s ease-out;
}

.animated-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.animated-item1 {
    opacity: 0;
    transform: translateY(50%);
    z-index: 5;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.animated-item1.visible {
    opacity: 1;
    transform: translateY(0);
}
@media screen and (max-width: 980px) {
/* .slide-in-element {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-element.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-elemen {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-elemen.visible {
    opacity: 1;
    transform: translateX(0);
}

.animated-item {
    opacity: 1;
    transform: translateX(0);
}

.animated-item.visible {
    opacity: 1;
    transform: translateX(0);
} */
 .slide-in-element {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.1s ease-out, transform 0.2s ease-out;
}

.slide-in-element.visible {
    opacity: 1;
    transform: translateX(0);
}

.am1 {
    opacity: 0;
    transform: translateY(50%);
    z-index: 5;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.am1.visible {
    opacity: 1;
    transform: translateY(0);
}

.am2 {
    opacity: 0;
    transform: translateY(50%);
    z-index: 5;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.am2.visible {
    opacity: 1;
    transform: translateY(0);
}

.am3 {
    opacity: 0;
    transform: translateY(50%);
    z-index: 5;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.am3.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-elemen {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.slide-in-elemen.visible {
    opacity: 1;
    transform: translateX(0);
}

.animated-item {
    opacity: 0;
    transform: translateY(50%);
    z-index: -1;
    transition: opacity 0.1s ease-out, transform 0.2s ease-out;
}

.animated-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.animated-item1 {
    opacity: 0;
    transform: translateY(50%);
    z-index: 5;
    transition: opacity 0.1s ease-out, transform 0.5s ease-out;
}

.animated-item1.visible {
    opacity: 1;
    transform: translateY(0);
}
}