How to style the pagination bullets at the bottom

[AbhayaShankar]

My Question is simple and pretty straight forward, I want to change the pagination bullets stylings from blue color to something different custom colour. How can I do that ?

<Swiper
        onSlideChange={handleSlideChange}
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper flex items-end justify-end flex-row w-[40%] h-full !mr-0 bg-[#0c0a09]"
      >
        {heroImages.map((item) => (
          <SwiperSlide key={item.id} className="w-[800px] !h-[80vh]">
            <Image
              src={item.imgUrl}
              alt="hero-image"
              width={500}
              height={500}
              className="w-full h-full object-cover object-center"
            />
          </SwiperSlide>
        ))}
      </Swiper>

can somebody help me out on this...

[prijithvrgs90]

const useStyles = makeStyles(() => ({
dot: {
'& .swiper-pagination-bullet': {
background: '#e4e4e4',
}
'& .swiper-pagination-bullet-active': {
background: '#767676',
},
},
}));

export function Notification() {
const classes = useStyles();

return (
<Swiper className={classes.dot}
)

}