Making a FAQ using lists need help with json formatting colors

So I was following a tutorial on Youtube on how to make a FAQ list but I cant get the formatting right.
There are 4 columns in this list Title, Question, Answer, Show More
Basically I have it grouped by title and then grouped by question

The problem is the as you can see in the screenshot below the title and question are all the same color I want them to be a different color. I have also attached the JSON I am using in formatting below. But basically I need help figuring out how to make the title in this case documentation different from the questions.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "#333333", "background-color": "#F7F7F7", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "8px 12px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "hidden", "margin": "4px 6px 6px 4px", "min-width": "max-content", "box-shadow": "0 1px 3px rgba(0,0,0,0.1)" }, "children": [ { "elmType": "img", "style": { "max-width": "28px", "max-height": "28px", "margin-top": "0", "border-radius": "3px", "margin-right": "12px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "4px 6px", "font-weight": "600", "font-size": "16px", "color": "#B31B24" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "style": { "flex-grow": "1" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "sp-row-pwc-bg" }, "style": { "display": "flex", "justify-content": "flex-start", "color": "#222222", "padding": "8px 16px", "border-radius": "6px", "max-width": "920px", "margin": "6px 8px 8px 60px", "background-color": "#FFFFFF", "box-shadow": "0 1px 4px rgba(0,0,0,0.08)", "align-items": "center", "flex-direction": "column" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "600", "font-size": "16px", "color": "#E4002B", "user-select": "none" }, "txtContent": "" }, { "elmType": "div", "style": { "margin-top": "8px", "font-weight": "400", "font-size": "14px", "color": "#5A5A5A", "white-space": "pre-wrap" }, "txtContent": "[$Answer]" }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'inline-block', 'none')", "margin-top": "10px", "color": "#FFFFFF", "background-color": "#E4002B", "border": "none", "padding": "6px 16px", "border-radius": "4px", "cursor": "pointer", "font-weight": "600", "font-size": "14px", "text-align": "center", "box-shadow": "0 2px 6px rgba(228,0,43,0.3)" } } ] } }