.ImagesContainer img {
    width: 100%;
    object-fit: fill;
    height: 100%;
    border-radius: 10vw;
}

.home-container {
    height:100vh;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}
.ImagesContainer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    position: relative;
    gap: 1rem;
}

.ImageContainerTop {
    height: 400px;
    border-radius: 10vw;
    animation: topbottom 25s infinite ease-in-out;
}

.ImageContainerBottom {
    height: 400px;
    border-radius: 10vw;
    animation: bottomtop 25s infinite ease-in-out;
}

.login-container {
    padding:10%;
}

.submitBtn {
    height: 50px;
    text-align: center;
    line-height: 50px;
    color:white;
    outline:none;
    border:none;
}




@media(max-width:980px) {

    .ImageContainerTop {
        height: 250px;
    
    }

    .ImageContainerBottom {
        height: 250px;
    }
    .ImagesContainer {
        gap: 0.5rem;
    }

    .ImagesContainer img {
        height: 80%;
    }

}

@media(max-width:767px) {


    .ImagesContainer {
        padding: 5%;
    }

    .ImagesContainer img {
        height: 100%;
    }

} 



@keyframes topbottom {
    0% {
        transform: translateY(-50px);
    }

    50% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-50px);
    }
}

@keyframes bottomtop {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(0px);
    }
}