.here-slider-area{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.owl-carousel.heros-slider{
    position: absolute;
    width: 100%;
    height: 100%;
}

.owl-carousel.heros-slider img{
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.owl-carousel.heros-slider .owl-dots {
    position: absolute;
    text-align: center;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 9;
}
.owl-carousel.heros-slider .owl-dot {
    width: 10px;
    height: 10px;
    background: #ccc!important;
    border-radius: 50%;
    margin: 2px;
}
.owl-carousel.heros-slider .owl-dot.active {
    width: 10px;
    height: 10px;
    background: #333!important;
    border-radius: 50%;
    margin: 2px;
}