diff --git a/assets/css/style.css b/assets/css/style.css
index e9a7400..4c9bcae 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -3,17 +3,61 @@
 --------------------------------------------------------------*/
 :root {
   scroll-behavior: smooth;
+  --primary-color: white;
+  --secondary-color: black;
+   --tert-color: blue;
+}
+.dark-theme{
+  --primary-color:  black;
+  --secondary-color: white;
+  --tert-color: white;
+}
+#hero .container h1,#hero .container h2{
+  color: var(--tert-color);
+}
+*{
+  background-color: var(--primary-color);
+  }
+  .img-fluid{
+    padding-top: 50px;
+  }
+  /* .container{
+    background-color: var(--primary-color);
+  } */
+  /* header{
+    background-color: var(--primary-color);
+    }
+#hero{
+  background-color: var(--primary-color);
+} */
+
+.footer .footer-top .social-links a{
+  color: wheat;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
 }
-
 body {
   font-family: "Open Sans", sans-serif;
-  color: #444444;
+  
 }
 
 a {
-  color: #4154f1;
+  color: var(--secondary-color);
   text-decoration: none;
 }
+#icon{
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+  
+}
+
+
+
+
 
 a:hover {
   color: #717ff5;
@@ -27,6 +71,7 @@ h4,
 h5,
 h6 {
   font-family: "Nunito", sans-serif;
+  color:var(--secondary-color);
 }
 
 /*--------------------------------------------------------------
@@ -47,7 +92,7 @@ section {
   letter-spacing: 1px;
   font-weight: 700;
   margin: 0;
-  color: #4154f1;
+  color:var(--tert-color);
   text-transform: uppercase;
 }
 
@@ -57,7 +102,7 @@ section {
   font-size: 38px;
   line-height: 42px;
   font-weight: 700;
-  color: #012970;
+  color: var(--tert-color);
 }
 
 @media (max-width: 768px) {
@@ -75,7 +120,7 @@ section {
   background: #012970;
   min-height: 40px;
   margin-top: 82px;
-  color: #fff;
+  color:var(--primary-color);
 }
 
 @media (max-width: 992px) {
@@ -99,7 +144,7 @@ section {
 }
 
 .breadcrumbs ol a {
-  color: #fff;
+  color:var(--primary-color);
   transition: 0.3s;
 }
 
@@ -137,13 +182,13 @@ section {
 
 .back-to-top i {
   font-size: 24px;
-  color: #fff;
+  color:var(--secondary-color);
   line-height: 0;
 }
 
 .back-to-top:hover {
   background: #6776f4;
-  color: #fff;
+  color:var(--primary-color);
 }
 
 .back-to-top.active {
@@ -170,7 +215,7 @@ section {
 }
 
 .header.header-scrolled {
-  background: #fff;
+  background: var(--primary-color);
   padding: 15px 0;
   box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
 }
@@ -188,7 +233,7 @@ section {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: 1px;
-  color: #012970;
+  color: var(--tert-color);
   font-family: "Nunito", sans-serif;
   margin-top: 3px;
 }
@@ -224,7 +269,7 @@ section {
   font-family: "Nunito", sans-serif;
   font-size: 16px;
   font-weight: 700;
-  color: #013289;
+  color: var(--secondary-color);
   white-space: nowrap;
   transition: 0.3s;
 }
@@ -249,12 +294,12 @@ section {
   padding: 8px 20px;
   margin-left: 30px;
   border-radius: 4px;
-  color: #fff;
+  color: var(--primary-color);
 }
 
 .navbar .getstarted:hover,
 .navbar .getstarted:focus:hover {
-  color: #fff;
+  color:var(--primary-color);
   background: #5969f3;
 }
 
@@ -268,7 +313,7 @@ section {
   z-index: 99;
   opacity: 0;
   visibility: hidden;
-  background: #fff;
+  background: var(--primary-color);
   box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
   transition: 0.3s;
   border-radius: 4px;
@@ -337,7 +382,7 @@ section {
 }
 
 .mobile-nav-toggle.bi-x {
-  color: #fff;
+  color: var(--primary-color);
 }
 
 @media (max-width: 991px) {
@@ -376,7 +421,7 @@ section {
   left: 15px;
   padding: 10px 0;
   border-radius: 10px;
-  background-color: #fff;
+  background-color: var(--primary-color);
   overflow-y: auto;
   transition: 0.3s;
 }
@@ -407,7 +452,7 @@ section {
   z-index: 99;
   opacity: 1;
   visibility: visible;
-  background: #fff;
+  background: var(--primary-color);
   box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 }
 
@@ -439,8 +484,10 @@ section {
 .hero {
   width: 100%;
   height: 100vh;
-  background: url(../img/hero-bg.png) top center no-repeat;
+  background-image: url(../img/hero-bg.png) top center no-repeat;
+  /* background: url(../img/hero-bg.png) top center no-repeat; */
   background-size: cover;
+  background-color: var(--primary-color);
 }
 
 .hero h1 {
@@ -462,7 +509,7 @@ section {
   padding: 15px 40px;
   border-radius: 4px;
   transition: 0.5s;
-  color: #fff;
+  color: var(--secondary-color);
   background: #4154f1;
   box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);
 }
