Bootstrap carousel not functional and is displaying all slides on top of eachother

[Adams05]

I am brand new to shopify and developing shopify themes. I am currently implementing a bootstrap carousel component. I had everything functional and it was working properly until I moved the css for the carousel from the global stylesheet to the carousel file itself. Now the carousel is no longer functional and all the slides are being rendered on top of each other. However inside the shopify admin dashboard when I customize my theme, the carousel is working as expected. I am kind of at a loss as to why this is happening. I have tried moving the css back to the global style sheet but this does not fix the problem. I need the styles to be inside the slider component because I need to create another carousel on the bottom of the page and I do not want styles interfering with each other. 

{% stylesheet %}

/* Slider Section Styles */
.slider-section {
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Carousel Styles */
.carousel {
  width: 850px;
  height: auto;
}

.carousel-inner {
  background: red;
  padding: 25px;
}

.carousel-item {
  width: 500px;
}

.carousel-item img {
  width: 500px !important;
  height: 200px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 2rem;
}

{% endstylesheet %}

<section class='slideshow-section' style="background-image: url('{{ section.settings.background_image | img_url: 'master' }}'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-2">
        <div id="carouselControls" class="carousel carousel-dark" data-bs-ride="carousel">
          <div class="carousel-inner">
            {% for block in section.blocks %}
              <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <div class="row">
                  <div class="col-sm-12 col-md-6 col-lg-6">
                    <div class="slide-title">
                      <h3 style="color: {{ block.settings.title_color }}; ">{{ block.settings.image_title }}</h3>
                      <p style="color: {{ block.settings.description_color }}; ">{{ block.settings.description }}</p>
                      {% if block.settings.button_text and block.settings.button_url %}
                        <a href="{{ block.settings.button_url }}" class="btn btn-dark">{{ block.settings.button_text }}</a>
                      {% endif %}
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-6 col-lg-6">
                    <img src="{{ block.settings.image | img_url: 'master' }}" class="d-block w-100" alt="{{ block.settings.image_title }}">
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

{% schema %}

{
  "name": "Slideshow",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    }
  ],
  "blocks": [
   {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Slide"
      },
      {
        "type": "text",
        "id": "image_title",
        "label": "Image Title"
      },
      {
        "type": "textarea",
        "id": "description",
        "label": "Description"
      },
      {
        "type": "text",
        "id": "button_text",
        "label": "Button Text"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      },
      {
        "type": "color",
        "id": "title_color",
        "label": "Title Color",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "description_color",
        "label": "Description Color",
        "default": "#fff"
      }
    ]
   }
  ]
}

{% endschema %}

Thanks