.crousel_main_box {
    width: 100%;
    height: 500px;
}

.crousel_multi_img {
    position: relative;
    width: cover;
    height: 500px;
    overflow: hidden;
}

.crousel_img_all {
    position: absolute;
    width: 100%;
    height: 500px;
}

.crousel_img_all:not(.active) {
    top: 0;
    left: -100%;
}



@keyframes c_next1 {
    from {
        left: 0%;

    }

    to {
        left: -100%;
    }
}

@keyframes c_next2 {
    from {
        left: 100%;
    }

    to {
        left: 0%;
    }
}

/* this is for c_pre*/
@keyframes c_pre1 {
    from {
        left: 0%;

    }

    to {
        left: 100%;
    }
}

@keyframes c_pre2 {
    from {
        left: -100%;
    }

    to {
        left: 0%;
    }
}






@media (max-width:800px) {
    .crousel_main_box,.crousel_img_all,.crousel_multi_img{
        height: 200px;
        
    }
 
}