@@ -506,7 +553,7 @@ section {
   }
 
   .hero .hero-img img {
-    width: 80%;
+    width: 100%;
   }
 }
 
@@ -535,26 +582,27 @@ section {
 # About
 --------------------------------------------------------------*/
 .about .content {
-  background-color: #f6f9ff;
+  background-color: var(--primary-color);
   padding: 40px;
 }
 
 .about h3 {
   font-size: 14px;
   font-weight: 700;
-  color: #4154f1;
+  color: var(--tert-color);
   text-transform: uppercase;
 }
 
 .about h2 {
   font-size: 24px;
   font-weight: 700;
-  color: #012970;
+  color: var(--tert-color);
 }
 
 .about p {
   margin: 15px 0 30px 0;
   line-height: 24px;
+  color: var(--secondary-color);
 }
 
 .about .btn-read-more {
@@ -562,7 +610,7 @@ section {
   padding: 15px 40px;
   border-radius: 4px;
   transition: 0.5s;
-  color: #fff;
+  color: var(--secondary-color);
   background: #4154f1;
   box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
 }
@@ -578,6 +626,7 @@ section {
   margin-left: 5px;
   font-size: 18px;
   transition: 0.3s;
+  
 }
 
 .about .btn-read-more:hover i {
@@ -593,17 +642,19 @@ section {
   text-align: center;
   transition: 0.3s;
   height: 100%;
+  
 }
 
 .values .box img {
   padding: 30px 50px;
   transition: 0.5s;
   transform: scale(1.1);
+  
 }
 
 .values .box h3 {
   font-size: 24px;
-  color: #012970;
+  color: var(--tert-color);
   font-weight: 700;
   margin-bottom: 18px;
 }
@@ -628,7 +679,7 @@ section {
   align-items: center;
   padding: 30px;
   width: 100%;
-  background: #fff;
+  background:var(--primary-color);
   box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
 }
 
@@ -643,7 +694,7 @@ section {
   font-size: 36px;
   display: block;
   font-weight: 600;
-  color: #0b198f;
+  color: var(--tert-color);
 }
 
 .counts .count-box p {
@@ -672,7 +723,7 @@ section {
 
 .features .feature-box i {
   line-height: 0;
-  background: #ecf3ff;
+  background: var(--primary-color);
   padding: 4px;
   margin-right: 10px;
   font-size: 24px;
@@ -682,7 +733,7 @@ section {
 
 .features .feature-box:hover i {
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
 }
 
 .features .feture-tabs {
@@ -703,7 +754,7 @@ section {
 }
 
 .features .feture-tabs .nav-pills {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--primary-color);
 }
 
 .features .feture-tabs .nav-link {
@@ -788,7 +839,7 @@ section {
 --------------------------------------------------------------*/
 .pricing .box {
   padding: 40px 20px;
-  background: #fff;
+  background: var(--primary-color);
   text-align: center;
   box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
   border-radius: 4px;
@@ -843,6 +894,7 @@ section {
 
 .pricing ul li {
   padding-bottom: 10px;
+  color: var(--secondary-color);
 }
 
 .pricing ul .na {
@@ -866,7 +918,7 @@ section {
 
 .pricing .btn-buy:hover {
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
 }
 
 .pricing .featured {
@@ -879,7 +931,7 @@ section {
   font-size: 14px;
   padding: 1px 0 3px 0;
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
 }
 
 /*--------------------------------------------------------------
@@ -911,6 +963,7 @@ section {
 .faq .accordion-body {
   padding: 0 0 25px 0;
   border: 0;
+  color: var(--secondary-color);
 }
 
 /*--------------------------------------------------------------
@@ -921,7 +974,7 @@ section {
   margin: 0 auto 25px auto;
   list-style: none;
   text-align: center;
-  background: white;
+  background: var(--primary-color);
   border-radius: 50px;
   padding: 2px 15px;
 }
@@ -937,7 +990,7 @@ section {
   margin: 0 4px 8px 4px;
   transition: 0.3s;
   border-radius: 50px;
-  border: 1px solid #fff;
+  border: 1px solid:var(--primary-color);
 }
 
 .portfolio #portfolio-flters li:hover,
@@ -1040,7 +1093,7 @@ section {
 }
 
 .portfolio .portfolio-wrap .portfolio-links a {
-  color: #fff;
+  color: var(--primary-color);
   background: #4154f1;
   margin: 10px 2px;
   width: 36px;
@@ -1106,7 +1159,7 @@ section {
 .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
-  background-color: #fff;
+  background-color:var(--primary-color);
   opacity: 1;
   border: 1px solid #4154f1;
 }
@@ -1125,7 +1178,7 @@ section {
   font-weight: 700;
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--primary-color);
 }
 
 .portfolio-details .portfolio-info ul {
@@ -1160,7 +1213,7 @@ section {
   padding: 30px;
   margin: 40px 30px;
   box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
-  background: #fff;
+  background: var(--primary-color);
   min-height: 320px;
   display: flex;
   flex-direction: column;
@@ -1180,7 +1233,7 @@ section {
 .testimonials .testimonial-item .testimonial-img {
   width: 90px;
   border-radius: 50%;
-  border: 4px solid #fff;
+  border: 4px solid var(--primary-color);
   margin: 0 auto;
 }
 
@@ -1210,7 +1263,7 @@ section {
 .testimonials .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
-  background-color: #fff;
+  background-color:var(--primary-color);
   opacity: 1;
   border: 1px solid #4154f1;
 }
@@ -1244,7 +1297,7 @@ section {
 # Team
 --------------------------------------------------------------*/
 .team {
-  background: #fff;
+  background: var(--primary-color);
   padding: 60px 0;
 }
 
@@ -1252,7 +1305,7 @@ section {
   overflow: hidden;
   text-align: center;
   border-radius: 5px;
-  background: #fff;
+  background: var(--primary-color);
   box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
   transition: 0.3s;
 }
@@ -1358,7 +1411,7 @@ section {
 .clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
-  background-color: #fff;
+  background-color: var(--primary-color);
   opacity: 1;
   border: 1px solid #4154f1;
 }
@@ -1436,7 +1489,7 @@ section {
 --------------------------------------------------------------*/
 .contact .info-box {
   color: #444444;
-  background: #fafbff;
+  background: var(--primary-color);
   padding: 30px;
 }
 
@@ -1448,7 +1501,7 @@ section {
 
 .contact .info-box h3 {
   font-size: 20px;
-  color: #012970;
+  color: var(--tert-color);
   font-weight: 700;
   margin: 20px 0 10px 0;
 }
@@ -1461,14 +1514,14 @@ section {
 }
 
 .contact .php-email-form {
-  background: #fafbff;
+  background: var(--primary-color);
   padding: 30px;
   height: 100%;
 }
 
 .contact .php-email-form .error-message {
   display: none;
-  color: #fff;
+  color: var(--primary-color);
   background: #ed3c0d;
   text-align: left;
   padding: 15px;
@@ -1478,7 +1531,7 @@ section {
 
 .contact .php-email-form .sent-message {
   display: none;
-  color: #fff;
+  color: var(--primary-color);
   background: #18d26e;
   text-align: center;
   padding: 15px;
@@ -1488,7 +1541,7 @@ section {
 
 .contact .php-email-form .loading {
   display: none;
-  background: #fff;
+  background: var(--primary-color);
   text-align: center;
   padding: 15px;
   margin-bottom: 24px;
@@ -1502,7 +1555,7 @@ section {
   height: 24px;
   margin: 0 10px -6px 0;
   border: 3px solid #18d26e;
-  border-top-color: #eee;
+  border-top-color:var(--primary-color);
   -webkit-animation: animate-loading 1s linear infinite;
   animation: animate-loading 1s linear infinite;
 }
@@ -1513,28 +1566,36 @@ section {
   box-shadow: none;
   font-size: 14px;
   border-radius: 0;
+  border-color: var(--secondary-color);
 }
 
 .contact .php-email-form input:focus,
 .contact .php-email-form textarea:focus {
   border-color: #4154f1;
+ 
 }
 
 .contact .php-email-form input {
   padding: 10px 15px;
+  color: var(--secondary-color);
+  background-color: var(--primary-color);
 }
 
 .contact .php-email-form textarea {
   padding: 12px 15px;
+  font-weight: 500;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
 }
 
 .contact .php-email-form button[type=submit] {
   background: #4154f1;
   border: 0;
   padding: 10px 30px;
-  color: #fff;
+  color: var(--primary-color);
   transition: 0.4s;
   border-radius: 4px;
+  
 }
 
 .contact .php-email-form button[type=submit]:hover {
@@ -1639,7 +1700,7 @@ section {
 .blog .entry .entry-content .read-more a {
   display: inline-block;
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
   padding: 6px 20px;
   transition: 0.3s;
   font-size: 14px;
@@ -1658,7 +1719,7 @@ section {
 
 .blog .entry .entry-content blockquote {
   overflow: hidden;
-  background-color: #fafafa;
+  background-color: var(--primary-color);
   padding: 60px;
   position: relative;
   text-align: center;
@@ -1688,7 +1749,7 @@ section {
 
 .blog .entry .entry-footer {
   padding-top: 10px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--primary-color);
 }
 
 .blog .entry .entry-footer i {
@@ -1917,7 +1978,7 @@ section {
 
 .blog .blog-pagination li.active a,
 .blog .blog-pagination li:hover a {
-  color: #fff;
+  color: var(--primary-color);
 }
 
 .blog .sidebar {
@@ -1940,8 +2001,8 @@ section {
 }
 
 .blog .sidebar .search-form form {
-  background: #fff;
-  border: 1px solid #ddd;
+  background: var(--primary-color);
+  border: 1px solid var(--primary-color);
   padding: 3px 10px;
   position: relative;
 }
@@ -1964,7 +2025,7 @@ section {
   padding: 0 15px;
   margin: -1px;
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
   transition: 0.3s;
   border-radius: 0 4px 4px 0;
   line-height: 0;
@@ -2052,13 +2113,13 @@ section {
   font-size: 14px;
   padding: 6px 14px;
   margin: 0 6px 8px 0;
-  border: 1px solid #d7e6ff;
+  border: 1px solid var(--primary-color);
   display: inline-block;
   transition: 0.3s;
 }
 
 .blog .sidebar .tags ul a:hover {
-  color: #fff;
+  color: var(--primary-color);
   border: 1px solid #4154f1;
   background: #4154f1;
 }
@@ -2073,15 +2134,15 @@ section {
 # Footer
 --------------------------------------------------------------*/
 .footer {
-  background: #f6f9ff;
+  background: var(--primary-color);
   padding: 0 0 30px 0;
   font-size: 14px;
 }
 
 .footer .footer-newsletter {
   padding: 50px 0;
-  background: #f6f9ff;
-  border-top: 1px solid #e1ecff;
+  background: var(--primary-color);
+  border-top: 1px solid var(--primary-color);
 }
 
 .footer .footer-newsletter h4 {
@@ -2090,16 +2151,16 @@ section {
   padding: 0;
   line-height: 1;
   font-weight: 700;
-  color: #012970;
+  color: var(--tert-color);
 }
 
 .footer .footer-newsletter form {
   margin-top: 20px;
-  background: #fff;
+  background: var(--primary-color);
   padding: 6px 10px;
   position: relative;
   border-radius: 4px;
-  border: 1px solid #e1ecff;
+  border: 1px solid var(--primary-color);
 }
 
 .footer .footer-newsletter form input[type=email] {
@@ -2119,7 +2180,7 @@ section {
   padding: 0 30px;
   margin: 3px;
   background: #4154f1;
-  color: #fff;
+  color: var(--primary-color);
   transition: 0.3s;
   border-radius: 4px;
 }
@@ -2129,10 +2190,10 @@ section {
 }
 
 .footer .footer-top {
-  background: white url(../img/footer-bg.png) no-repeat right top;
+  background: var(--primary-color) url(../img/footer-bg.png) no-repeat right top;
   background-size: contain;
-  border-top: 1px solid #e1ecff;
-  border-bottom: 1px solid #e1ecff;
+  border-top: 1px solid var(--primary-color);
+  border-bottom: 1px solid var(--primary-color);
   padding: 60px 0 30px 0;
 }
 
@@ -2160,7 +2221,7 @@ section {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: 1px;
-  color: #012970;
+  color:var(--secondary-color);
   font-family: "Nunito", sans-serif;
   margin-top: 3px;
 }
@@ -2170,12 +2231,13 @@ section {
   line-height: 24px;
   margin-bottom: 0;
   font-family: "Nunito", sans-serif;
+  color: var(--secondary-color);
 }
 
 .footer .footer-top .social-links a {
   font-size: 20px;
   display: inline-block;
-  color: rgba(1, 41, 112, 0.5);
+  color: wheat;
   line-height: 0;
   margin-right: 10px;
   transition: 0.3s;
@@ -2188,7 +2250,7 @@ section {
 .footer .footer-top h4 {
   font-size: 16px;
   font-weight: bold;
-  color: #012970;
+  color: var(--tert-color);
   text-transform: uppercase;
   position: relative;
   padding-bottom: 12px;
@@ -2206,7 +2268,7 @@ section {
 
 .footer .footer-top .footer-links ul i {
   padding-right: 2px;
-  color: #d0d4fc;
+  color:wheat;
   font-size: 12px;
   line-height: 0;
 }
@@ -2222,7 +2284,7 @@ section {
 }
 
 .footer .footer-top .footer-links ul a {
-  color: #013289;
+  color:var(--tert-color);
   transition: 0.3s;
   display: inline-block;
   line-height: 1;
@@ -2234,12 +2296,13 @@ section {
 
 .footer .footer-top .footer-contact p {
   line-height: 26px;
+  color: var(--secondary-color);
 }
 
 .footer .copyright {
   text-align: center;
   padding-top: 30px;
-  color: #012970;
+  color: var(--secondary-color);
 }
 
 .footer .credits {
@@ -2281,7 +2344,7 @@ section {
 
 }
 #loader {
-  border: 16px solid #f3f3f3;
+  border: 16px solid var(--primary-color);
   /* Light grey */
   /* border-top: 16px solid #3498db; */
   /* Blue */
diff --git a/assets/img/moon.png b/assets/img/moon.png
new file mode 100644
index 0000000..e86aa00
Binary files /dev/null and b/assets/img/moon.png differ
diff --git a/assets/img/sun.png b/assets/img/sun.png
new file mode 100644
index 0000000..a698922
Binary files /dev/null and b/assets/img/sun.png differ
diff --git a/assets/vendor/bootstrap/css/bootstrap-reboot.css b/assets/vendor/bootstrap/css/bootstrap-reboot.css
index 897c2be..1e38e3e 100644
--- a/assets/vendor/bootstrap/css/bootstrap-reboot.css
+++ b/assets/vendor/bootstrap/css/bootstrap-reboot.css
@@ -160,6 +160,7 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: 1rem;
+  
 }
 
 abbr[title] {
diff --git a/assets/vendor/bootstrap/css/bootstrap.css b/assets/vendor/bootstrap/css/bootstrap.css
index 3e4ae58..b05c556 100644
--- a/assets/vendor/bootstrap/css/bootstrap.css
+++ b/assets/vendor/bootstrap/css/bootstrap.css
@@ -4489,6 +4489,7 @@ textarea.form-control-lg {
 }
 .accordion-flush .accordion-item .accordion-button {
   border-radius: 0;
+ 
 }
 
 .breadcrumb {
diff --git a/index.html b/index.html
index d7026cd..e183789 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,7 @@
           <!-- <li><a class="nav-link scrollto" href="#team">Team</a></li> -->
           <li><a class="nav-link scrollto" href="#contact">Contact Us</a></li>
           <li><a class="getstarted scrollto" href="https://forms.gle/Qomf9xKVWHYsfSvv8" target="_blank">Join Us</a></li>
+          <li> <img src="assets/img/moon.png" id="icon"></li>
         </ul>
         <i class="bi bi-list mobile-nav-toggle"></i>
       </nav><!-- .navbar -->
@@ -908,6 +909,18 @@ <h4>Contact Us</h4>
       load.style.display = 'none';
     }
   </script>
+  <script>
+    var icon=document.getElementById("icon");
+    icon.onclick=function(){
+      document.body.classList.toggle("dark-theme");
+      if(document.body.classList.contains("dark-theme")){
+        icon.src="assets/img/sun.png"
+      }
+      else{
+        icon.src="assets/img/moon.png"
+      }
+    }
+  </script>
 </body>
 
 </html>