modal for "continue with confidence"

_scss/helpers/utilities.scss

@@ -94,19 +94,11 @@ body {
   }
 }
 
-
 .btn-main.btn-slim {
   padding: .5em 2.5em;
 }
 
-
 // Text utility classes
-.content-text {
-  font-family: $text-font-family;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
 .caption {
   color: $dark-gray;
   font-family: $text-font-family;

_scss/helpers/variables.scss

@@ -11,5 +11,5 @@ $royal-blue: #6166E9;
 
 // Typography
 $base-font-family: 'Poppins', sans-serif !default;
-$text-font-family: 'Prata', serif;
+$text-font-family: 'Poppins', sans-serif !default;
 $footer-font-family: 'Inter', sans-serif;

_scss/libs/micromodal.scss

@@ -16,47 +16,54 @@
 
 .modal__container {
   background-color: #fff;
-  padding: 30px;
-  max-width: 1070px;
-  max-height: 100vh;
-  border-radius: 4px;
-  overflow-y: auto;
-  box-sizing: border-box;
+  margin: 10px;
+  max-width: 500px;
+  border-radius: 21px;
 }
 
-.modal__header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.modal__title {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 600;
-  font-size: 1.75em;
-  line-height: 1.25;
-  color: $dark-gray;
-  box-sizing: border-box;
+.header__text {
+  margin: 0 20px;
+  h2.modal__title {
+    margin: 30px auto 20px auto;
+    font-weight: 700;
+    font-size: 24px;
+    color: black;
+    box-sizing: border-box;
+    text-align: center;
+  }
 }
 
 .modal__close {
+  margin: 20px;
   cursor: pointer;
   background: transparent;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  display: block;
   border: 0;
 }
 
-.modal__header .modal__close:before { content: "\2715"; font-size: 24px; }
+.modal__continue {
+  color: #6166E9;
+}
 
 .modal__content {
   margin-top: 2rem;
-  margin-bottom: 2rem;
   line-height: 1.5;
   @media (max-width: 768px) {
     margin-top: 1rem;
   }
 }
 
+.modal__content__description {
+  margin: 0 20px;
+  p {
+    font-family: $text-font-family;
+    font-size: 16px;
+    margin: 20px 0;
+  }
+}
 
 /**************************\
   Demo Animation Style

_scss/pages/home.scss

@@ -184,7 +184,7 @@ a:active {
     font-weight: 500;
     margin: 30px 0 15px 0;
   }
-  p {
+  p.informational-text {
     font-size: 14px;
     font-weight: 400;
     margin: 10px 0;
@@ -306,7 +306,6 @@ a:active {
   width: auto;
 }
 
-
 // -------------------------
 // Footer Styles
 // -------------------------
@@ -315,85 +314,6 @@ a:active {
   padding: 35px 0;
 }
 
-
-// -------------------------
-// Modal Styles
-// -------------------------
-.modal__content {
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    @media (max-width: 768px) {
-      flex-direction: column;
-    }
-    .header__logo {
-      img {
-        display: block;
-        max-width: 100%;
-        @media (max-width: 768px) {
-          max-width: 120px;
-          width: 100%;
-        }
-      }
-    }
-    .header__text {
-      margin: 0 30px;
-      max-width: 430px;
-      width: 100%;
-      @media (max-width: 768px) {
-        margin: 20px 0;
-      }
-      .info__list {
-        font-size: 14px;
-        list-style: none;
-        margin-top: 10px;
-        padding: 0;
-      }
-    }
-    .header__btn {
-      @media (min-width: 769px) {
-        margin-left: auto;
-      }
-      .btn-main {
-        @media (max-width: 992px) {
-          font-size: 10px;
-        }
-      }
-    }
-  }
-
-  &__description {
-    margin: 30px 0;
-  }
-
-  &__slider {
-    //to prevent slider jump
-    @media (min-width: 1200px) {
-      min-height: 586px;
-      height: 100%;
-    }
-    .slider-item {
-      margin: 0 10px;
-    }
-    img {
-      max-width: 100%;
-      @media (max-width: 768px) {
-        margin: 0 auto;
-      }
-    }
-  }
-}
-
-.modal__footer {
-  p {
-    font-size: 14px;
-    a {
-      color: inherit;
-    }
-  }
-}
-
-
 // -------------------------
 // Slider Styles
 // -------------------------