guys. I have some issue while displaying the carousel swiper. I don't know why the carousel swiper id displaying the line below the the .owl-dots

I tried to edit the "dots: false" in js and the line disappears but when I set "dots: true" the line appears again.

Can anyone help me to solve this problem?

Here is the code.

HTML code

<div class="owl-carousel owl-theme row text-cente">
{% for getdata in furniture|slice:"12" %}
<div class="col">
    <a href="{{ getdata.update_view_count_url }}">
        <div class="card text-center">
            <div class="card-body">
                <img src="{{baseUrl}}/{{getdata.furnitureImg}}" alt="" class="mb-3 mx-auto">
                <h3 class="card__fName text-uppercase">{{getdata.furnitureName}}</h3>
                <h2 class="card__fPrice mb-3">${{getdata.unitPrice}}</h2>
                <a href="{{ getdata.add_to_cart_url }}" class="card__button text-uppercase mb-3">
                    <i class="uil uil-shopping-cart"></i>
                    Add To Cart
                </a>
            </div>
        </div>
    </a>
</div>
{% endfor %}   

CSS code

.owl-theme .owl-dots .owl-dot {
   outline: none;
   text-decoration: none !important;
}
.owl-theme .owl-dots{
   outline: none !important;
   text-decoration: none !important;
}
.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next{
   outline: none;
}
.owl-theme .owl-nav .owl-prev {
   font-size: 40px !important;
   position: absolute;
   top: 40%;
   left: -40px;
   display: block !important;
   border:0px solid black;
}
.owl-theme .owl-nav .owl-next {
   position: absolute;
   font-size: 40px !important;
   top: 40%;
   right: -40px;
   display: block !important;
   border:0px solid black;
}

JS code

<script type="text/javascript">
    $('.owl-carousel').owlCarousel({
       loop:true,
       nav:true,
       dots: true,
       margin: 10,
       navText : ['<i class="uil uil-angle-left-b swiper-portfolio-icon"></i>','<i class="uil uil-angle-right-b swiper-portfolio-icon"></i>'],
       responsive:{
         0:{
           items:2
         },
         600:{
           items:3
         },
         1000:{
           items:4
         }
       }
     });
    </script>

Output: carousel swiper with underline