 /* Set a fixed height for images */
 .swiper-slide img {
     height: 300px;
     width: 100%;
     object-fit: cover;
 }

 /* Styling for navigation arrows */
 .swiper-button-next,
 .swiper-button-prev {
     color: #fff;
     /* White color for arrows */
     background: #0044BB;
     /* Semi-transparent background for visibility */
     padding: 25px;
     border-radius: 50%;
     /* Makes the arrows circular */
 }
 .swiper-button-next::after,
 .swiper-button-prev::after{
    font-size: 20px;
}
 /* Optional: Add padding to the swiper container so buttons are not obstructed */
 .swiper {
     padding: 20px;
     /* Adjust this padding as needed */
 }

 /* If arrows still don't show, try adding custom sizes or positioning */
 .swiper-button-next,
 .swiper-button-prev {
     font-size: 20px;
     /* You can adjust the size of the arrows */
 }
 .swiper-button-prev{
    right: 0px !important;
}
 .swiper-button-next{
    left: 0px !important;
}
