Good day. I was having an issue with centering the background image within the Testimonials section of my website. I fixed it that but now the overlay text is offset to the left on both mobile and desktop displays. I would like it to be centered on all display types. But I can't seem to find a way to edit the HTML or CSS to make it happen. Below are the CSS modifications I have made to the style.css file. The HTML edits are viewable on my webpage source code. Can you help me center the text on all display sizes please? Thank you.
#testimonial {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
max-width: 100%;
height: auto;
}
.heading-block.text-center {
text-align: center;
}
.heading-block.text-center h3.ls-2 {
margin: 0; /* Remove any default margins */
}
/* Center the text within the .slide elements */
.fslider.testimonial .slide {
text-align: center !important;
}
/* Center-align the h3 text within .slide elements */
.fslider.testimonial .slide h3 {
text-align: center !important;
}
/* Additional styles for other elements in the testimonial section */
.fslider.testimonial .rounded-circle {
display: block;
margin-left: auto;
margin-right: auto;
}