.content-carousel {
	width: 100%;
	display: block;
	margin: 0 auto;
}
.owl-carousel {
	width: calc(100% - 220px);
}

.owl-carousel div {
	width: 100%;
    border-radius: 12px;
}
.owl-carousel .owl-controls .owl-dot {
	background-size: cover;
	margin-top: 0px;
}
.owl-carousel .owl-dots {
	position: absolute;
	top: 0;
	right: -220px;
	width: 210px;
	height: 100%;
    overflow-x:hidden;
    border-radius: 12px;
    overflow-y: scroll;
    padding-right: 10px;
}

.owl-dots::-webkit-scrollbar {
  display: none;
}

.owl-dots {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.owl-carousel .owl-dot {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
    height: 100px!important;
    margin: 10px;
}

.owl-item img{
    object-fit: cover;
}

.owl-nav{
    display: none;
}
.owl-theme .owl-dots .owl-dot span{
    display: none;
}

@media screen and (max-width :500px){

    .content-carousel {
        width: 100%;
        display: block;
        margin: 0 auto;
        padding:0px 20px;
    }

    .owl-carousel div {
        width: 100%;
        border-radius: 12px;
    }

    .owl-carousel .owl-dots {
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        border-radius: 12px;
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;

    }

    .owl-carousel .owl-dot {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;  
        width: 100px!important;
        height: 80px!important;
        float: left!important;
        flex-shrink: 0;
    }

    .owl-carousel {
        width: 100%;
    }

    .owl-dots::-webkit-scrollbar {
    display: none;
    }
    .owl-dots {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    }

}