Bull 1611

src/components/CyberSecurityContinuousCollapsible.vue

@@ -21,10 +21,7 @@
               </div>
             </v-expansion-panel-header>
           </v-expansion-panel>
-          <v-expansion-panel
-            class="expansion-panel-card"
-            style="min-height:250px"
-          >
+          <v-expansion-panel class="auth-style">
             <v-expansion-panel-header class="justify-center mt-3">
               Authorize the Team
               <div class="border-container single clear">
@@ -55,7 +52,7 @@ export default {
   components: {},
   data() {
     return {};
-  },
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -66,6 +63,16 @@ export default {
   height: 90px;
 }
 
+.auth-style {
+  background-color: #002743 !important;
+  color: white !important;
+  margin: 10px 0 !important;
+  min-height: 250px;
+  @media (max-width: 455px) {
+    min-height: 325px;
+  }
+}
+
 .cs-interactive {
   $dark-blue: #094b5f;
   .border {
@@ -83,7 +90,10 @@ export default {
     .border-vertical {
       position: absolute;
       width: 16px;
-      bottom: 150px;
+      bottom: 210px;
+      @media (max-width: 480px) {
+        bottom: 240px;
+      }
 
       &.left {
         border-left: 2px dashed $border-color;

src/views/Cybersecurity.vue

@@ -61,13 +61,15 @@
             <h2 class="white--text pt-10">
               PROGRAMS CAN SAVE WITH PLATFORM ONE
             </h2>
-            <div class="row justify-content-center white--text">
-              <p style="max-width: 600px">
-                The Continuous Authorization approach saves program teams months
-                of approval process time along with millions of dollars
-              </p>
+            <div class="row justify-content-center white--text mx-7 mt-2">
+              <div class="col-md-4-center">
+                <p style="max-width: 600px">
+                  The Continuous Authorization approach saves program teams months
+                  of approval process time along with millions of dollars
+                </p>
+              </div>
             </div>
-            <div class="row">
+            <div class="row mx-7">
               <div class="col-md-4">
                 <img
                   class="img-fluid mt-2 mb-3"
@@ -173,14 +175,14 @@
             target="_blank"
           >
             <img
-              class="img-fluid ma-3 ml-3"
+              class="img-fluid ma-3 ml-n1"
               src="@/assets/images/CyberSecurity/CS_PDF_Icon.png"
               alt="PDF_Icon"
               width="25"
             />
             *DORA Accelerate State of DevOps Report
             <img
-              class="img-fluid ma-3 py-3"
+              class="img-fluid my-3 ml-3 py-3"
               src="@/assets/images/CyberSecurity/CS_GET_APP.png"
               alt="Download PDF"
             />