Facing difficulty in applying custom font-weight style over react-bootstrap css in react application

I've tried many ways of overriding the default bootstrap css but to no avail in my "Home.jsx" component. This is my Home.jsx (a component to render home screen).

import React from "react";

function Home() {
  return (
    <div className="center" style={{ fontWeight: 700 }}>
      <h6>Hey! I am</h6>
      <h1>Abhuday Mishra</h1>
      <h3>
        a <span className="desc">Web Developer.</span>
      </h3>
    </div>
  );
}

export default Home;

This is my App.jsx

import MainNav from "./Navbar";
import Home from "./Home";

function App() {
  return (
    <div>
      <MainNav />
      <Home />
    </div>
  );
}

export default App;

And finally this is my styles.css

.center {
  font-family: "Poppins", sans-serif;
  text-align: center;
  align-items: center;
  margin-top: 14.8%;
}
.center h1 {
  font-size: 75px;
}
.center h6 {
  color: blue;
  font-size: 20px;
}
.navlink {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin-right: 40px;
}

.desc {
  color: blue;
  text-decoration: underline;
}

.navbrand {
  margin-left: 10px;
}

.logo {
  height: 35px;
  width: 120px;
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  background: rgb(234, 255, 208);
  background: linear-gradient(
    90deg,
    rgba(234, 255, 208, 1) 50%,
    rgba(255, 255, 255, 1) 51%
  );
}

I've tried overriding the bootstrap css, inline styling, using css modules but nothing seems to be working. But when I use the inspect tool in Chrome and turn the font weight on manually, it works fine. Thanks