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

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

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

.crousel_img_all:not(.active) {
    top: 0;
    left: -100%;
}
/* btn css styles*/
.c_pre,
.c_next {
    padding: 5px 20px;
    border: hidden;
    background-color: #fff;
   top: 60%;
    position: absolute;
    cursor: pointer;
    font-size: medium;
    font-weight: 600;
}

@media (max-width:800px) {
    
  
    .crousel_main_box {
        width: 100%;
        height: 300px;
    }
    
    .crousel_multi_img {
        position: relative;
        width: cover;
        height: 300px;
        overflow: hidden;
    }
    
    .crousel_img_all {
        position: absolute;
        width: 100%;
        height: 300px;
    }

    /* btn css styles*/
.c_pre,
.c_next {
    padding: 5px 20px;
    border: hidden;
    background-color: #fff;
   top: 40%;
    position: absolute;
    cursor: pointer;
    font-size: medium;
    font-weight: 600;
}

}

@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%;
    }
}


.c_pre:hover,
.c_next:hover {
    background-color: rgb(216, 211, 211);
}

.c_pre:active,
.c_next:active {
    background-color: rgb(0, 0, 0);
    color: white;
    transform: scale(1.2);
}

.c_pre {
    right: 10px;
}

.c_next {
    left: 10px;
}