Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance!
Header.js component
import React from 'react';
import '../../../asset/css/updated/header.module.css'
const Header = () => {
return (
<div className='header-container'>
<h1 className='header-title'>Some text here</h1>
<svg width="130%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#56b5e3"></stop><stop offset="95%" stop-color="#7d58a5"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,350 0,350 C 136.8,427.20000000000005 273.6,504.40000000000003 456,480 C 638.4,455.59999999999997 866.4000000000001,329.6 1038,291 C 1209.6,252.4 1324.8,301.2 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity=".9" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path></svg>
</div>
);
};
export default Header;
header.module.css file
path{
fill:url(#gradient) !important;
}
.header-container{
position: relative;
}
.header-title{
position: absolute;
color: white;
margin-top: 10px;
margin-left: 10px;
}