    
    /* Default styles for img.swiper-slide-image */
img.swiper-slide-image {
    position: relative;
    object-fit: cover;
    object-position: center center;
    height: 300px;
    width: 300px;
    
}

/* Responsive styles for mobile devices in portrait orientation up to 767px */
@media only screen and (max-width: 767px) and (orientation: portrait) {
    selector img.swiper-slide-image {
        /* Adjustments for mobile portrait view */
        height: 150px; /* Allows the image to maintain its aspect ratio */
        width: 100%; /* Ensures the image fills the width of its container */
    }
}




.image1 img{
    animation: imagemovement1 15s ease-in-out infinite alternate;
}

#column1 {
    height:1000px;
    max-height: 900px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

@keyframes imagemovement1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}




@media only screen and (max-width: 1024px) and (orientation: portrait) {
#column1 {
    height:600px;
    max-height: 600px;
    }
    
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
#column1 {
    height:600px;
    max-height: 600px;
    }
    
}



.image2 img{
    animation: imagemovement2 15s ease-in-out infinite alternate;
}

#column2 {
    height:1000px;
    max-height: 900px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

/* Keyframes for the looping animation */
@keyframes imagemovement2 {
    50% {
        transform: translateY(-100%); /* Start at the bottom of the container */
    }
    70% {
        transform: translateY(0); /* Move to the top of the container */
    }
}



@media only screen and (max-width: 1024px) and (orientation: portrait) {
#column2 {
    height:600px;
    max-height: 600px;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
#column2 {
    height:600px;
    max-height: 600px;
    }
     .image2 img {
        animation: none;
    }
}



.image3 img{
    animation: imagemovement3 15s ease-in-out infinite alternate;
}

#column3 {
    height:1000px;
    max-height: 900px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}

@keyframes imagemovement3 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}



@media only screen and (max-width: 1024px) and (orientation: portrait) {
#column3 {
    height:600px;
    max-height: 600px;
    }

}

@media only screen and (max-width: 767px) and (orientation: portrait) {
#column3 {
    height:600px;
    max-height: 600px;
    }
             .image3 img {
        animation: none;
    }
}






