Bootstrap Modal messes up Carousel CSS - html

Question

I have a carousel with modified css because the default font and color of the captions/icons on the images are impossible to see, so I changed the arrows' style and color as well as the caption position/color.
However, when I activate my modal on the page, it resets all of the css applied to the carousel. Why is this happening?
My CSS:
/* CAROUSEL CSS */
.carousel-caption {
position: relative;
left: 0;
right: 0;
}
.carousel-control-prev {
justify-content: start;
}
.carousel-control-next{
justify-content: end;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
/* for screens smaller then mobile */
#media only screen and (max-width: 600px) {
.carousel-caption {
color: red;
font-size:12px;
}
}
/* for screens bigger then mobile */
#media only screen and (min-width: 600px) {
.carousel-caption {
color: black;
font-size:18px;
}
}
HTML:
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-remote="contact.html" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
</div>
</div>
</div>
<!-- Carousel -->
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="carousel-item active">
<img class="d-block mw-80 mx-auto img-fluid" src="https://placeimg.com/1080/500/arch" alt="First slide">
<div class="carousel-caption bg-secondary ">
<h5>First Slide</h5>
<p>Random Architect Pictures</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block mw-80 mx-auto img-fluid" src="https://placeimg.com/1080/500/nature" alt="Second slide">
<div class="carousel-caption bg-secondary ">
<h5>Second Slide</h5>
<p>Random Nature Pictures</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block mw-80 mx-auto img-fluid" src="https://placeimg.com/1080/500/animals" alt="Third slide">
<div class="carousel-caption bg-secondary ">
<h5>Third Slide</h5>
<p>Random Animal Pictures</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>