Override slide dots custom css not working under a section

hello, so I have custom styling for slider dots that work when slider is not under my section in hierarchy but the moment i add it under my carousel section my custom css does not work. I am not sure how to go about this.

<style>
.w-slider-dot {
  height: 6px;
  background: #6AAAF3;
  top: 3px;
}
.w-slider-dot.w-active {
  height: 6px;
  background: white;
  top: 3px;
}
.w-slider-nav.w-round]div {
  width: 24px;
  border-radius: 8px;
}