made the heading text centralised

src/assets/css/main.css

@@ -2505,6 +2505,7 @@ p {
   font-weight: 700;
   margin-top: 30px;
   margin-bottom: 10px;
+  text-align: center;
 }
 .appie-single-service-2 a {
   font-size: 14px;
@@ -4239,17 +4240,26 @@ p {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .mission-side-box {
   position: absolute;
   top: 0;
   right: 0;
-  height: 100%;
+  height: 750px;
   width: 50%;
   background-image: url(../images/mission-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
+@media only screen and (max-width: 991px) {
+  .mission-side-box {
+    position: relative;
+    height: 500px;
+    width: 100%;
+    margin: 20px auto 0 auto;
+  }
+}
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-faq-8-area .faq-play-box {

src/components/Service/MissionStatement.js

@@ -100,11 +100,7 @@ function MissionStatement() {
                         </div>
                     </div>
                 </div>
-
-                <div className="mission-side-box">
-
-                </div>
-
+                <div className="mission-side-box"></div>
             </div>
         </>
     );