I’m facing a weird issue with my ReactJS site. I’ve used Bootstrap for the navbar and tabs, and custom CSS for the rest. The problem is, when I open the site, the colors from my custom CSS don’t show up properly. But when I scroll through the specific section in the upward direction, the colors appear just fine, and again fade when i come downward on that section.similarly when i open two screens side by side on my system the colours appear perfectly, and when i open it it disapears,. this thing is happening at some sections, specificly on the background colours. Has anyone encountered this kind of CSS rendering issue? Any tips on how to fix this?

i have also attached the code for that speciifc section but i dont know whether the problem is in the specific file or somewhere else in the site files.

I have searched it for many days but didnt find any solution. I dont have much experience with the react js.

body {
  font-family: "Pontano Sans", sans-serif;
  background-color: #f5f5f5 !important; /* this colour is not behaving well */ 
  color: #131316;
  line-height: 2.4rem;
  font-size: 1.6rem;
}
/* -------------WORKING SECTION STYLING------------ */
.working-section {
  margin-top: 12.6rem;
  position: relative;
}
.working-card-row1 {
  margin-top: 10.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 90px;
  justify-content: center; 
  align-items: center; 
}
.working-card-row1 .working-card {
  align-content: center;
  background: rgba(247, 246, 251, 1) !important;/* this colour is not behaving well */ 
  flex: 1 1 326px;
  max-width: 326px;
  min-height: 370px;
  padding: 3.9rem 4.3rem;
  text-align: left;
  border-radius: 30px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.315);
}
.working-card:hover {
  transform: translateY(-9px);
  transition: all 0.3s ease-in-out;
}
.icon-container {
  margin-bottom: 4.7rem;
  height: 110px;
  width: 110px;
  display: flex;
  border-radius: 20px;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  padding: 0 auto;
}
.icon-container img {
  width: 38px;
  height: 35px;
}
.upper-arrow,
.lower-arrow {
  width: 173px;
  height: 31px;
  z-index: 4;
  position: absolute;
}
.upper-arrow {
  top: 40%;
  left: 25%;
}
.lower-arrow {
  top: 59%;
  left: 59%;
}


import "../index.css";
export default function Working() {
  return (
    <div className="working-section wrapper">
      <img
        className="upper-arrow"
        src="./working-images/upper-arrow.png"
        alt="upper arrow icon"
      />
      <img
        className="lower-arrow"
        src="./working-images/lower-arrow.png"
        alt="lower arrow icon"
      />
      <h1 className="lg-heading">how it works</h1>
      <section className="working-card-row1">
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/search-icon.png" alt="search-icon" />
          </div>

          <h1 className="md-heading">Define the problem</h1>

          <br />
          <p className="services-para2">
            We begin by deeply understanding your challenges, goals, and needs
          </p>
        </section>
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/engine-icon.png" alt="engine-icon" />
          </div>

          <h1 className="md-heading">Develop a Solution</h1>

          <br />
          <p className="services-para2">
            Our expert team crafts a tailored solution that aligns with your
            business objectives
          </p>
        </section>
        <section className="working-card">
          <div className="icon-container">
            <img src="./working-images/pen-icon.png" alt="pen-icon" />
          </div>

          <h1 className="md-heading">Refine</h1>
          <br />
          <p className="services-para2">
            Once the solution is live, we continuously improve and optimize to
            ensure maximum impact and performance.
          </p>
        </section>
      </section>
      <button className="nextPage-btn">
        <a href="">
          learn more
          <img className="arrow-icon" src="./arrow.png" alt="" />
        </a>
      </button>
    </div>
  );
}