migrate all variables

assets/scss/_variables.scss

@@ -1,20 +1,3 @@
-//site color variables
-$primary-color: #5d78ff;
-$secondary-color: #282f49;
-$text-color: #9d9ea5;
-$text-color-dark: #00113e;
-$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
-$gray: #f7f9ff;
-$dark-gray: #646569;
-
-// solid colors
-$white: #fff;
-$black: #000;
-
-//////
-////// Bootstrap Variables
-//////
-
 // Colors
 $primary: #5d78ff;
 $secondary: #282f49;

assets/scss/components/_footer-section.scss

@@ -19,7 +19,7 @@
         }
     }
     &__cta {
-        background: $primary-color;
+        background: $primary;
         padding: 100px 80px;
         border-radius: 20px;
         display: flex;
@@ -117,10 +117,6 @@
                 }
             }
         }
-        // &_sitemap{
-        // }
-        // &_address{
-        // }
     }
     &__footer {
         padding: 50px 0;

assets/scss/components/_hero-section.scss

@@ -58,16 +58,6 @@
       @include desktop {
         display: inline-block;
       }
-      // &::before {
-      //   position: absolute;
-      //   content: "";
-      //   height: 2px;
-      //   width: 20px;
-      //   top: 50%;
-      //   left: -20px;
-      //   transform: translateX(-50%);
-      //   background: $secondary-color;
-      // }
     }
     p {
       font-size: $font-size-lg;
@@ -150,9 +140,13 @@
           left: 55%;
           transform: translate(-50%, -50%);
           transition: all 0.3s ease;
+
+          path {
+            fill: $primary;
+          }
         }
         &:hover {
-          background-color: $primary-color;
+          background-color: $primary;
           svg {
             path {
               fill: #ffffff;

assets/scss/components/_navbar.scss

@@ -1,7 +1,7 @@
 .navbar {
     padding: 40px 0;
     background: transparent;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
     @include desktop {
         background: $white;
     }
@@ -33,7 +33,7 @@
                 height: 2px;
                 width: 25px;
                 transition: all 0.2s;
-                background: $primary-color;
+                background: $primary;
                 display: block;
                 &:not(:last-child) {
                     margin-bottom: 5px;

assets/scss/components/_page-title.scss

@@ -62,20 +62,5 @@
     }
     .breadcrumb-item + .breadcrumb-item::before {
         content: "-";
-        // color: $secondary-color;
-        // font-size: 17px;
-        // padding-right: 10px;
-        // @include mobile {
-        //     font-size: 14px;
-        // }
-        // @include mobile-xs {
-        //     padding-right: 0px;
-        // }
-    }
-    // .breadcrumb-item + .breadcrumb-item {
-    //     padding-left: 10px;
-    //     @include mobile-xs {
-    //         padding-right: 0px;
-    //     }
-    // }
+    }
 }

assets/scss/components/_preloder.scss

@@ -15,8 +15,8 @@
 		left: 50%;
 		top: 50%;
 		transform: translate(-50%, -50%);
-		border: 1px solid $primary-color;
-		border-top: 5px solid $primary-color;
+		border: 1px solid $primary;
+		border-top: 5px solid $primary;
 		border-radius: 50%;
 		animation: spin 1s infinite linear;
 		@include desktop {
@@ -26,7 +26,7 @@
 	}
 	.percentage {
 		z-index: 100;
-		color: $primary-color;
+		color: $primary;
 		opacity: 1;
 		font-weight: 600;
 		font-family: "bebasbold";
@@ -52,4 +52,3 @@
 		transform: translate(-50%, -50%) rotate(360deg);
 	}
 }
-  

assets/scss/components/_service-section.scss

@@ -80,9 +80,9 @@
                     cursor: pointer;
                     height: 100%;
                     width: 100%;
-                    background: #C2C8CC;
+                    background: #c2c8cc;
                     border-radius: 50%;
-                    transition: all .3s ease;
+                    transition: all 0.3s ease;
                     display: block;
                     padding: 0;
                     text-indent: -9999px;
@@ -90,7 +90,7 @@
                         outline: 0;
                     }
                     &:hover {
-                        background: $primary-color;
+                        background: $primary;
                     }
                 }
                 &.slick-active {
@@ -98,7 +98,7 @@
                     width: 10px;
                     border-radius: 50%;
                     button {
-                        background-color: $primary-color;
+                        background-color: $primary;
                     }
                 }
             }

assets/scss/components/_testimonial-section.scss

@@ -99,7 +99,7 @@
             outline: 0;
           }
           &:hover {
-            background: $primary-color;
+            background: $primary;
           }
         }
         &.slick-active {
@@ -107,7 +107,7 @@
           width: 10px;
           border-radius: 50%;
           button {
-            background-color: $primary-color;
+            background-color: $primary;
           }
         }
       }

layouts/partials/hero.html

@@ -50,10 +50,10 @@
             <div class="thumb">
               <img src="{{ .videoThumb }}" alt="popup" />
             </div>
-            <a href="{{ .videoURL }}" type="button" class="popup-button">
+
+            <a href="{{ .videoURL }}" type="button" class="popup-button text-center big">
               <svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24">
-                <path fill="#5d78ff"
-                  d="M17.961 10.264a2 2 0 010 3.473L2.992 22.29A2 2 0 010 20.554V3.446A2 2 0 012.992 1.71z"
+                <path d="M17.961 10.264a2 2 0 010 3.473L2.992 22.29A2 2 0 010 20.554V3.446A2 2 0 012.992 1.71z"
                   data-name="Polygon 4" />
               </svg>
             </a>