diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
index 6abb895b9812..5cad027332c0 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
@@ -1,9 +1,10 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 
 ::ng-deep .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
index 818e6e1c0da1..2b06465240df 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="long-title"><h3>Sales Amount by Region</h3></div>
+<div class="long-title"><h2>Sales Amount by Region</h2></div>
 <dx-pivot-grid
   [allowSortingBySummary]="true"
   [allowSorting]="true"
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
index 356d83815196..24f826e20a7c 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
@@ -109,7 +109,7 @@ const App = () => {
   return (
     <>
       <div className="long-title">
-        <h3>Sales Amount by Region</h3>
+        <h2>Sales Amount by Region</h2>
       </div>
       <PivotGrid
         dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
index f5624cdae77c..a5e7eca56222 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,7 +9,8 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
index 843d58a2c71c..e6bda9f95635 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
@@ -109,7 +109,7 @@ const App = () => {
   return (
     <>
       <div className="long-title">
-        <h3>Sales Amount by Region</h3>
+        <h2>Sales Amount by Region</h2>
       </div>
       <PivotGrid
         dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
index f5624cdae77c..a5e7eca56222 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,7 +9,8 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
index 9b70462cf194..cef25f8ce30b 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <DxPivotGrid
       :height="440"
@@ -166,7 +166,7 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
 // We recommend that you use the official 'file-saver' package in your applications.
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -177,7 +177,8 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
index 51fb9b394691..e9df81dc5d7f 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
@@ -34,7 +34,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Amount by Region</h3></div>
+      <div class="long-title"><h2>Sales Amount by Region</h2></div>
       <div id="sales"></div>
       <div class="export-options">
         <div class="caption">Export Options</div>
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
index e6e5471e0611..d790e0752f28 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
@@ -1,9 +1,10 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
index 3768297866d6..b266f4fd4747 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
@@ -1,11 +1,11 @@
 The field chooser allows users to manage pivot grid fields. You can configure the field chooser integrated into the PivotGrid or [use it as a standalone component](https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/StandaloneFieldChooser/). This example demonstrates the integrated field chooser. To open the field chooser window, click the icon in the top-left corner or right-click a row or column header and select Show Field Chooser from the context menu.
 <!--split-->
 
-### Enable the Integrated Field Chooser
+## Enable the Integrated Field Chooser
 
 The integrated field chooser is configured in the [fieldChooser](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/) object. To enable the field chooser, set the object's [enabled](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#enabled) property to **true**. This setting adds the Field Chooser icon to the PivotGrid and the Show Field Chooser command to the context menu.
 
-### Organize Fields
+## Organize Fields
 
 The field chooser window displays five field sections:
 
@@ -25,6 +25,6 @@ Users can drag and drop fields between the sections. When users move a field to
 
 After a user finishes moving fields between sections, the changes can either be applied immediately or after the user clicks OK. Use the **fieldChooser**.[applyChangesMode](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#applyChangesMode) property to set the desired mode. In this demo, you can change this property at runtime.
 
-### Enable Search
+## Enable Search
 
 Users can search in the All Fields section if you enable the **fieldChooser**.[allowSearch](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#allowSearch) property as shown in this demo. In addition, you can specify the [searchTimeout](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#searchTimeout) property to delay the search.
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
index 425a7c194104..8ed8ed08d99a 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
@@ -1,7 +1,8 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
index cb92785d38ed..7170fdacd315 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="long-title">
-  <h3>Sales Statistics</h3>
+  <h2>Sales Statistics</h2>
 </div>
 <dx-pivot-grid
   [allowSortingBySummary]="true"
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
index 0e9626f81eb0..3ff95b4ebc2e 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
@@ -10,7 +10,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
index 7f4bc0fd737d..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
index e60324d41a8e..2a9604515db2 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
@@ -6,7 +6,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
index 7f4bc0fd737d..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
index 28f5dab91e64..15864abcb7ac 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <DxPivotGrid
       :allow-sorting-by-summary="true"
@@ -50,7 +50,7 @@ const dataSource = new PivotGridDataSource({
 });
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -61,6 +61,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
index 579dd9de6a9e..31da4d9483b4 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
@@ -13,7 +13,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Statistics</h3></div>
+      <div class="long-title"><h2>Sales Statistics</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
index 76a9a652082b..a70c8010e608 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
@@ -1,7 +1,8 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
index 425a7c194104..8ed8ed08d99a 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
@@ -1,7 +1,8 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
index 088debaacd72..dabfe3075314 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="long-title">
-  <h3>Sales Statistics</h3>
+  <h2>Sales Statistics</h2>
 </div>
 <dx-pivot-grid
   [allowSorting]="true"
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
index 858ddb2c27d4..4483867dcc1b 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
@@ -14,7 +14,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
index 7f4bc0fd737d..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
index 518aafe5bee5..244126900a43 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
@@ -12,7 +12,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
index 7f4bc0fd737d..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
index bcd6b07fc607..edf6225edfce 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <DxPivotGrid
       :allow-sorting="true"
@@ -53,7 +53,7 @@ const dataSource = new PivotGridDataSource({
 });
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -64,6 +64,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
index 579dd9de6a9e..31da4d9483b4 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
@@ -13,7 +13,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Statistics</h3></div>
+      <div class="long-title"><h2>Sales Statistics</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
index 76a9a652082b..a70c8010e608 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
@@ -1,7 +1,8 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
index 5581ad0e6f2f..37a814ed9c07 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
@@ -2,10 +2,11 @@
   margin-top: 80px;
 }
 
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
index 768e4d9ba7da..b053c0c8cea4 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="long-title"><h3>Sales Amount by Region</h3></div>
+<div class="long-title"><h2>Sales Amount by Region</h2></div>
 <dx-pivot-grid
   id="sales"
   [allowSortingBySummary]="true"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
index b794c84a6634..e6d497d4e457 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
@@ -9,7 +9,7 @@ import type { Sale } from './data.ts';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <PivotGrid
       id="sales"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
index 20e1c814e6c0..ca894395617c 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
@@ -2,7 +2,7 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -13,5 +13,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
index a36fc6e7e654..e55283ea15dc 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
@@ -6,7 +6,7 @@ import { sales } from './data.js';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <PivotGrid
       id="sales"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
index 20e1c814e6c0..ca894395617c 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
@@ -2,7 +2,7 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -13,5 +13,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
index c25f004047e1..dfd6acadace2 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <DxPivotGrid
       id="sales"
@@ -63,7 +63,7 @@ const dataSource = new PivotGridDataSource({
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -74,6 +74,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
index 69520b151be2..c2c73cb71f60 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
@@ -14,7 +14,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Amount by Region</h3></div>
+      <div class="long-title"><h2>Sales Amount by Region</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
index c60b2b50aeff..6deb4e731fb8 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
@@ -2,10 +2,11 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  letter-spacing: normal;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/WebAPIService/description.md b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
index 1aa071a42acb..b552c3f64c54 100644
--- a/apps/demos/Demos/PivotGrid/WebAPIService/description.md
+++ b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
@@ -5,7 +5,7 @@ To configure access to a Web API service from the client, use the <a href="https
 You should also set the [remoteOperations](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/#remoteOperations) property to **true** to notify the PivotGrid that data is aggregated on the server.
 <!--split-->
 
-### A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
+## A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
 
 If you target .NET for your backend API, be sure to check out [Web API Service](https://docs.devexpress.com/eXpressAppFramework/403394/backend-web-api-service?utm_source=js.devexpress.com&utm_medium=referral&utm_campaign=xaf&utm_content=data-layer-odatastore) and register your [free copy today](https://www.devexpress.com/security-api-free?utm_source=js.devexpress.com&utm_medium=referral&utm_campaign=xaf&utm_content=data-layer-odatastore). The Template Kit scaffolds an OData v4 Web API Service (.NET 8+) with integrated authorization & CRUD operations powered by EF Core ORM. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing.
 The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.