diff --git a/components/consultancy-service/network/network.module.css b/components/consultancy-service/network/network.module.css
index 37d4b174..56855c94 100644
--- a/components/consultancy-service/network/network.module.css
+++ b/components/consultancy-service/network/network.module.css
@@ -27,7 +27,7 @@
   width: 100%;
   padding-left: 4em;
   padding-top: 4em;
-  background: linear-gradient(180deg, #8040D2 0%, rgba(30, 32, 73, 0) 100%);
+  background: linear-gradient(180deg, ‘var(—div-background-color),' 0%, rgba(30, 32, 73, 0) 100%);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
diff --git a/components/learn/courseDetails/WeeklyActivities.js b/components/learn/courseDetails/WeeklyActivities.js
index 5a5dd624..80de02e0 100644
--- a/components/learn/courseDetails/WeeklyActivities.js
+++ b/components/learn/courseDetails/WeeklyActivities.js
@@ -58,7 +58,10 @@ const WeeklyActivities = ({ enrolledCourses, modules, userModules }) => {
 
   return (
     <div className="courses-details banner-bg">
-      <div className="row week-row" style={{ backgroundColor: "#14152b" }}>
+      <div
+        className="row week-row"
+        style={{ backgroundColor: "‘var(—div-background-color)’," }}
+      >
         <div className="col-10 course-sidebar-width col-md-3 pr-0 scroll-sidebar">
           <CourseSidebar
             course={course}
diff --git a/components/learn/courseDetails/coursesDetails.css b/components/learn/courseDetails/coursesDetails.css
index c07f642c..69a7defe 100644
--- a/components/learn/courseDetails/coursesDetails.css
+++ b/components/learn/courseDetails/coursesDetails.css
@@ -53,12 +53,12 @@
   border: 1px solid rgb(223, 222, 222);
   color: rgb(61, 61, 61) !important;
 }
-.lesson-button:hover{
-  background: #6938EF;
+.lesson-button:hover {
+  background: #6938ef;
 }
-.quiz-button:hover{
+.quiz-button:hover {
   background: white;
-  color: #6938EF;
+  color: #6938ef;
 }
 
 /* User Banner */
@@ -165,12 +165,12 @@
   color: rgb(204, 203, 203);
 }
 .course-weeks {
-  background: #1C1D37;
+  background: #1c1d37;
   box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04),
     inset 7px 7px 14px rgba(255, 255, 255, 0.09);
   border-radius: 16px;
   cursor: pointer;
-  border: 3px solid #6938EF;
+  border: 3px solid #6938ef;
   padding: 20px 0;
 }
 .course-weeks .progress {
@@ -181,7 +181,7 @@
   padding-top: 6rem;
   display: flex;
   justify-content: space-between;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 .modules-details {
   background-color: #1c1d37;
@@ -211,7 +211,7 @@
 }
 
 .banner-bg {
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 .week-row {
diff --git a/components/learn/learn-css/CourseCategories.css b/components/learn/learn-css/CourseCategories.css
index 46247783..eef027a5 100644
--- a/components/learn/learn-css/CourseCategories.css
+++ b/components/learn/learn-css/CourseCategories.css
@@ -1,24 +1,24 @@
-.courses{
-    background: #14152B;
-    color: white;
-}
-.search-input{
-    border: 1px solid white !important;
-    border-top-left-radius: 4px !important;
-    border-bottom-left-radius: 4px !important;
-}
-.learn-filter{
-    height: calc(1.5em + .75rem + 2px);
-    padding: 0px;
-    line-height: 1.5;
-    background-color: #fff;
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-    transition: .15s ease-in-out;
-    outline: none;
-}
-.dropdown-toggle::after{
-    color: gray !important;
+.courses {
+  background: ‘var(—div-background-color) ’;
+  color: white;
+}
+.search-input {
+  border: 1px solid white !important;
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}
+.learn-filter {
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0px;
+  line-height: 1.5;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  transition: 0.15s ease-in-out;
+  outline: none;
+}
+.dropdown-toggle::after {
+  color: gray !important;
 }
 .my-courses::after {
   content: "";
@@ -118,9 +118,10 @@
 }
 
 .course-earn-style:hover {
-  background: #8040d2;
+  background: ‘var(—div-background-color),
+    ";
   cursor: pointer;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),";
   transition: all 0.6s ease-in-out;
 }
 
@@ -156,7 +157,7 @@
 }
 
 .courseModal {
-  background-color: #13152A;
+  background-color: #13152a;
 }
 .search-items .search-input {
   font-size: 15px !important;
@@ -185,64 +186,64 @@
 }
 
 .options-type .course-search,
-.learn-filter{
-    color: #151371;
-    font-weight: 500;
-    font-size: 15px;
-    /* width: 130px; */
-    cursor: pointer;
-}
-.courseCategory-title{
-    font-size: 20px;
-    color: #ffffff;
-    text-align: center !important;
-}
-.courses .bg-circle-featured-top{
-    background: rgb(143 0 255 / 61%);
-    mix-blend-mode: hard-light;
-    box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
-    filter: blur(113.94px);
-    position: absolute;
-    border-radius: 50%;
-    right: 30%;
-    top: -60px;
-    width: 140px;
-    height: 140px;
-}
-.courses .bg-circle-featured-right{
-    position: absolute;
-    width: 130.95px;
-    height: 140.28px;
-    background: rgb(204 0 255 / 87%);
-    border-radius: 50%;
-    mix-blend-mode: hard-light;
-    box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
-    filter: blur(113.94px);
-    right: 0%;
-    top: 20%;
-}
-.courses .bg-circle-recomended-left{
-    position: absolute;
-    width: 130.95px;
-    height: 140.28px;
-    background: rgb(204 0 255 / 87%);
-    border-radius: 50%;
-    mix-blend-mode: hard-light;
-    box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
-    filter: blur(113.94px);
-    left: 15%;
-}
-.courses .bg-circle-recomended-right{
-    top: 60px;
-    right: 0%;
-    height: 120px;
-    width: 120px;
-    background: rgb(143 0 255);
-    mix-blend-mode: hard-light;
-    box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
-    filter: blur(113.94px);
-    position: absolute;
-    border-radius: 50%;
+.learn-filter {
+  color: #151371;
+  font-weight: 500;
+  font-size: 15px;
+  /* width: 130px; */
+  cursor: pointer;
+}
+.courseCategory-title {
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center !important;
+}
+.courses .bg-circle-featured-top {
+  background: rgb(143 0 255 / 61%);
+  mix-blend-mode: hard-light;
+  box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
+  filter: blur(113.94px);
+  position: absolute;
+  border-radius: 50%;
+  right: 30%;
+  top: -60px;
+  width: 140px;
+  height: 140px;
+}
+.courses .bg-circle-featured-right {
+  position: absolute;
+  width: 130.95px;
+  height: 140.28px;
+  background: rgb(204 0 255 / 87%);
+  border-radius: 50%;
+  mix-blend-mode: hard-light;
+  box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
+  filter: blur(113.94px);
+  right: 0%;
+  top: 20%;
+}
+.courses .bg-circle-recomended-left {
+  position: absolute;
+  width: 130.95px;
+  height: 140.28px;
+  background: rgb(204 0 255 / 87%);
+  border-radius: 50%;
+  mix-blend-mode: hard-light;
+  box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
+  filter: blur(113.94px);
+  left: 15%;
+}
+.courses .bg-circle-recomended-right {
+  top: 60px;
+  right: 0%;
+  height: 120px;
+  width: 120px;
+  background: rgb(143 0 255);
+  mix-blend-mode: hard-light;
+  box-shadow: inset 0px 4px 4px rgb(0 0 0 / 25%);
+  filter: blur(113.94px);
+  position: absolute;
+  border-radius: 50%;
 }
 
 .learnSearch-btn {
diff --git a/components/learn/learn-css/LearnHeroTabs.module.css b/components/learn/learn-css/LearnHeroTabs.module.css
index 7eaa0df9..4d5ea2b7 100644
--- a/components/learn/learn-css/LearnHeroTabs.module.css
+++ b/components/learn/learn-css/LearnHeroTabs.module.css
@@ -17,7 +17,7 @@
     background: rgba(204, 210, 227, 0.31);
 }
 .lineActive {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
 }
 h2.inactive {
     color: rgba(196, 196, 196, 0.26) ;  
diff --git a/components/learn/learn-css/MyCourses.css b/components/learn/learn-css/MyCourses.css
index de5c911d..3f0685c6 100644
--- a/components/learn/learn-css/MyCourses.css
+++ b/components/learn/learn-css/MyCourses.css
@@ -13,31 +13,31 @@
   margin: 0 !important;
   padding-bottom: 20px;
 }
-.FRCourses .slick-slide{
+.FRCourses .slick-slide {
   display: flex;
 }
-.FRCourses .slick-slide >div {
+.FRCourses .slick-slide > div {
   display: flex;
   padding-right: 40px;
 }
-.courses-slider-controllers{
+.courses-slider-controllers {
   display: flex;
   justify-content: flex-end;
   position: relative;
 }
-.courses-slider-controllers div{
-  margin:15px 15px 20px 0;
+.courses-slider-controllers div {
+  margin: 15px 15px 20px 0;
   cursor: pointer;
 }
-.courses-slider-controllers div i{
+.courses-slider-controllers div i {
   color: #fff;
-  font-size: 18px
+  font-size: 18px;
 }
-.courses-slider-controllers div i:hover{
+.courses-slider-controllers div i:hover {
   color: rgb(165, 165, 165);
 }
 @media only screen and (max-width: 1200px) {
-  .FRCourses .slick-slide >div {
+  .FRCourses .slick-slide > div {
     display: flex;
     padding-right: 25px;
   }
@@ -68,7 +68,7 @@
   .enroll-arrow {
     display: none;
   }
-  .FRCourses .slick-slide >div{
+  .FRCourses .slick-slide > div {
     padding-right: 0;
   }
 }
@@ -81,12 +81,12 @@
   .courses-width {
     width: 100%;
   }
-  .FRCourses .slick-slide >div{
+  .FRCourses .slick-slide > div {
     padding: 0 20px;
   }
 }
 .earn-rate {
-  background-color: #8040D2;
+  background-color: "var(—-div-background-color);"
   border-radius: 10px;
   color: #000;
   width: 100px;
@@ -103,6 +103,6 @@
   height: 0.75rem !important;
   width: 100%;
   margin-top: 1.65rem;
-  background: #14152A;
+  background: #14152a;
   border-radius: 17px;
 }
diff --git a/components/profile/styles/tabs.module.css b/components/profile/styles/tabs.module.css
index 7eaa0df9..4d5ea2b7 100644
--- a/components/profile/styles/tabs.module.css
+++ b/components/profile/styles/tabs.module.css
@@ -17,7 +17,7 @@
     background: rgba(204, 210, 227, 0.31);
 }
 .lineActive {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
 }
 h2.inactive {
     color: rgba(196, 196, 196, 0.26) ;  
diff --git a/global-styles.css b/global-styles.css
new file mode 100644
index 00000000..c9fca6e8
--- /dev/null
+++ b/global-styles.css
@@ -0,0 +1,5 @@
+:root {
+  --div-background-color: #1c1d37;
+  --div-background-color: #14152b;
+  --div-background-color: #8040d2;
+}
diff --git a/pages/careers/index.js b/pages/careers/index.js
index d2d4cbb4..3fa7bd81 100644
--- a/pages/careers/index.js
+++ b/pages/careers/index.js
@@ -650,7 +650,7 @@ const JobsMain = () => {
                       <div className="apply__section">
                         <div
                           style={{
-                            borderBottom: '1px solid #8040d2',
+                            borderBottom: '1px solid ‘var(—div-background-color),'',
                             paddingBottom: '1rem',
                           }}
                         >
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 66aa8b33..8a69ba46 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap");
 
 /*
 * 1. common styles
@@ -38,7 +38,7 @@ img {
 }
 
 body {
-  font-family: 'Poppins';
+  font-family: "Poppins";
   color: #81868a;
   font-size: 16px;
   line-height: 34px;
@@ -57,7 +57,7 @@ a:visited {
   margin: 0 auto;
   width: 100%;
   min-width: 300px;
-  background-color: #14152b;
+  background-color: ‘var(—div-background-color) ’;
 }
 
 .thm-base-bg {
@@ -164,7 +164,7 @@ a:visited {
   background-color: #fff;
   color: #81868a;
   font-size: 14px;
-  font-family: 'Poppins';
+  font-family: "Poppins";
   font-weight: 600;
   line-height: 48px;
   padding-top: 0;
@@ -173,7 +173,7 @@ a:visited {
   padding-right: 15px;
 }
 
-.bs-tooltip-auto[x-placement^='top'] .arrow::before,
+.bs-tooltip-auto[x-placement^="top"] .arrow::before,
 .bs-tooltip-top .arrow::before {
   border-top-color: #fff;
 }
@@ -305,7 +305,7 @@ a:visited {
 
 .cursor-follower.close-cursor:before {
   position: absolute;
-  content: '';
+  content: "";
   height: 25px;
   width: 2px;
   background: #fff;
@@ -318,7 +318,7 @@ a:visited {
 
 .cursor-follower.close-cursor:after {
   position: absolute;
-  content: '';
+  content: "";
   height: 25px;
   width: 2px;
   background: #fff;
@@ -701,12 +701,12 @@ a:visited {
   max-width: 33.33333%;
 }
 
-[class*='site-header__decor-inner-'] {
+[class*="site-header__decor-inner-"] {
   position: relative;
 }
 
-[class*='site-header__decor-inner-']::before {
-  content: '';
+[class*="site-header__decor-inner-"]::before {
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
@@ -773,7 +773,7 @@ a:visited {
 }
 
 .header__search-btn::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -811,7 +811,7 @@ a:visited {
   padding-left: 30px;
 }
 
-.header__search-form button[type='submit'] {
+.header__search-form button[type="submit"] {
   border: none;
   outline: none;
   width: 46px;
@@ -839,8 +839,8 @@ a:visited {
   right: 10px;
 }
 
-.header__search-form button[type='submit']::before {
-  content: '';
+.header__search-form button[type="submit"]::before {
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -852,11 +852,11 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.header__search-form button[type='submit']:hover {
+.header__search-form button[type="submit"]:hover {
   color: #fff;
 }
 
-.header__search-form button[type='submit']:hover:before {
+.header__search-form button[type="submit"]:hover:before {
   left: 0;
 }
 
@@ -1016,7 +1016,7 @@ a:visited {
   margin: 0;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__'] {
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"] {
   width: 60px;
   height: 60px;
   display: -webkit-box;
@@ -1041,12 +1041,12 @@ a:visited {
   z-index: 91;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__'] i {
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"] i {
   font-size: 22px;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__']::before {
-  content: '';
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"]::before {
+  content: "";
   position: absolute;
   top: 0;
   width: 100%;
@@ -1096,7 +1096,7 @@ a:visited {
 }
 
 .banner-one__slide:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -1130,7 +1130,7 @@ a:visited {
 .banner-one__tag-line {
   margin: 0;
   font-size: 50px;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   color: white;
   text-decoration: underline;
   -webkit-animation-duration: 2s;
@@ -1179,7 +1179,7 @@ a:visited {
   backface-visibility: visible !important;
 }
 
-.banner-one [class*='banner-one__bubble-'] {
+.banner-one [class*="banner-one__bubble-"] {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-timing-function: linear;
@@ -1303,7 +1303,7 @@ a:visited {
 }
 
 .banner-one__cta-icon:before {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -1610,7 +1610,7 @@ a:visited {
 .slider-three__tag-line {
   margin: 0;
   font-size: 34px;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   color: #ff00b8;
   text-decoration: underline;
   margin-bottom: 15px;
@@ -1642,7 +1642,7 @@ a:visited {
   padding-left: 30px;
 }
 
-.slider-three__search button[type='submit'] {
+.slider-three__search button[type="submit"] {
   width: 46px;
   height: 46px;
   border-radius: 50%;
@@ -1660,7 +1660,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit'] i {
+.slider-three__search button[type="submit"] i {
   font-size: 18px;
   color: #fff;
   line-height: 46px;
@@ -1668,8 +1668,8 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit']:before {
-  content: '';
+.slider-three__search button[type="submit"]:before {
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -1681,11 +1681,11 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit']:hover:before {
+.slider-three__search button[type="submit"]:hover:before {
   left: 0;
 }
 
-[class*='slider-three__icon-'] {
+[class*="slider-three__icon-"] {
   position: absolute;
 }
 
@@ -1861,7 +1861,7 @@ a:visited {
 }
 
 .contact-info-one__icon::before {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border: 2px solid #ff00b8;
@@ -1878,22 +1878,22 @@ a:visited {
   color: #fff;
 }
 
-.contact-info-one [class*='col-lg-']:nth-child(2) .contact-info-one__icon {
+.contact-info-one [class*="col-lg-"]:nth-child(2) .contact-info-one__icon {
   background-color: #151371;
 }
 
 .contact-info-one
-  [class*='col-lg-']:nth-child(2)
+  [class*="col-lg-"]:nth-child(2)
   .contact-info-one__icon::before {
   border-color: #151371;
 }
 
-.contact-info-one [class*='col-lg-']:nth-child(3) .contact-info-one__icon {
+.contact-info-one [class*="col-lg-"]:nth-child(3) .contact-info-one__icon {
   background-color: #ffc700;
 }
 
 .contact-info-one
-  [class*='col-lg-']:nth-child(3)
+  [class*="col-lg-"]:nth-child(3)
   .contact-info-one__icon::before {
   border-color: #ffc700;
 }
@@ -1977,7 +1977,7 @@ a:visited {
   margin-right: -5px;
 }
 
-.contact-one .row.low-gutters > [class*='col-'] {
+.contact-one .row.low-gutters > [class*="col-"] {
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -2009,7 +2009,7 @@ a:visited {
 }
 
 .gallery-one__single:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2058,79 +2058,79 @@ a:visited {
   padding-bottom: 120px;
 }
 
-.faq-one [class*='col-lg-'] {
+.faq-one [class*="col-lg-"] {
   border-bottom: 1px solid #f1f1f1;
   padding-top: 70px;
   padding-bottom: 70px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(odd) {
+.faq-one [class*="col-lg-"]:nth-child(odd) {
   padding-right: 76px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(even) {
+.faq-one [class*="col-lg-"]:nth-child(even) {
   border-left: 1px solid #f1f1f1;
   padding-left: 76px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1),
-.faq-one [class*='col-lg-']:nth-child(2) {
+.faq-one [class*="col-lg-"]:nth-child(1),
+.faq-one [class*="col-lg-"]:nth-child(2) {
   padding-top: 0;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(2) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(2) .faq-one__icon span {
   background-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(2) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(2) .faq-one__icon span:before {
   border-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(3) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(3) .faq-one__icon span {
   background-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(3) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(3) .faq-one__icon span:before {
   border-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(4) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(4) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(4) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(4) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(5) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(5) .faq-one__icon span {
   background-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(5) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(5) .faq-one__icon span:before {
   border-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(6) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(6) .faq-one__icon span {
   background-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(6) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(6) .faq-one__icon span:before {
   border-color: #ff00b8;
 }
 
@@ -2160,13 +2160,13 @@ a:visited {
   font-size: 30px;
   color: #fff;
   background-color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   line-height: 70px;
   position: relative;
 }
 
 .faq-one__icon span::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -2242,7 +2242,7 @@ a:visited {
 }
 
 .cta-one__home-one::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2263,7 +2263,7 @@ a:visited {
 }
 
 .diversity-one__home-one::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2344,7 +2344,7 @@ a:visited {
 }
 
 .cta-two__icon span::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -15px;
@@ -2557,7 +2557,7 @@ a:visited {
   margin-top: 50px;
 }
 
-[class*='cta-five__members-'] {
+[class*="cta-five__members-"] {
   width: 71px;
   -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
@@ -2605,7 +2605,7 @@ a:visited {
   right: 25%;
 }
 
-[class*='cta-five__bubble-'] {
+[class*="cta-five__bubble-"] {
   background-color: #ff00b8;
   -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
@@ -2619,7 +2619,7 @@ a:visited {
   line-height: 47px;
 }
 
-[class*='cta-five__bubble-'] i.fa-rocket {
+[class*="cta-five__bubble-"] i.fa-rocket {
   font-size: 18px;
 }
 
@@ -2685,7 +2685,7 @@ a:visited {
 }
 
 .cta-six__title::before {
-  content: '';
+  content: "";
   width: 35px;
   height: 10px;
   background-color: #151371;
@@ -2699,7 +2699,7 @@ a:visited {
 .cta-six__title span {
   font-size: 40px;
   color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   font-weight: 400;
 }
 
@@ -2893,7 +2893,7 @@ a:visited {
   margin: 0;
   font-size: 20px;
   color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   line-height: 1em;
 }
 
@@ -2929,7 +2929,7 @@ a:visited {
 }
 
 .team-tab:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3065,30 +3065,30 @@ a:visited {
   padding-bottom: 90px;
 }
 
-.program-one [class*='col-lg-']:nth-child(1) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(1) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__price {
   color: #151371;
 }
 
-.program-one [class*='col-lg-']:nth-child(1) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__single:after {
   border-color: #151371;
 }
 
-.program-one [class*='col-lg-']:nth-child(2) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(2) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__price {
   color: #ff00b8;
 }
 
-.program-one [class*='col-lg-']:nth-child(2) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__single:after {
   border-color: #ff00b8;
 }
 
-.program-one [class*='col-lg-']:nth-child(3) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(3) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__price {
   color: #ffc700;
 }
 
-.program-one [class*='col-lg-']:nth-child(3) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__single:after {
   border-color: #ffc700;
 }
 
@@ -3102,7 +3102,7 @@ a:visited {
 }
 
 .program-one__single::before {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   top: 0;
@@ -3115,7 +3115,7 @@ a:visited {
 }
 
 .program-one__single::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3218,30 +3218,30 @@ a:visited {
   padding-bottom: 90px;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__price {
   color: #151371;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__single:after {
   border-color: #151371;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__price {
   color: #ff00b8;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__single:after {
   border-color: #ff00b8;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__price {
   color: #ffc700;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__single:after {
   border-color: #ffc700;
 }
 
@@ -3255,7 +3255,7 @@ a:visited {
 }
 
 .pricing-one__single::before {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   top: 0;
@@ -3268,7 +3268,7 @@ a:visited {
 }
 
 .pricing-one__single::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3367,7 +3367,7 @@ a:visited {
 }
 
 .become-teacher__form:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   background-image: url(../images/dot-pattern-1-1.png);
@@ -3385,7 +3385,7 @@ a:visited {
 }
 
 .become-teacher__form-top::before {
-  content: '';
+  content: "";
   width: 38px;
   height: 10px;
   background-image: url(../images/become-form-angle.png);
@@ -3526,27 +3526,27 @@ a:visited {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(1) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(1) .course-one__category {
   background-color: #ffc700;
 }
 
-.course-one [class*='col-lg-']:nth-child(2) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(2) .course-one__category {
   background-color: #151371;
 }
 
-.course-one [class*='col-lg-']:nth-child(3) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(3) .course-one__category {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(4) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(4) .course-one__category {
   background-color: #151371;
 }
 
-.course-one [class*='col-lg-']:nth-child(5) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(5) .course-one__category {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(6) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(6) .course-one__category {
   background-color: #ffc700;
 }
 
@@ -3784,7 +3784,7 @@ a:visited {
 }
 
 .course-one__top-title::before {
-  content: '';
+  content: "";
   width: 145px;
   height: 60px;
   background-color: #f1f1f1;
@@ -3875,7 +3875,7 @@ a:visited {
 
 .course-details__progress-count {
   margin: 0;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
 }
 
 .course-details__progress-bar {
@@ -3900,7 +3900,7 @@ a:visited {
 }
 
 .course-details__progress-bar span:before {
-  content: '';
+  content: "";
   width: 15px;
   height: 15px;
   background-color: #ff00b8;
@@ -4142,7 +4142,7 @@ a:visited {
 }
 
 .course-details__tab-navs li a::before {
-  content: '';
+  content: "";
   width: 35px;
   height: 10px;
   background-color: #151371;
@@ -4428,7 +4428,7 @@ a:visited {
 }
 
 .course-details__meta-icon:before {
-  content: '';
+  content: "";
   position: absolute;
   left: -5px;
   top: 0;
@@ -4579,7 +4579,7 @@ a:visited {
 }
 
 .course-one__top-title.home-one:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -4694,7 +4694,7 @@ a:visited {
 }
 
 .course-category-one__icon:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -4795,7 +4795,7 @@ a:visited {
 }
 
 .course-category-two__single:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0px;
@@ -4807,7 +4807,7 @@ a:visited {
 }
 
 .course-category-two__single:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 10px;
@@ -4933,7 +4933,7 @@ a:visited {
 }
 
 .course-one.home-two:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5039,7 +5039,7 @@ a:visited {
 }
 
 .course-category-three__content::before {
-  content: '';
+  content: "";
   width: 30px;
   height: 10px;
   background-color: #fff;
@@ -5094,7 +5094,7 @@ a:visited {
 }
 
 .inner-banner::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5156,7 +5156,7 @@ a:visited {
 }
 
 .thm-breadcrumb li + li::before {
-  content: '.';
+  content: ".";
   color: #fff;
   margin-left: 15px;
   margin-right: 15px;
@@ -5272,7 +5272,7 @@ a:visited {
 
 .blog-one__meta a:before {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -5286,7 +5286,7 @@ a:visited {
 
 .blog-one__meta a:after {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -5676,7 +5676,7 @@ a:visited {
 }
 
 .blog-two:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5768,7 +5768,7 @@ a:visited {
 }
 
 .blog-two__date::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -5786,7 +5786,7 @@ a:visited {
 
 .blog-two__date span {
   font-weight: 400;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   font-size: 18px;
   letter-spacing: 0em;
 }
@@ -5832,7 +5832,7 @@ a:visited {
 }
 
 .blog-two__meta a + a:before {
-  content: '.';
+  content: ".";
   font-size: 16px;
   font-weight: 600;
   color: #fff;
@@ -5937,7 +5937,7 @@ a:visited {
   color: #151371;
 }
 
-.search-popup__form button[type='submit'] {
+.search-popup__form button[type="submit"] {
   border: none;
   outline: none;
   width: 60px;
@@ -5954,7 +5954,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.search-popup__form button[type='submit']:hover {
+.search-popup__form button[type="submit"]:hover {
   background-color: #151371;
   color: #ff00b8;
 }
@@ -6050,8 +6050,8 @@ a:visited {
 }
 
 .sidebar__category-list-item a:before {
-  content: '\f105';
-  font-family: 'Font Awesome 5 Free';
+  content: "\f105";
+  font-family: "Font Awesome 5 Free";
   color: #151371;
   font-weight: 900;
   font-size: 14px;
@@ -6137,7 +6137,7 @@ a:visited {
   color: #81868a;
 }
 
-.sidebar__search-form button[type='submit'] {
+.sidebar__search-form button[type="submit"] {
   width: 41px;
   height: 41px;
   border-radius: 50%;
@@ -6155,7 +6155,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit'] i {
+.sidebar__search-form button[type="submit"] i {
   font-size: 14px;
   color: #fff;
   line-height: 41px;
@@ -6163,8 +6163,8 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit']:before {
-  content: '';
+.sidebar__search-form button[type="submit"]:before {
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -6176,7 +6176,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit']:hover:before {
+.sidebar__search-form button[type="submit"]:hover:before {
   left: 0;
 }
 
@@ -6201,7 +6201,7 @@ a:visited {
 }
 
 .about-one__img:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   position: absolute;
@@ -6362,7 +6362,7 @@ a:visited {
 }
 
 .about-two__image:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -6376,7 +6376,7 @@ a:visited {
 }
 
 .about-two__image:after {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   position: absolute;
@@ -6429,7 +6429,7 @@ a:visited {
 }
 
 .about-two__count:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 15px;
   left: 15px;
@@ -6475,7 +6475,7 @@ a:visited {
 }
 
 .video-one:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -6530,7 +6530,7 @@ a:visited {
 }
 
 .video-one__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -6561,7 +6561,7 @@ a:visited {
 }
 
 .video-two::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -6621,7 +6621,7 @@ a:visited {
 }
 
 .video-two__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -15px;
@@ -6651,7 +6651,7 @@ a:visited {
 }
 
 .video-three .container:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   position: absolute;
@@ -6736,7 +6736,7 @@ a:visited {
 }
 
 .video-three__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -6884,7 +6884,7 @@ a:visited {
 }
 
 .testimonials-one__qoute::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -7026,7 +7026,7 @@ a:visited {
 }
 
 .meeting-one__bubble:before {
-  content: '';
+  content: "";
   width: 24px;
   height: 17px;
   position: absolute;
@@ -7194,7 +7194,7 @@ a:visited {
 }
 
 .mailchimp-one__icon i:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -7300,7 +7300,7 @@ html {
 */
 /* homepage navbar */
 .homepage__header {
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   color: #ffffff;
   position: absolute;
   top: -3px;
@@ -7308,7 +7308,7 @@ html {
   width: 100%;
   z-index: 99;
   border-bottom: 1px solid #9379ff;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .homepage__topbar {
@@ -7454,7 +7454,7 @@ html {
   display: flex;
   align-items: center;
   position: relative;
-  font-family: 'Graphik', sans-serif;
+  font-family: "Graphik", sans-serif;
   letter-spacing: 0.5px;
   font-size: 0.9rem;
   font-weight: 500;
@@ -7562,7 +7562,7 @@ html {
 }
 
 .connect__button {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   border-radius: 100px;
   max-width: 200px;
   line-height: 30px;
@@ -7685,7 +7685,7 @@ html {
 .login-form {
   border-bottom: 1px solid rgba(255, 255, 255, 0.568);
   padding: 0.5rem 0 1.5rem 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   font-weight: normal;
 }
 
@@ -7718,7 +7718,7 @@ html {
 }
 
 .dropdown-login .login-input .fas {
-  font-family: 'Font Awesome 5 Free', 'Red Hat Display';
+  font-family: "Font Awesome 5 Free", "Red Hat Display";
 }
 
 .dropdown-login .login-input .form-control {
@@ -7768,7 +7768,7 @@ html {
 
   width: auto;
   border-radius: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   padding: 0;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 }
@@ -7817,7 +7817,7 @@ html {
   left: 0;
   width: 100%;
   z-index: 999;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   -webkit-box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.06);
   box-shadow: 0px 6px 13px 0px rgba(167, 167, 167, 0.11);
   -webkit-animation: fadeInDown 0.3s ease-in-out 0s 1 normal none running;
@@ -7850,13 +7850,13 @@ html {
 
 .nav__mobile {
   display: block;
-  background-color: #14152b;
+  background-color: ‘var(—div-background-color) ’;
   position: absolute;
   width: 100%;
   top: 100px;
   height: 500px;
   left: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   overflow-y: scroll;
   overflow-x: scroll;
   -webkit-animation: fadeInDown 0.3s ease-in-out 0s 1 normal none running;
@@ -8036,7 +8036,7 @@ html {
   width: 100%;
   top: 100px;
   left: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   overflow-y: scroll;
   overflow-x: scroll;
   -webkit-animation: fadeInDown 0.3s ease-in-out 0s 1 normal none running;
@@ -8342,9 +8342,9 @@ html {
 .homepage__hero {
   position: relative;
   padding-top: 120px;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 .homepage__hero .container {
@@ -8461,9 +8461,9 @@ html {
 
 /*============================ homepage About ============================*/
 .homepage__about {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   padding-top: 100px;
   padding-bottom: 200px;
   overflow-x: clip;
@@ -8489,7 +8489,7 @@ html {
 
 /* gradient */
 .yt-lite::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: 0;
@@ -8506,7 +8506,7 @@ html {
   thanks https://css-tricks.com/responsive-iframes/
 */
 .yt-lite::after {
-  content: '';
+  content: "";
   display: block;
   padding-bottom: calc(100% / (16 / 9));
 }
@@ -8524,7 +8524,7 @@ html {
   width: 200px;
   height: 170px;
   /* background-color: #fff; */
-  background-image: url('/assets/images/home-page/play-button.png');
+  background-image: url("/assets/images/home-page/play-button.png");
   z-index: 1;
   opacity: 1;
   background-repeat: no-repeat;
@@ -8624,8 +8624,8 @@ html {
 
 /*============================ homepage get-started ============================*/
 .homepage__get-started {
-  background: #14152b;
-  font-family: 'Poppins', sans-serif;
+  background: ‘var(—div-background-color) ’;
+  font-family: "Poppins", sans-serif;
   overflow-x: clip;
 }
 
@@ -8636,7 +8636,7 @@ html {
 }
 
 .homepage__get-started .get-started__learn img {
-  border: 4px solid #8040d2;
+  border: 4px solid ‘var(—div-background-color),';
   box-sizing: border-box;
   box-shadow: -25px 20px 44px rgba(84, 48, 209, 0.4);
   border-radius: 20px;
@@ -8650,7 +8650,7 @@ html {
 }
 
 .get-started__learn .learn-bottom a {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   border-radius: 60px;
   padding: 6px 15px;
   margin-right: 1rem;
@@ -8669,9 +8669,9 @@ html {
 
 /*============================ homepage Partners & Allies ============================*/
 .homepage__partners {
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   padding-top: 10rem;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .homepage__partners .allies-header h2 {
@@ -8690,7 +8690,7 @@ html {
 }
 
 .homepage__partners .line-active {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
 }
 
 .homepage__partners .see-all {
@@ -8702,7 +8702,7 @@ html {
 
 .see-all__line {
   display: block;
-  background-image: url('/assets/images/home-page/line.png');
+  background-image: url("/assets/images/home-page/line.png");
   height: 2px;
   background-size: contain;
   margin-bottom: 10px;
@@ -8714,7 +8714,7 @@ html {
   width: fit-content;
   margin-top: 60px;
   font-size: 18px;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),';
   border-radius: 100px;
   padding: 15px;
 }
@@ -8732,7 +8732,7 @@ html {
 .sponsor-col a {
   margin-bottom: 2rem;
   border-radius: 22px;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),';
   padding: 0px 5px;
   background: rgba(100, 104, 121, 0.2);
 }
@@ -8759,7 +8759,7 @@ html {
 /*============================ homepage Reviews ============================*/
 .homepage__Reviews {
   padding: 60px 0;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 .homepage__Reviews .container .swiper-container {
@@ -8790,7 +8790,7 @@ html {
   margin: 0;
   margin-right: 10px;
   border: none;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 #tweet-1455675414765051905 .homepage__comment {
@@ -8844,7 +8844,7 @@ html {
 }
 
 .homepage__comment .card-body .card__header h2 {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: bold;
   font-size: 24px;
@@ -8863,7 +8863,7 @@ html {
 
 .card__quote {
   padding: 1rem 0;
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: normal;
   font-size: 24px;
@@ -8871,7 +8871,7 @@ html {
 
 .card__header__position {
   color: #a7a7a7;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 20px;
   letter-spacing: 3.2px;
 }
@@ -8932,9 +8932,9 @@ blockquote.twitter-tweet {
 /* Donate amount */
 .homepage__donate {
   position: relative;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   padding: 60px 0;
   padding-bottom: 200px;
 }
@@ -9037,7 +9037,7 @@ p.donate__container-subtitle {
 
 .step-active {
   color: #fff;
-  border-bottom: 4px solid #8040d2;
+  border-bottom: 4px solid ‘var(—div-background-color),';
 }
 
 .step__amount {
@@ -9079,7 +9079,7 @@ p.donate__container-subtitle {
 .step__amount-item:active,
 .step__amount-item:focus,
 .step__amount-item:focus:active {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   color: #fff;
   outline: none;
   box-shadow: none;
@@ -9097,7 +9097,7 @@ p.donate__container-subtitle {
   font-size: 30px;
   font-weight: 600;
   text-align: center;
-  color: #14152b;
+  color: ‘var(—div-background-color) ’;
   /* Firefox */
   -moz-appearance: textfield;
 }
@@ -9134,7 +9134,7 @@ p.donate__container-subtitle {
   padding: 1rem 1.4rem;
   text-align: center;
   border: none;
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   border-radius: 100px;
   display: flex;
   margin-left: auto;
@@ -9168,7 +9168,7 @@ p.donate__container-subtitle {
 
 .step__payment .step__payment-change p:hover {
   cursor: pointer;
-  color: #8040d2;
+  color: ‘var(—div-background-color),';
 }
 
 .step__payment-monthly {
@@ -9196,7 +9196,7 @@ p.donate__container-subtitle {
   width: 20px;
   margin: 0;
   cursor: pointer;
-  border: 2px solid #8040d2;
+  border: 2px solid ‘var(—div-background-color),';
   background: transparent;
   border-radius: 50%;
   overflow: hidden;
@@ -9208,7 +9208,7 @@ p.donate__container-subtitle {
 
 .step__payment-option::before,
 .step__payment-option::after {
-  content: '';
+  content: "";
   display: flex;
   justify-self: center;
   border-radius: 50%;
@@ -9218,7 +9218,7 @@ p.donate__container-subtitle {
   position: absolute;
   width: 100%;
   height: 100%;
-  background: #8040D2;
+  background: ‘var(—div-background-color),';
   z-index: 1;
   opacity: var(--opacity, 1);
 } */
@@ -9226,7 +9226,7 @@ p.donate__container-subtitle {
   position: relative;
   width: calc(100% / 2);
   height: calc(100% / 2);
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   top: var(--y, 100%);
   transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
 }
@@ -9254,7 +9254,7 @@ p.donate__container-subtitle {
 .step__payment-option:focus,
 .step__payment-option:focus:active {
   color: #000;
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
   font-weight: 700;
   cursor: pointer;
   outline: none;
@@ -9351,16 +9351,16 @@ p.donate__container-subtitle {
   text-align: center;
   position: relative;
   width: 100%;
-  border: 2px solid #8040d2;
+  border: 2px solid ‘var(—div-background-color),';
   vertical-align: center;
   cursor: pointer;
   padding: 3px;
-  color: #8040d2;
+  color: ‘var(—div-background-color),';
 }
 
 .payment__buttons .stripe-payment a:hover {
   color: #fff;
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
 }
 
 .donate__modal-bg {
@@ -9398,7 +9398,7 @@ p.donate__container-subtitle {
   line-height: 2;
   color: #6772e5;
   margin-top: 0.8rem;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
 }
 
 .donate__modal-content {
@@ -9469,7 +9469,7 @@ p.donate__container-subtitle {
 .site-footer {
   background-color: #1c1d37;
   overflow: hidden;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 24px;
 }
 
@@ -9572,7 +9572,7 @@ p.donate__container-subtitle {
 }
 
 .site-footer__scroll-top::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -9757,7 +9757,7 @@ p.donate__container-subtitle {
 }
 
 .footer-widget__link-list li a:hover {
-  color: #8040d2;
+  color: ‘var(—div-background-color),';
 }
 
 .footer-widget__course-list li + li {
@@ -10169,7 +10169,7 @@ p.donate__container-subtitle {
 /*===== minority app section =====*/
 .homepage__app {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #1e3a8a;
   /* background: linear-gradient(
       180deg,
@@ -10245,7 +10245,7 @@ p.donate__container-subtitle {
 .homepage__buy {
   width: 100%;
   background: linear-gradient(90deg, #ff00b8 0%, #ff655b 50.8%, #ffc700 100%);
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: white;
   position: relative;
   padding: 60px 0;
@@ -10381,10 +10381,10 @@ p.donate__container-subtitle {
 /* core principles section */
 .homepage__core {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #efefef;
   /* background: #151371; */
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   padding: 60px 0;
 }
 
@@ -10418,7 +10418,7 @@ p.donate__container-subtitle {
 .img-banner-core-container {
   width: 100px;
   height: 100px;
-  background-color: #8040d2;
+  background-color: ‘var(—div-background-color),';
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10449,7 +10449,7 @@ p.donate__container-subtitle {
 .homepage_core_header {
   height: 400px;
   width: 100px;
-  border: 1.5px solid #8040d2;
+  border: 1.5px solid ‘var(—div-background-color),';
   border-radius: 15px;
 }
 
@@ -10599,9 +10599,9 @@ p.donate__container-subtitle {
   padding-left: 4em;
   padding-bottom: 4em;
   border-radius: 2em;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
   color: white;
-  border: 1.2px solid #8040d2;
+  border: 1.2px solid ‘var(—div-background-color),';
 }
 
 .popup_heading-core {
@@ -10626,7 +10626,7 @@ p.donate__container-subtitle {
 }
 
 .popup_image_container-core::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -8px;
@@ -10646,7 +10646,7 @@ p.donate__container-subtitle {
 }
 
 .popup_image_container-core.blue::before {
-  border: 2px solid #8040d2;
+  border: 2px solid ‘var(—div-background-color),';
 }
 
 .popup_image_container-core:hover::before {
@@ -10674,7 +10674,7 @@ p.donate__container-subtitle {
 
 .popup_image_container-core.blue,
 .popup_title_container-core.blue {
-  background: #8040d2;
+  background: ‘var(—div-background-color),';
 }
 
 .popup_title-core {
@@ -10772,7 +10772,7 @@ p.donate__container-subtitle {
 /* the minority wave section */
 .homepage__wave {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #1e3a8a;
   background: #efefef;
   padding: 60px 0;
@@ -10911,7 +10911,7 @@ p.donate__container-subtitle {
 /* the minority team section */
 .homepage__team {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #fff;
   /* background-image: linear-gradient(
     to top,
@@ -11007,7 +11007,7 @@ p.donate__container-subtitle {
 }
 
 .team__item-text h2::after {
-  content: '';
+  content: "";
   position: absolute;
   display: inline-block;
   height: 2px;
@@ -11166,7 +11166,7 @@ p.donate__container-subtitle {
 /* the minority testimonials section */
 .homepage__testimonials {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #fff;
   /* background-image: linear-gradient(
     to bottom,
@@ -11215,8 +11215,8 @@ p.donate__container-subtitle {
 }
 
 .homepage__testimonials-right h4::before {
-  font-family: 'Font Awesome 5 Free';
-  content: '\f10d';
+  font-family: "Font Awesome 5 Free";
+  content: "\f10d";
   position: absolute;
   color: #ffc700;
   font-weight: 900;
@@ -11242,7 +11242,7 @@ p.donate__container-subtitle {
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__'] {
+  [class*="homepage-carousel-btn__"] {
   width: 50px;
   height: 50px;
   display: -webkit-box;
@@ -11269,13 +11269,13 @@ p.donate__container-subtitle {
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__']:hover {
+  [class*="homepage-carousel-btn__"]:hover {
   background-color: rgba(255, 255, 255, 0.692);
 }
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__']
+  [class*="homepage-carousel-btn__"]
   i {
   font-size: 22px;
   font-weight: bold;
@@ -11777,7 +11777,7 @@ p.donate__container-subtitle {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: url('/assets/images/icons/AdobeStock_263530636.jpeg');
+  background: url("/assets/images/icons/AdobeStock_263530636.jpeg");
   font-size: calc(0.5rem + 0.5vw);
   background-position: center;
 }
@@ -11814,11 +11814,11 @@ p.donate__container-subtitle {
 }
 
 .headerRight {
-  display: 'flex';
-  gap: '20px';
-  align-items: 'center';
-  font-size: '15px';
-  font-weight: '600';
+  display: "flex";
+  gap: "20px";
+  align-items: "center";
+  font-size: "15px";
+  font-weight: "600";
 }
 
 .slick-prev:before,
diff --git a/public/assets/images/career-building.svg b/public/assets/images/career-building.svg
index 79130635..7e27f577 100644
--- a/public/assets/images/career-building.svg
+++ b/public/assets/images/career-building.svg
@@ -10,39 +10,39 @@
 <path d="M13.3052 44.7213C13.3052 44.7216 13.3056 44.7217 13.3058 44.7215C14.511 42.8862 16.2029 42.5931 17.8089 43.6036C19.3358 44.613 20.4595 46.5399 19.4151 48.6545L17.4872 52.5083C16.2819 54.3457 14.0333 54.6204 12.5075 53.335C11.1853 52.2025 10.7885 50.2604 11.3149 48.6357C11.33 48.5893 11.3492 48.5444 11.3715 48.501L13.3046 44.7212C13.3047 44.7208 13.3052 44.721 13.3052 44.7213V44.7213Z" stroke="url(#paint8_linear_345_3018)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
 <linearGradient id="paint0_linear_345_3018" x1="9.41866" y1="6.45892" x2="9.41866" y2="43.8522" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint1_linear_345_3018" x1="46.5881" y1="42.658" x2="46.5881" y2="51.3866" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint2_linear_345_3018" x1="41.3884" y1="48.6243" x2="41.3884" y2="56.7024" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint3_linear_345_3018" x1="53.4749" y1="35.2463" x2="53.4749" y2="46.0533" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint4_linear_345_3018" x1="44.4734" y1="2" x2="44.4734" y2="62.0541" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint5_linear_345_3018" x1="33.9088" y1="54.8398" x2="33.9088" y2="65.9401" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint6_linear_345_3018" x1="27.7475" y1="50.8971" x2="27.7475" y2="61.9971" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint7_linear_345_3018" x1="21.5964" y1="46.9695" x2="21.5964" y2="58.0693" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 <linearGradient id="paint8_linear_345_3018" x1="15.4558" y1="43.0293" x2="15.4558" y2="54.1291" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8040D2"/>
+<stop stop-color="‘var(—div-background-color),'"/>
 <stop offset="1" stop-color="#A259FF"/>
 </linearGradient>
 </defs>
diff --git a/public/assets/scss/_homepage.scss b/public/assets/scss/_homepage.scss
index bd6a979b..9b9054b1 100644
--- a/public/assets/scss/_homepage.scss
+++ b/public/assets/scss/_homepage.scss
@@ -1,42 +1,45 @@
-.site-footer__social a svg:hover{
-    path,rect,circle{
-      stroke: #8040D2;
+.site-footer__social a svg:hover {
+  path,
+  rect,
+  circle {
+    stroke: ‘var(—div-background-color),
+      ";
     }
   }
   .site-footer__social a #github-icon:hover{
     path{
-      fill: #8040D2;
-      stroke: none;
-    }
+      fill: ‘var(—div-background-color),";
+    stroke: none;
   }
+}
 // profile settings profile image model
-.setting__profile-img-model div{
+.setting__profile-img-model div {
   margin: auto;
-  .ant-modal-content{
+  .ant-modal-content {
     box-shadow: none;
   }
-  .ant-modal-content .ant-modal-body{
+  .ant-modal-content .ant-modal-body {
     padding: 0;
-    img{
+    img {
       width: 100%;
     }
   }
 }
-// profile settings data picker styels 
-.settings-birthday-field .react-datepicker-wrapper{
+// profile settings data picker styels
+.settings-birthday-field .react-datepicker-wrapper {
   padding: 0;
 }
-.settings-phone-field .react-tel-input{
-  font-family: 'Poppins', sans-serif;
+.settings-phone-field .react-tel-input {
+  font-family: "Poppins", sans-serif;
 }
-.settings-phone-field .react-tel-input .special-label{
+.settings-phone-field .react-tel-input .special-label {
   display: none;
 }
 // profile settings phoneNumber field
-.settings-phone-field .react-tel-input input{
-  background: #24203B;
+.settings-phone-field .react-tel-input input {
+  background: #24203b;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   height: 60px;
   width: 100%;
   color: rgb(255, 255, 255);
@@ -45,20 +48,20 @@
   font-size: 18px;
   font-weight: 500;
 }
-.settings-phone-field .react-tel-input input:focus{
-  border: 1px solid #6938EF;
+.settings-phone-field .react-tel-input input:focus {
+  border: 1px solid #6938ef;
   background: #fff;
-  color: #1C1D37;
+  color: #1c1d37;
 }
-.settings-phone-field .react-tel-input input:hover{
-  border: 1px solid #6938EF;
-  background: #24203B;
+.settings-phone-field .react-tel-input input:hover {
+  border: 1px solid #6938ef;
+  background: #24203b;
   color: #ffffff;
-} 
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control{
-  background: #24203B;
+}
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control {
+  background: #24203b;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   min-height: 60px;
   width: 100%;
   color: rgb(3, 3, 3);
@@ -67,58 +70,61 @@
   font-weight: 500;
   padding-right: 70px;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control{
-  -moz-appearance:none; /* Firefox */
-  -webkit-appearance:none; /* Safari and Chrome */
-  appearance:none;
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control {
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
   background-image: url("/assets/images/settings/arrow-down.svg");
   background-repeat: no-repeat;
   background-position-x: 96%;
   background-position-y: 10px;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control >div{
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control > div {
   height: 100%;
 }
-.settings-phone-field .css-g1d714-ValueContainer{
+.settings-phone-field .css-g1d714-ValueContainer {
   padding: 1rem;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control  .css-319lph-ValueContainer{
+.settings-phone-field
+  .css-b62m3t-container
+  .css-1s2u09g-control
+  .css-319lph-ValueContainer {
   height: 100%;
   padding: 0px 8px;
 }
-.settings-phone-field .css-1okebmr-indicatorSeparator{
+.settings-phone-field .css-1okebmr-indicatorSeparator {
   display: none;
 }
-.settings-phone-field [class~='css-tlfecz-indicatorContainer']:last-of-type  {
+.settings-phone-field [class~="css-tlfecz-indicatorContainer"]:last-of-type {
   display: none;
 }
-.settings-phone-field .css-1hb7zxy-IndicatorsContainer{
-  // border-right: 2px solid #8040D2;
+.settings-phone-field .css-1hb7zxy-IndicatorsContainer {
+  // border-right: 2px solid ‘var(—div-background-color),';
   margin-top: 10px;
 }
-.settings-phone-field .css-1pahdxg-control:hover{
-  border-color: #6938EF;
+.settings-phone-field .css-1pahdxg-control:hover {
+  border-color: #6938ef;
 }
-.settings-phone-field .css-1pahdxg-control{
+.settings-phone-field .css-1pahdxg-control {
   border-radius: 8px !important;
-  border: 1px solid #6938EF !important;
+  border: 1px solid #6938ef !important;
   background: #fff !important;
   box-shadow: none;
-  .css-1rhbuit-multiValue{
-    background: #1C1D37 !important;
+  .css-1rhbuit-multiValue {
+    background: #1c1d37 !important;
   }
-  .css-12jo7m5{
+  .css-12jo7m5 {
     color: #fff;
   }
-  .css-tj5bde-Svg{
+  .css-tj5bde-Svg {
     fill: white;
   }
 }
-.settings-phone-field .css-1rhbuit-multiValue{
+.settings-phone-field .css-1rhbuit-multiValue {
   margin-right: 10px;
 }
 // Settings Profile Fourthstep
-.add-socail-links{
+.add-socail-links {
   padding: 0 !important;
 }
 // .add-socail-links > div{
@@ -147,7 +153,7 @@
 // .settings_socail-links-contaner ul .ant-dropdown-menu-item:hover {
 //   background: #6938EF;
 // }
-.add-socail-links input{
+.add-socail-links input {
   text-align: left;
   font-weight: bold !important;
-}
\ No newline at end of file
+}
diff --git a/styles/Careers/index.css b/styles/Careers/index.css
index 73dba6f6..0aa6332b 100644
--- a/styles/Careers/index.css
+++ b/styles/Careers/index.css
@@ -44,7 +44,7 @@
 }
 
 .saved-job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -250,7 +250,7 @@
   border-radius: 10px 10px 0px 0px;
 }
 
-@import './normalizer.css';
+@import "./normalizer.css";
 
 * {
   --mpa-navy: #151371;
@@ -386,7 +386,7 @@
 }
 
 .company-stub-box3-diversity::after {
-  content: '';
+  content: "";
   position: absolute;
   height: 100%;
   width: 50%;
@@ -404,7 +404,7 @@
 }
 
 .company-stub-box3-diversity-score::before {
-  content: '';
+  content: "";
   height: 1.5px;
   width: 100%;
   position: absolute;
@@ -687,7 +687,7 @@
 }
 
 .companyType-custom-checkbox:after {
-  content: '';
+  content: "";
   height: 13px;
   width: 13px;
   border: solid 1px #151371;
@@ -700,7 +700,7 @@
 
 .companyType-custom-checkbox:before {
   display: none;
-  content: '';
+  content: "";
   position: absolute;
   height: 12px;
   width: 6px;
@@ -711,11 +711,11 @@
   transform: rotateZ(40deg);
 }
 
-input[type='date']::-webkit-calendar-picker-indicator {
+input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
-input[type='time']::-webkit-calendar-picker-indicator {
+input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
@@ -750,7 +750,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 }
 
 .jobType-custom-checkbox:after {
-  content: '';
+  content: "";
   height: 13px;
   width: 13px;
   border: solid 1px white;
@@ -763,7 +763,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .jobType-custom-checkbox:before {
   display: none;
-  content: '';
+  content: "";
   position: absolute;
   height: 12px;
   width: 6px;
@@ -774,11 +774,11 @@ input[type='time']::-webkit-calendar-picker-indicator {
   transform: rotateZ(40deg);
 }
 
-input[type='date']::-webkit-calendar-picker-indicator {
+input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
-input[type='time']::-webkit-calendar-picker-indicator {
+input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
@@ -810,9 +810,10 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .job-filter-item-title {
   color: white;
-  font-family: 'Red Hat Display';
+  font-family: "Red Hat Display";
   background: #1c1d37;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),
+    ";
   width: 100%;
   box-sizing: border-box;
   box-shadow: 10px 32px 41px rgba(0, 0, 0, 0.25);
@@ -842,7 +843,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
   position: absolute;
   min-width: 140px;
   /* background: white; */
-  box-shadow: 0 0 12px #8040d2;
+  box-shadow: 0 0 12px ‘var(—div-background-color),";
   z-index: 2;
   /* color: black; */
 }
@@ -938,7 +939,8 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .job-search-filter > input {
   background: rgba(58, 53, 81, 0.55);
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),
+    ";
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 100px;
@@ -947,7 +949,9 @@ input[type='time']::-webkit-calendar-picker-indicator {
   display: inline-block;
   color: white;
   font-size: 17px;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "
+      Red Hat Display
+      ", sans-serif;
   /* padding: 1rem 1rem 1rem 2.5rem; */
   font-size: 0.8rem;
 }
@@ -1004,7 +1008,9 @@ input[type='time']::-webkit-calendar-picker-indicator {
   outline: none;
 }
 
-input[type='checkbox'] {
+input[type="
+      checkbox
+      "] {
   margin-right: 6px;
 }
 
@@ -1015,7 +1021,9 @@ input[type='checkbox'] {
   height: 20px;
 }
 
-.jobs-search-switch input[type='checkbox'] {
+.jobs-search-switch input[type="
+      checkbox
+      "] {
   opacity: 0;
   width: 0;
   height: 0;
@@ -1039,7 +1047,8 @@ input[type='checkbox'] {
 
 .jobs-search-slider:before {
   position: absolute;
-  content: '';
+  content: "
+      ";
   height: 12px;
   width: 12px;
   left: 4px;
@@ -1049,15 +1058,19 @@ input[type='checkbox'] {
   transition: 0.4s;
 }
 
-input[type='checkbox']:checked + .jobs-search-slider {
-  background-color: #8040d2;
+input[type="
+      checkbox
+      "]:checked + .jobs-search-slider {
+  background-color: ‘var(—div-background-color),";
 }
 
-input[type='checkbox']:focus + .jobs-search-slider {
-  box-shadow: 0 0 1px #8040d2;
+input[type="checkbox"]:focus + .jobs-search-slider {
+  box-shadow: 0 0 1px ‘var(—div-background-color),
+    ";
 }
 
-input[type='checkbox']:checked + .jobs-search-slider:before {
+input[type=" checkbox
+      "]:checked + .jobs-search-slider:before {
   -webkit-transform: translateX(15px);
   -ms-transform: translateX(15px);
   transform: translateX(15px);
@@ -1166,12 +1179,11 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     margin-top: 0;
     position: relative;
     width: 100%;
-    background: #8040d2;
-    border-radius: 0;
-  }
-  .job-filter-item-form-options {
-    flex-direction: column-reverse;
-  }
+    background: ‘var(—div-background-color),";
+  border-radius: 0;
+}
+.job-filter-item-form-options {
+  flex-direction: column-reverse;
 }
 
 .jobsMain {
@@ -1184,7 +1196,8 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 .jobsMain-search {
   background-color: #1c1d37;
   padding-top: 20px;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),
+    ";
   box-sizing: border-box;
   border-radius: 15px;
   margin-bottom: 20px;
@@ -1281,8 +1294,10 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
   /* grid-column-gap: 1rem; */
   /* color: black; */
   grid-template-areas:
-    'list job'
-    'pagination job';
+    "
+      list job "
+    " pagination job
+      ";
   row-gap: 25px;
 }
 
@@ -1455,7 +1470,8 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .current-job-view-box1-companyInfo-diversity::after {
-  content: '';
+  content: "
+      ";
   position: absolute;
   height: 100%;
   width: 50%;
@@ -1476,7 +1492,8 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .current-job-view-box1-companyInfo-diversity-score::before {
-  content: '';
+  content: "
+      ";
   height: 1.5px;
   width: 100%;
   position: absolute;
@@ -1646,7 +1663,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .job-stub:hover {
-  border: 3px solid #8040d2;
+  border: 3px solid ‘var(—div-background-color),";
 }
 
 .job-stub:first-of-type {
@@ -1690,7 +1707,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -1715,11 +1732,12 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
   justify-content: flex-end;
   font-size: 14px !important;
   border-radius: 50px;
-  border: 1px solid #8040d2;
+  border: 1px solid ‘var(—div-background-color),
+    ";
 }
 
 .job-stub-saveLink:hover {
-  background-color: #8040d2;
+  background-color: ‘var(—div-background-color),";
 }
 
 .job-stub-saved {
@@ -1889,7 +1907,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     grid-gap: 0.5em;
     padding: 100px;
     grid-template-columns: 0.5fr 1.2fr;
-    grid-template-areas: 'careerTopText careerTopPic';
+    grid-template-areas: "careerTopText careerTopPic";
   }
   .careerTopPic {
     grid-area: careerTopPic;
@@ -1903,7 +1921,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 500px;
     height: 230px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 96px;
@@ -1929,7 +1947,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     grid-gap: 0.5em;
     padding: 100px;
     grid-template-columns: 0.5fr 1.2fr;
-    grid-template-areas: 'careerTopText careerTopPic';
+    grid-template-areas: "careerTopText careerTopPic";
   }
   .careerTopPic {
     grid-area: careerTopPic;
@@ -1943,7 +1961,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 287px;
     height: 150px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 55px;
@@ -1978,7 +1996,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 287px;
     height: 150px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 55px;
@@ -2043,7 +2061,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .saved-job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -2113,7 +2131,8 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
   position: absolute;
 }
 .right-grid {
-  border: 0.5px solid #8040d2;
+  border: 0.5px solid ‘var(—div-background-color),
+    ";
   box-shadow: 2px 2px 2px rgba(69, 63, 63, 0.2);
   border-radius: 1.1rem;
   padding: 2.5rem 2.2rem;
@@ -2194,7 +2213,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
   align-items: flex-start;
   justify-content: space-between;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #8040d2;
+  border-bottom: 1px solid ‘var(—div-background-color),";
 }
 
 .apply-button button {
@@ -2224,7 +2243,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 
 .header_searchbar {
   color: white;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   font-size: 2rem;
   margin-bottom: 1.5rem;
   display: flex;
diff --git a/styles/DashboardCSS/dashboard.scss b/styles/DashboardCSS/dashboard.scss
index fcd80b3d..3b82bf19 100644
--- a/styles/DashboardCSS/dashboard.scss
+++ b/styles/DashboardCSS/dashboard.scss
@@ -1,120 +1,119 @@
 @media only screen and (min-width: 768px) {
-  .outer-dashboard-container{
+  .outer-dashboard-container {
     max-width: 1460px;
     padding: 20px;
-    background: #14152B;
+    background: ‘var(—div-background-color) ’;
     color: white;
   }
-  .sidebar-item{
+  .sidebar-item {
     display: flex;
     flex-direction: column;
   }
-  .dashboard-overall-container{
+  .dashboard-overall-container {
     justify-content: center;
     max-width: 1540px;
     width: 100%;
   }
-  .dashboard-navbar-div{
+  .dashboard-navbar-div {
     width: 100%;
   }
-  .dashboard-navbar{
+  .dashboard-navbar {
     width: 80px;
   }
-  .navbar-dashboard-div{
+  .navbar-dashboard-div {
     height: 100%;
   }
 }
 @media only screen and (max-width: 767px) {
-  .sidebar-item{
+  .sidebar-item {
     display: flex;
     flex-direction: row;
   }
-  .show-sidebar-container{
-    background:rgba(0, 0, 0, 0.5);
+  .show-sidebar-container {
+    background: rgba(0, 0, 0, 0.5);
   }
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     height: 100vh;
     width: 100vw;
   }
-  .outer-dashboard-container{
+  .outer-dashboard-container {
     width: 100%;
   }
-  .dashboard-navbar{
+  .dashboard-navbar {
     height: 100vh;
   }
-  .navbar-dashboard-div{
+  .navbar-dashboard-div {
     height: 100vh;
     position: fixed;
     overflow-y: scroll;
     overflow-x: hidden;
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
     z-index: 2;
   }
   .navbar-dashboard-div::-webkit-scrollbar {
-  display: none;
-}
-  .dashboard-overall-container{
+    display: none;
+  }
+  .dashboard-overall-container {
     padding: 0 !important;
     width: 100% !important;
   }
-  .navbar-dashboard-button{
+  .navbar-dashboard-button {
     background: #ff3587;
     border-radius: 2px;
     color: white;
   }
-  .navbar-dashboard-button-selected{
+  .navbar-dashboard-button-selected {
     background: white;
     color: #ff3587;
     border-radius: 2px;
   }
 }
-.navbar-dashboard-div{
-   background: #151371;
+.navbar-dashboard-div {
+  background: #151371;
 }
 
-.inner-dashboard-container{
-  font-family: 'Poppins', sans-serif;
-  background: #14152B;
+.inner-dashboard-container {
+  font-family: "Poppins", sans-serif;
+  background: ‘var(—div-background-color) ’;
   max-width: 1440px !important;
   height: auto;
-
 }
-.dashboard-navbar-button{
+.dashboard-navbar-button {
   padding: 20px 15px;
   cursor: pointer;
   color: white;
 }
 
-.dashboard-navbar-button:hover{
-  background: #6A0C8B;
+.dashboard-navbar-button:hover {
+  background: #6a0c8b;
 }
 
-.dashboard-navbar-button-selected{
+.dashboard-navbar-button-selected {
   background: white;
-  color: #6A0C8B;
+  color: #6a0c8b;
   padding: 20px 15px;
   cursor: pointer;
 }
 
-.component-mobile-button{
-  background: #1C1D37 ;
+.component-mobile-button {
+  background: #1c1d37;
   margin-bottom: 2%;
   border-radius: 5px;
   /* padding-left: 2%; */
   line-height: 32px;
 }
-.hide-mobile-component{
+.hide-mobile-component {
   display: none;
 }
-.component-mobile-button p{
+.component-mobile-button p {
   color: rgb(255, 255, 255);
-} 
+}
 
-.component-mobile-button>div> p{
+.component-mobile-button > div > p {
   font-size: 16px;
 }
-.open-component-button{
+.open-component-button {
   font-size: 24px;
   line-height: 32px;
   color: #ffffff;
@@ -141,39 +140,38 @@
   }
 }
 
-
-.dashboard-card{
+.dashboard-card {
   border-radius: 5px;
-  background: #1C1D37;
+  background: #1c1d37;
   padding: 12px 20px;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   // border-radius: 20px;
 }
 
-.missing-api-dashboard-card{
+.missing-api-dashboard-card {
   border: 0.5px solid yellow;
   border-radius: 5px;
   background: white;
   padding: 12px 20px;
 }
 
-.marked-date{
-  color:white;
+.marked-date {
+  color: white;
   font-weight: 500;
   background: #151371;
 }
 
-.overview-event-card{
+.overview-event-card {
   box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
   border-radius: 8px;
-  background: #24253D;
-  border: 1px solid #6938EF;
+  background: #24253d;
+  border: 1px solid #6938ef;
   padding: 8px;
   margin-bottom: 10px;
   line-height: 15px;
 }
-.overview-event-card:hover{
-  background: #6938EF;
+.overview-event-card:hover {
+  background: #6938ef;
 }
 
 .overview-event-thumbnail {
@@ -182,7 +180,7 @@
   border-radius: 50%;
 }
 
-.overview-event-status{
+.overview-event-status {
   line-height: 20px;
   font-size: 12px;
   font-weight: 700;
@@ -192,18 +190,18 @@
   max-width: 100px;
 }
 
-.more-details-button{
+.more-details-button {
   font-size: 32px;
   line-height: 32px;
   color: #151371;
 }
 
-.empty-events{
+.empty-events {
   width: 70px;
   height: 70px;
 }
 
-.empty-events-description{
+.empty-events-description {
   margin-bottom: 5px;
   text-align: center;
   line-height: 16px;
@@ -217,7 +215,7 @@
 .overview-career-button {
   white-space: nowrap;
   border-radius: 4px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -226,67 +224,65 @@
   margin: 0px 5px;
 }
 .overview-career-button:hover {
-  background:#6938EF !important;
+  background: #6938ef !important;
 }
-.selected{
+.selected {
   border-radius: 4px;
-  border: 1px solid #6938EF;
-  background: #6938EF;
+  border: 1px solid #6938ef;
+  background: #6938ef;
 }
 
-.overview-career-button p{
-  font-size: 12px ;
+.overview-career-button p {
+  font-size: 12px;
   font-weight: 500;
-  color:#ffffff;
+  color: #ffffff;
   text-align: center;
   margin: 0;
 }
 
-
-.overview-career-cards-list{
-  padding: 7px 0 ;
-
+.overview-career-cards-list {
+  padding: 7px 0;
 }
 
 .overview-career-card {
   padding: 5px 10px;
   background: transparent;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   width: 100%;
   height: 30%;
 }
 
-.overview-career-card:hover{
-  background: #6938EF;
-  .overview-career-all-image{
-    background: #1C1D37;
+.overview-career-card:hover {
+  background: #6938ef;
+  .overview-career-all-image {
+    background: #1c1d37;
   }
 }
 
-.overview-career-card-image img{
+.overview-career-card-image img {
   width: 35px;
   height: 35px;
   border-radius: 50%;
 }
 
-.overview-career-card-info{
+.overview-career-card-info {
   justify-content: center;
   align-items: flex-start;
 }
-.overview-career-card-info-title{
-  font-size:12px;
+.overview-career-card-info-title {
+  font-size: 12px;
   font-weight: 600;
   color: rgb(255, 255, 255);
   margin: 0;
 }
 
-.overview-career-card-info p{
+.overview-career-card-info p {
   font-size: 12px;
   margin: 0;
   white-space: normal;
 }
-.overview-career-card-jobtype> p{
+.overview-career-card-jobtype > p {
   padding: 2px 7px;
   font-size: 10px;
   background: #565656;
@@ -296,24 +292,21 @@
 }
 
 .overview-career-card-jobtype {
-
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
 }
 
-
-
 /* COURSES */
 .overview-courses-list::-webkit-scrollbar {
   display: none;
 }
 
-.overview-courses-list{
+.overview-courses-list {
   /* cursor: grab; */
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .overview-wrapper {
@@ -331,13 +324,18 @@
 .overview-filler {
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #151371 0%, #AD079F 53.03%, #D304AB 70.87%);;
+  background: linear-gradient(
+    90deg,
+    #151371 0%,
+    #ad079f 53.03%,
+    #d304ab 70.87%
+  );
 }
 
-.overview-course-card{
+.overview-course-card {
   padding: 5px 10px;
-  background: #24253D;
-  border: 1px solid #6938EF;
+  background: #24253d;
+  border: 1px solid #6938ef;
   color: white;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
@@ -345,7 +343,7 @@
   margin-bottom: 2%;
 }
 
-.overview-courses-cards{
+.overview-courses-cards {
   overflow-x: hidden; /* Hide horizontal scrollbar */
   overflow-y: scroll;
 }
@@ -354,47 +352,45 @@
   display: none;
 } */
 
-.overview-course-card:hover{
-    background: #6938EF;
+.overview-course-card:hover {
+  background: #6938ef;
 }
 
-.overview-course-card-info p{
+.overview-course-card-info p {
   font-size: 12px;
   line-height: 16px;
 }
 
-
-.overview-course-card-info-title{
-  font-size:12px;
+.overview-course-card-info-title {
+  font-size: 12px;
   font-weight: 700;
   color: rgb(255, 255, 255);
   margin: 0;
 }
 
-.overview-course-card-description{
+.overview-course-card-description {
   font-size: 10px;
-  color: #DEDEDE;
+  color: #dedede;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
-.overview-course-currency p{
+.overview-course-currency p {
   line-height: 20px;
-  color: #33D2FF;
+  color: #33d2ff;
   margin: 0;
   text-align: center;
 }
 
-
 /* Startups Component */
 
-.overview-startup-card{
+.overview-startup-card {
   padding: 5px 10px;
-  background: #EFEFEF;
+  background: #efefef;
   border-radius: 10px;
   width: 100%;
   margin-bottom: 2%;
@@ -402,7 +398,7 @@
 
 /* Proposals */
 
-.proposal-card-info{
+.proposal-card-info {
   font-size: 12px;
   font-weight: 500;
   color: rgb(255, 255, 255);
@@ -411,25 +407,25 @@
   text-overflow: ellipsis;
 }
 
-.overview-proposal-card{
-  background: #EFEFEF;
+.overview-proposal-card {
+  background: #efefef;
   border-radius: 12px;
   width: 100%;
   margin-bottom: 2%;
   padding: 10px 10px;
 }
 
-.overview-proposal-cards{
+.overview-proposal-cards {
   overflow-y: scroll;
-    -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .overview-proposal-cards::-webkit-scrollbar {
   display: none;
 }
 
-.overview-proposal-button{
+.overview-proposal-button {
   font-size: 8px;
   font-weight: 700;
   line-height: 10px;
@@ -438,7 +434,7 @@
 
 /* Chapter Component */
 
-.overview-chapter-card-description{
+.overview-chapter-card-description {
   font-size: 10px;
   color: rgb(255, 255, 255);
   line-height: 16px;
@@ -446,7 +442,7 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   margin: 5px 0;
 }
@@ -463,7 +459,7 @@
   cursor: pointer;
 }
 
-.project-button-selected{
+.project-button-selected {
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
@@ -475,26 +471,25 @@
   border-bottom: 1px solid #151371;
 }
 
-
 /* WALLET DASHBOARD */
-.total-balance-card-dashboard-wallet{
-  background: #474BFF;
+.total-balance-card-dashboard-wallet {
+  background: #474bff;
   border-radius: 20px;
   width: 100%;
   height: 200px;
 }
 
-.inner-total-balance-card-dashboard-wallet{
+.inner-total-balance-card-dashboard-wallet {
   width: 90%;
   height: 100%;
-  border-bottom-right-radius: 20px ;
+  border-bottom-right-radius: 20px;
   border-top-right-radius: 20px;
   background: white;
   margin-left: 10%;
   padding: 20px;
 }
 
-.wallet-dashboard-button{
+.wallet-dashboard-button {
   border-radius: 50%;
   width: 70px;
   height: 70px;
@@ -504,8 +499,8 @@
   align-items: center;
 }
 
-.trans-card{
-  background: #F8F9FD;
+.trans-card {
+  background: #f8f9fd;
   /* background: green; */
   border-radius: 4px;
   padding: 20px;
@@ -514,76 +509,76 @@
   cursor: pointer;
 }
 
-.trans-card:hover{
+.trans-card:hover {
   background: #d0d7f2;
 }
 
-.trans-card-text{
+.trans-card-text {
   margin: 0;
   line-height: 18px;
 }
 
-.trends-button{
-  background: #C4C4C480;
+.trends-button {
+  background: #c4c4c480;
   border: 0px solid transparent;
   font-weight: 700;
   color: black;
 }
 
-.trends-button:hover{
+.trends-button:hover {
   background: #f8f9fd;
   border: 0px solid transparent;
 }
 
-.trends-button-selected{
-  background: #CFD0F6;
+.trends-button-selected {
+  background: #cfd0f6;
   border: 0px solid transparent;
   font-weight: 700;
-  color: #474BFF;
+  color: #474bff;
 }
 
-.wallet-transaction-form{
+.wallet-transaction-form {
   display: none;
   position: absolute;
   background: rgba(196, 196, 196, 0.3);
   backdrop-filter: blur(2px);
 }
 
-.dashboard-inner-bg{
-  background: #1C1D37;
+.dashboard-inner-bg {
+  background: #1c1d37;
   border-radius: 20px !important;
 }
-.row-custom-span-3{
+.row-custom-span-3 {
   grid-row: span 3 / span 3 !important;
 }
-.row-custom-span-6{
+.row-custom-span-6 {
   grid-row: span 6 / span 6 !important;
 }
-.overview-course-card-border-none{
+.overview-course-card-border-none {
   border: none;
   box-shadow: none;
 }
-.button-setting-transparent{
+.button-setting-transparent {
   background: transparent;
   font-size: 10px;
   width: 45%;
   border-radius: 100px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
 }
-.button-setting-transparent:hover{
-  background: #6938EF;
+.button-setting-transparent:hover {
+  background: #6938ef;
 }
 .button-setting-bg {
-  background: #6938EF;
+  background: #6938ef;
   font-size: 10px;
   border-radius: 100px;
   width: 45%;
   border: none;
 }
-.button-setting-bg:hover{
-  background-color: #6938EF;
+.button-setting-bg:hover {
+  background-color: #6938ef;
 }
-.chart-inner-text{
+.chart-inner-text {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -591,22 +586,22 @@
   text-align: center;
   font-size: 10px;
 }
-.chart-static-text{
+.chart-static-text {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   font-size: 10px;
-  color: #DEDEDE;
+  color: #dedede;
 }
-.chart-static-text span{
-  color: #FFFFFF;
+.chart-static-text span {
+  color: #ffffff;
   font-weight: 600;
   font-size: 16px;
   display: block;
-}  
-.chart-static-title{
+}
+.chart-static-title {
   position: absolute;
   font-weight: 600;
   color: white;
@@ -614,21 +609,21 @@
   top: 20%;
   white-space: nowrap;
 }
-.chart-inner-text span{
+.chart-inner-text span {
   display: block;
   font-size: 14px;
   font-weight: 500;
 }
-.button-more{
+.button-more {
   color: white;
-  background: #6938EF;
+  background: #6938ef;
   border-radius: 100px;
   padding: 10px 30px;
 }
-.button-more:hover{
+.button-more:hover {
   color: white;
-}  
-.view-course{
+}
+.view-course {
   font-size: 12px;
   padding: 0px 20px;
   display: flex;
@@ -636,16 +631,16 @@
   height: 80%;
   margin: auto 0 auto auto;
 }
-.overview-course-card:hover{
-  .view-course{
+.overview-course-card:hover {
+  .view-course {
     background: white;
-    color: #6938EF;
+    color: #6938ef;
   }
 }
-.mentorship-mentee-count{
+.mentorship-mentee-count {
   font-weight: bold;
   font-size: 24px;
-  background: #FE8F66;
+  background: #fe8f66;
   border-radius: 50%;
   height: 50px;
   width: 50px;
@@ -653,18 +648,18 @@
   align-items: center;
   justify-content: center;
 }
-.mentorship-mentee-title{
+.mentorship-mentee-title {
   margin: 20px 0;
   font-size: 16px;
   font-weight: bold;
 }
-.dashboard-projects-thumbnail:hover{
-  border:4px solid #78129E;
+.dashboard-projects-thumbnail:hover {
+  border: 4px solid #78129e;
 }
-.dashboard-projects-thumbnail-active{
-  border:4px solid #78129E;
+.dashboard-projects-thumbnail-active {
+  border: 4px solid #78129e;
 }
-.overview-career-all-image{
+.overview-career-all-image {
   width: 40px;
   height: 35px;
   background: rgb(105, 56, 239);
@@ -672,60 +667,60 @@
   border-radius: 50%;
   padding: 4px;
 }
-.overview-career-all-image img{
+.overview-career-all-image img {
   object-fit: contain;
 }
-.statistics-card{
-  background: #24253D;
-  border: 1px solid #6938EF;
+.statistics-card {
+  background: #24253d;
+  border: 1px solid #6938ef;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
   width: 100%;
   height: 20%;
   margin-bottom: 4%;
 }
-.statistics-charts{
+.statistics-charts {
   width: 100%;
   height: 20%;
   margin-bottom: 20px;
 }
-.static-card{
-  background: #24253D;
-  border: 1px solid #6938EF;
+.static-card {
+  background: #24253d;
+  border: 1px solid #6938ef;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
 }
-.dashboard-static-chart{
+.dashboard-static-chart {
   display: flex;
   align-items: center;
   margin: 0px 10px;
 }
-.static-chart-detail{
+.static-chart-detail {
   margin-top: 5%;
 }
-.static-chart-detail h2{
+.static-chart-detail h2 {
   font-size: 12px;
   font-weight: 600;
 }
-.static-chart-detail .labels{
-  color: #DEDEDE;
+.static-chart-detail .labels {
+  color: #dedede;
   font-weight: 500;
   font-size: 10px;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
 }
-.static-chart-detail .labels .tag div{
+.static-chart-detail .labels .tag div {
   width: 15px;
   height: 15px;
   margin-right: 3px;
   border-radius: 2px;
 }
-.static-chart-detail .labels .tag{
+.static-chart-detail .labels .tag {
   display: flex;
   margin-bottom: 3px;
 }
-.overview-proposal-button{
+.overview-proposal-button {
   background: rgba(21, 147, 57, 0.65);
   border-radius: 6px;
   padding: 8px;
@@ -733,128 +728,128 @@
   font-weight: 500;
   letter-spacing: 0.5px;
   font-size: 12px;
-} 
-.dashboard-proposal-table-title{
+}
+.dashboard-proposal-table-title {
   font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 15px;
-  color: #D8D8D8;
+  color: #d8d8d8;
 }
-.row-custom-6{
-  grid-row: span 6 / span 6 ;
+.row-custom-6 {
+  grid-row: span 6 / span 6;
 }
 @media only screen and (max-width: 1440px) {
-  .static-chart-detail .labels{
+  .static-chart-detail .labels {
     display: grid;
-    grid-template-columns: repeat(2,1fr);
+    grid-template-columns: repeat(2, 1fr);
     grid-gap: 10%;
   }
-  .static-chart-detail{
+  .static-chart-detail {
     margin-top: 5px;
   }
-  .dashboard-chapter-details{
+  .dashboard-chapter-details {
     margin-bottom: 10px !important;
     height: 70%;
   }
-  .dashboard-chapter-details .img-container{
-   height: 100%; 
-  } 
-  .dashboard-chapter-location{
+  .dashboard-chapter-details .img-container {
+    height: 100%;
+  }
+  .dashboard-chapter-location {
     margin-bottom: 10px !important;
   }
-  .dashboard-progress-tasklist{
+  .dashboard-progress-tasklist {
     height: 45px;
     margin-top: auto;
   }
-  .dashboard-progress-tasklist >div{
+  .dashboard-progress-tasklist > div {
     height: 100%;
   }
-  .dashboard-pofile-card{
+  .dashboard-pofile-card {
     flex-direction: row !important;
     flex-wrap: wrap;
     justify-content: space-evenly !important;
   }
-  .mentorship-mentee-title{
-    padding:5px 0;
+  .mentorship-mentee-title {
+    padding: 5px 0;
     margin: 0;
   }
 }
 @media only screen and (max-width: 1100px) {
-  .dashboard-pofile-card{
+  .dashboard-pofile-card {
     flex-direction: column !important;
     // min-width: 350px;
     // max-width: 450px;
     flex-wrap: initial;
     text-align: center;
   }
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     width: 450px;
   }
-  .dashboard-progress-tasklist{
+  .dashboard-progress-tasklist {
     height: auto;
   }
-  .dashboard-progress-chart .chart-inner-text{
+  .dashboard-progress-chart .chart-inner-text {
     top: 37%;
   }
-  .dashboard-progress-chart .chart-inner-text p{
+  .dashboard-progress-chart .chart-inner-text p {
     font-size: 12px;
     line-height: 16px;
   }
-  .button-more{
+  .button-more {
     margin: 10px 0;
   }
-  .dashboard-card{
+  .dashboard-card {
     color: white;
   }
-  .dashboard-cards-tab{
+  .dashboard-cards-tab {
     flex-direction: column !important;
     align-items: flex-start !important;
   }
-  .dashboard-cards-tab >div{
+  .dashboard-cards-tab > div {
     margin: 10px 0;
   }
-  .dashboard-static-chart{
+  .dashboard-static-chart {
     width: 45%;
   }
-  .static-chart-detail .labels{
+  .static-chart-detail .labels {
     display: flex;
   }
-  .static-card{
+  .static-card {
     justify-content: space-evenly;
   }
-  .dashboard-chapter-location p{
+  .dashboard-chapter-location p {
     color: white;
   }
-  .overview-startups-card{
+  .overview-startups-card {
     height: 200px !important;
   }
-  .overview-course-tabs{
+  .overview-course-tabs {
     flex-wrap: wrap;
     height: fit-content !important;
   }
-  .overview-course-tabs div{
+  .overview-course-tabs div {
     margin: 5px 0;
   }
-  .button-more{
+  .button-more {
     padding: 5px 0;
     width: 100%;
     text-align: center;
     font-size: 12px;
   }
-  .overview-course-card-description{
+  .overview-course-card-description {
     display: none;
   }
-  .overview-course-card-info{
+  .overview-course-card-info {
     justify-content: center;
   }
-  .overview-course-currency{
+  .overview-course-currency {
     display: none !important;
   }
-  .overview-course-detail{
+  .overview-course-detail {
     width: 100%;
   }
-  .view-course{
+  .view-course {
     width: 100px;
     padding: 2px 0;
     height: fit-content;
@@ -862,18 +857,18 @@
     justify-content: center;
     margin: auto;
   }
-  .dashboard-projects-thumbnail{
+  .dashboard-projects-thumbnail {
     height: 200px;
   }
-  .overview-projects-swiper{
+  .overview-projects-swiper {
     height: fit-content !important;
   }
 }
 @media only screen and (max-width: 460px) {
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     width: 100%;
   }
-  .overview-course-detail{
+  .overview-course-detail {
     width: 30% !important;
   }
-}  
+}
diff --git a/styles/ProfileCSS/create-profile.css b/styles/ProfileCSS/create-profile.css
index 188104bb..4c53691f 100644
--- a/styles/ProfileCSS/create-profile.css
+++ b/styles/ProfileCSS/create-profile.css
@@ -11,7 +11,7 @@
   flex-direction: row;
   color: white;
   border: 1.5px solid var(--secondary-accent-1);
-  box-shadow: -2px 2px 20px rgba(84,48,209,.25);
+  box-shadow: -2px 2px 20px rgba(84, 48, 209, 0.25);
 }
 /* sidebar styles */
 .cp-sidebar {
@@ -173,11 +173,7 @@
   display: flex;
   justify-content: center;
 }
-.create--profile
-  .cp-body
-  .cp-formGrid
-  .color-picker-toggle
-  .cpt-btn {
+.create--profile .cp-body .cp-formGrid .color-picker-toggle .cpt-btn {
   cursor: pointer;
   display: inline-block;
   color: #fff;
@@ -368,7 +364,7 @@
 
 .create--profile {
   padding: 130px 0 60px;
-  background: #14152B;
+  background: ‘var(—div-background-color) ’;
 }
 .delete-skill {
   cursor: pointer;
diff --git a/styles/ProfileCSS/profile.css b/styles/ProfileCSS/profile.css
index 3aec9533..73884022 100644
--- a/styles/ProfileCSS/profile.css
+++ b/styles/ProfileCSS/profile.css
@@ -282,7 +282,6 @@
   color: rgb(168, 167, 167) !important;
 } */
 
-
 /* .pp-exp-edu-area .add-exp-edu .ee-fields input {
   border: 1px solid #8a8a8a;
   color: black;
@@ -348,12 +347,12 @@
 }
 
 .profileTopSection {
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 .topSection {
   border: 0.5px solid #9b4fff9b;
-  background: #14152b;
+  background: ‘var(—div-background-color) ’;
 }
 
 .Biosection {
@@ -387,7 +386,7 @@
   background-color: #a159fe;
 }
 
-.careerPic img{
+.careerPic img {
   border-radius: 30px;
   border: 5px solid #a159ff6e;
 }
@@ -634,51 +633,53 @@
   font-weight: bold;
 }
 /* Projects Section Swiper */
-.profile__project-card{
-  border: 1px solid #8040D2;
+.profile__project-card {
+  border: 1px solid ‘var(—div-background-color),
+    ";
   border-radius: 15px;
-  padding: 15px;  
+  padding: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 500px !important;
 }
-.profile__project-card img{
+.profile__project-card img {
   border-radius: 15px 15px 0px 0px;
   margin-bottom: 40px;
   height: 400px;
   object-fit: cover;
   width: 100%;
 }
-.profile__project-card .view-btn{
+.profile__project-card .view-btn {
   color: white;
   display: flex;
   align-items: center;
 }
-.profile__project-card .view-btn a{
+.profile__project-card .view-btn a {
   font-weight: 600;
   font-size: 18px;
   border-radius: 100px;
-  border: 1px solid #8040D2;
+  border: 1px solid ‘var(—div-background-color),";
   width: 100%;
   text-align: center;
   padding: 13px 0;
-  transition: .4s ease;
+  transition: 0.4s ease;
 }
-.profile__project-card .view-btn a:hover{
-  background: #8040D2;
+.profile__project-card .view-btn a:hover {
+  background: ‘var(—div-background-color),
+    ";
 }
-.profile__project-card .detail h2{
+.profile__project-card .detail h2 {
   font-size: 20px;
   font-weight: 600;
   white-space: nowrap;
   margin: 8px 0;
 }
-.fraction-p{
+.fraction-p {
   position: absolute;
   margin: 0;
 }
-.profile-projects-controllers{
+.profile-projects-controllers {
   width: 100%;
   display: flex;
   justify-content: flex-end;
@@ -691,49 +692,49 @@
   margin-top: 40px;
   margin-right: 30px;
 }
-.profile-projects-controllers p{
+.profile-projects-controllers p {
   color: white;
   margin: auto 30px;
   letter-spacing: 2.2px;
 }
-.profile-projects-controllers img{
+.profile-projects-controllers img {
   cursor: pointer;
-  transition: opacity .4s ease;
+  transition: opacity 0.4s ease;
 }
-.profile-projects-controllers img:hover{
+.profile-projects-controllers img:hover {
   opacity: 0.8;
 }
-.show-full-projects:hover{
-  color: #8040D2;
+.show-full-projects:hover {
+  color: ‘var(—div-background-color),";
 }
-.profile__projects-slider .slick-slide > div{
+.profile__projects-slider .slick-slide > div {
   display: flex;
   justify-content: space-evenly;
 }
 @media screen and (max-width: 680px) {
-  .profile__project-card{
-    width: 400px!important;
+  .profile__project-card {
+    width: 400px !important;
   }
-  .profile-projects-controllers{
+  .profile-projects-controllers {
     justify-content: center;
   }
-  .profile-projects-controllers > div{
-    margin-right:0 ;
+  .profile-projects-controllers > div {
+    margin-right: 0;
   }
 }
 @media screen and (max-width: 400px) {
-  .profile__project-card{
-    width: 350px!important;
+  .profile__project-card {
+    width: 350px !important;
     margin: 0px 20px;
   }
-  .profile__project-container{
+  .profile__project-container {
     margin: 0;
     padding: 0;
   }
-  .profile__project-card .view-btn a{
+  .profile__project-card .view-btn a {
     font-size: 16px;
   }
-  .profile__project-card .detail h2{
+  .profile__project-card .detail h2 {
     font-size: 16px;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/SidebarCSS/sidebar.css b/styles/SidebarCSS/sidebar.css
index 290a9586..6ec3cf20 100644
--- a/styles/SidebarCSS/sidebar.css
+++ b/styles/SidebarCSS/sidebar.css
@@ -22,7 +22,7 @@
   transition: visibility 0s linear 300ms, opacity 300ms;
 }
 .sidebarTwo {
-  background-color: #14152B;
+  background-color: ‘var(—div-background-color) ’;
   color: white;
   width: 20vw;
   z-index: 120;
@@ -33,7 +33,7 @@
   overflow-x: hidden;
   transition: width 0.3s;
 }
-.new-bg{
+.new-bg {
   background-color: #a159fe;
 }
 .hide {
diff --git a/styles/global-variables.css b/styles/global-variables.css
index f2e9210d..97bb9ec6 100644
--- a/styles/global-variables.css
+++ b/styles/global-variables.css
@@ -5,49 +5,48 @@
     -accent - Brighter/Highlighted version of color in the palette
 */
 :root {
-    /* -------------------- Color Palettes -------------------- */
-
-    /* Dark colors */
-    --dark-main: #141414;
-    --dark-low-contrast: #000000;
-    --dark-high-contrast: #3D3D3D;
-    --dark-accent: #666666;
-
-    /* Light colors */
-    --light-main: #ffffff;
-    --light-low-contrast: #efefef;
-    --light-high-contrast: #FAFAFA;
-    --light-accent: #F5F5F5;
-
-    /* Primary colors */
-    --primary-main: #474bff;
-    --primary-low-contrast: rgba(20,20,113,.9);
-    --primary-high-contrast: rgb(37, 99, 235);
-    --primary-accent: #151371;
-    --primary-accent-1: #21175f;
-    --primary-accent-2: #431e8d;
-
-    /* Secondary colors */
-    --secondary-main: #14152b;
-    --secondary-low-contrast: #10111f;
-    --secondary-high-contrast: #1c1d37;
-    --secondary-accent: rgba(196, 196, 196, 0.08);
-    --secondary-accent-1: #3e385d;
-
-    /* Tertiary colors */
-    --tertiary-main: #8040d2;
-    --tertiary-low-contrast: #6B38AD;
-    --tertiary-high-contrast: #9379ff;
-    --tertiary-accent: #ff47a7;
-    --tertiary-accent-1: #d56ee6;
-    --tertiary-accent-2: #461B7E;
-    --tertiary-accent-3: #3E256C;
-    --tertiary-accent-4: #6938ef;
-
-
-    /* -------------------- Border Highlight -------------------- */
-
-    --border-thin: 1px solid var(--tertiary-main);
-    --border: 1.5px solid var(--tertiary-main);
-    --border-thick: 2px solid var(--tertiary-main);
-}
\ No newline at end of file
+  /* -------------------- Color Palettes -------------------- */
+
+  /* Dark colors */
+  --dark-main: #141414;
+  --dark-low-contrast: #000000;
+  --dark-high-contrast: #3d3d3d;
+  --dark-accent: #666666;
+
+  /* Light colors */
+  --light-main: #ffffff;
+  --light-low-contrast: #efefef;
+  --light-high-contrast: #fafafa;
+  --light-accent: #f5f5f5;
+
+  /* Primary colors */
+  --primary-main: #474bff;
+  --primary-low-contrast: rgba(20, 20, 113, 0.9);
+  --primary-high-contrast: rgb(37, 99, 235);
+  --primary-accent: #151371;
+  --primary-accent-1: #21175f;
+  --primary-accent-2: #431e8d;
+
+  /* Secondary colors */
+  --secondary-main: ‘var(—div-background-color) ’;
+  --secondary-low-contrast: #10111f;
+  --secondary-high-contrast: #1c1d37;
+  --secondary-accent: rgba(196, 196, 196, 0.08);
+  --secondary-accent-1: #3e385d;
+
+  /* Tertiary colors */
+  --tertiary-main: #8040d2;
+  --tertiary-low-contrast: #6b38ad;
+  --tertiary-high-contrast: #9379ff;
+  --tertiary-accent: #ff47a7;
+  --tertiary-accent-1: #d56ee6;
+  --tertiary-accent-2: #461b7e;
+  --tertiary-accent-3: #3e256c;
+  --tertiary-accent-4: #6938ef;
+
+  /* -------------------- Border Highlight -------------------- */
+
+  --border-thin: 1px solid var(--tertiary-main);
+  --border: 1.5px solid var(--tertiary-main);
+  --border-thick: 2px solid var(--tertiary-main);
+}
diff --git a/styles/settings/settingsLayout.module.scss b/styles/settings/settingsLayout.module.scss
index dbc309ec..75b5d1c2 100644
--- a/styles/settings/settingsLayout.module.scss
+++ b/styles/settings/settingsLayout.module.scss
@@ -1,6 +1,6 @@
 .settingsContainer {
-  font-family: 'Poppins', sans-serif;
-  background: #14152b;
+  font-family: "Poppins", sans-serif;
+  background: ‘var(—div-background-color) ’;
   padding-top: 120px;
   overflow-x: clip;
 }
@@ -15,7 +15,7 @@
   grid-column-gap: 50px;
   position: relative;
 }
-.backgroundShdow div{
+.backgroundShdow div {
   top: 400px;
   right: -70px;
   height: 320px;
@@ -27,7 +27,7 @@
   position: absolute;
   border-radius: 50%;
 }
-.backgroundShdow img{
+.backgroundShdow img {
   top: 400px;
   right: -100px;
   position: absolute;
@@ -35,24 +35,23 @@
 
 .settingsNavigation {
   display: flex;
-  flex-direction: column;  
+  flex-direction: column;
 }
-.settingsNavigation > div{
-  background: #1C1D37;
-  border: 1px solid #6938EF
-;
+.settingsNavigation > div {
+  background: #1c1d37;
+  border: 1px solid #6938ef;
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   padding: 1.5rem 0;
   // height: 100%;
-} 
-.navContainer{
+}
+.navContainer {
   // margin: auto 0;
   width: 100%;
   margin-bottom: 20px;
 }
-.navProfile{
+.navProfile {
   height: 100%;
   margin-bottom: 0;
   display: flex;
@@ -73,7 +72,7 @@
   position: relative;
   height: 200px;
 }
-.settingsNavigation .userDataHeader .imgDiv div{
+.settingsNavigation .userDataHeader .imgDiv div {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -88,16 +87,16 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
-.settingsNavigation .userDataHeader .imgDiv:hover{
-  div{
-  opacity: 1; 
+.settingsNavigation .userDataHeader .imgDiv:hover {
+  div {
+    opacity: 1;
   }
   .profileImg {
     opacity: 0.7;
   }
-} 
+}
 .settingsNavigation .userDataHeader .imgDiv .profileImg {
   cursor: pointer;
   border-radius: 100%;
@@ -106,7 +105,7 @@
   // max-width: 170px;
   opacity: 1;
   cursor: pointer;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 
 .settingsNavigation .userDataHeader .textDiv {
@@ -128,7 +127,7 @@
   margin: 3px 0;
 }
 .settingsNavigation .userDataHeader .textDiv h4 {
-  color: #FFA959;
+  color: #ffa959;
   font-weight: bold;
   font-size: 20px;
 
@@ -156,11 +155,11 @@
 }
 
 .settingsNavigation nav .navHeader.activeLi h2 {
-  background: #6938EF;
+  background: #6938ef;
   border-radius: 44px;
 }
 .settingsNavigation nav .navHeader h2:hover {
-  border-color: #6938EF;
+  border-color: #6938ef;
   border-radius: 44px;
 }
 
@@ -211,31 +210,30 @@
 .specificSettings {
   display: flex;
   /* width: 66%; */
-  background: #1C1D37;
-  border: 1px solid #6938EF
-;
+  background: #1c1d37;
+  border: 1px solid #6938ef;
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
   border-radius: 15px;
 }
-.headerSection{
-  display: flex;  
+.headerSection {
+  display: flex;
   margin: 30px 0;
   width: fit-content;
-  background: linear-gradient(90.87deg, #9379FF -2.84%, #33D2FF 82.04%);
+  background: linear-gradient(90.87deg, #9379ff -2.84%, #33d2ff 82.04%);
   -webkit-background-clip: text;
-  background-clip:text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.headerSection p{
+.headerSection p {
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
   color: #ffffff;
   font-size: 28px;
   font-weight: 600;
 }
-.headerSection img{
+.headerSection img {
   max-width: 40px;
   margin-right: 30px;
   cursor: pointer;
@@ -249,17 +247,17 @@ img.editIcon {
   cursor: pointer;
   object-fit: contain;
 }
-.lineContainer{
+.lineContainer {
   padding: 0 10px;
   width: 100%;
 }
-.line{
+.line {
   background: rgba(147, 121, 255, 0.52);
   height: 1px;
   width: 90%;
   margin: 11px auto;
 }
-.btnSignOut{
+.btnSignOut {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -270,15 +268,14 @@ img.editIcon {
   width: fit-content;
 }
 .btnSignOut:hover {
-  color: #6938EF
-;
+  color: #6938ef;
 }
 @media only screen and (max-width: 992px) {
   .accountSettings {
     grid-template-columns: 100%;
     grid-row-gap: 20px;
   }
-}  
+}
 /* Progress Styleing */
 .progress {
   width: 130px;
@@ -287,7 +284,7 @@ img.editIcon {
   line-height: 130px;
   background: none;
   box-shadow: none;
-  position: relative
+  position: relative;
 }
 
 .progress:after {
@@ -295,33 +292,33 @@ img.editIcon {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  border: 25px solid #3E385D;
+  border: 25px solid #3e385d;
   position: absolute;
   top: 0;
-  left: 0
+  left: 0;
 }
 
-.progress>span {
+.progress > span {
   width: 50%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
-  z-index: 1
+  z-index: 1;
 }
 
 .progress .progressLeft {
-  left: 0
+  left: 0;
 }
 
 .progress .progressBar {
   width: 100%;
   height: 100%;
   background: none;
-  border-width:25px;
+  border-width: 25px;
   border-style: solid;
   position: absolute;
-  top: 0
+  top: 0;
 }
 
 .progress .progressLeft .progressBar {
@@ -330,11 +327,11 @@ img.editIcon {
   border-bottom-right-radius: 80px;
   border-left: 0;
   -webkit-transform-origin: center left;
-  transform-origin: center left
+  transform-origin: center left;
 }
 
 .progress .progressRight {
-  right: 0
+  right: 0;
 }
 
 .progress .progressRight .progressBar {
@@ -350,7 +347,7 @@ img.editIcon {
   width: 90%;
   height: 90%;
   border-radius: 50%;
-  background: #1C1D37;
+  background: #1c1d37;
   font-size: 20px;
   font-weight: bold;
   color: #fff;
@@ -359,26 +356,26 @@ img.editIcon {
   top: 5%;
   left: 5%;
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
   font-weight: bold;
 }
-.progress .progressValue p{
+.progress .progressValue p {
   font-size: 24px;
 }
 .progress.blue .progressBar {
-  border-color: #6938EF;
+  border-color: #6938ef;
 }
-.layoutProgress{
+.layoutProgress {
   display: flex;
   padding: 1rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.layoutProgress >p{
+.layoutProgress > p {
   font-size: 24px;
   font-weight: 700;
   color: white;
-  margin: 50px 0 10px; 
-} 
\ No newline at end of file
+  margin: 50px 0 10px;
+}