Issue with responsive media queries using pure css - css

Question

So here is the link to my project repository
https://github.com/iamlovingawareness/EdgeLedger/tree/main
In the following code snippet I am not able to implement this change:
in the solutions and cases section when the max-width is 768px it should stack one on top of the other but when I make the necessary changes in my styles.css file it shows as an error.
This is what I implemented as follows:
#media (max-width: 768px) {
.navbar {
flex-direction: column;
height: 120px;
padding: 20px;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-items {
flex-direction: column;
}
.flex-columns .column,
.flex-grid .column {
flex-direction: column;
flex: 100%;
max-width: 100%;
}
.team img {
width: 70%;
}
}
Supporting HTML snippet
<section class="solutions flex-columns">
<div class="row">
<div class="column">
<div class="column-1">
<img src="./image_resources/home/people.jpg" alt="" />
</div>
</div>
<div class="column">
<div class="column-2 bg-primary">
<h4>What you are loooking for</h4>
<h2>We provide bespoke solutions</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est,
aut!
</p>
<a href="#" class="btn btn-outline"
><i class="fas fa-chevron-right"></i> Read More</a
>
</div>
</div>
</div>
</section>
Where .flex-columns . columns is what is supposed to do the thing but is not.
Kindly help me out thank you
Update: Went to chrome dev tools to see what was going on and saw this in the element property section:
Here as you can see there is a slash on the property that is supposed to be acting when the max-width is 768px. My question now is how do I find out where it has been overridden and make the necessary changes.
Thanks !