diff --git a/assets/css/style.css b/assets/css/style.css
index c704213..24d20a4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -10,16 +10,18 @@
 body {
   background: #fff;
   color: #666666;
-  font-family: "Open Sans", 'IBM Plex Sans Arabic', sans-serif;
+  font-family: "Open Sans", "IBM Plex Sans Arabic", sans-serif;
 }
 
 a {
   text-decoration: none;
-  color: #03C4EB;
+  color: #03c4eb;
   transition: 0.5s;
 }
 
-a:hover, a:active, a:focus {
+a:hover,
+a:active,
+a:focus {
   color: #03c5ec;
   outline: none;
   text-decoration: none;
@@ -30,8 +32,13 @@ p {
   margin: 0 0 30px 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Raleway", 'Noto Kufi Arabic', sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Raleway", "Noto Kufi Arabic", sans-serif;
   font-weight: 400;
   margin: 0 0 20px 0;
   padding: 0;
@@ -59,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
   right: 15px;
   bottom: 15px;
   z-index: 996;
-  background: #03C4EB;
+  background: #03c4eb;
   width: 40px;
   height: 40px;
   border-radius: 4px;
@@ -120,7 +127,7 @@ h1, h2, h3, h4, h5, h6 {
   margin: 30px 0 10px 0;
   font-weight: 700;
   line-height: 48px;
-  font-family: 'Noto Kufi Arabic', sans-serif;
+  font-family: "Noto Kufi Arabic", sans-serif;
   /* text-transform: uppercase; */
   color: #fff;
 }
@@ -135,13 +142,13 @@ h1, h2, h3, h4, h5, h6 {
 #hero h2 {
   color: #ccc;
   margin-bottom: 50px;
-  font-family: 'Noto Kufi Arabic', sans-serif;
+  font-family: "Noto Kufi Arabic", sans-serif;
 }
 
 #hero h2 span {
   color: #fff;
   transition: 0.3s;
-  border-bottom: 2px solid #03C4EB;
+  border-bottom: 2px solid #03c4eb;
 }
 
 @media (max-width: 768px) {
@@ -156,43 +163,68 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-#hero .rotating>.animated {
+#hero .rotating > .animated {
   display: inline-block;
 }
 
+#hero .actions {
+  width: 50%;
+  margin: 0 auto;
+}
+
+@media all and (max-width: 768px) {
+  #hero .actions a {
+    width: 100%;
+  }
+}
+
+@media all and (min-width: 768px) {
+  #hero .actions {
+    width: 40%;
+    display: flex;
+  }
+  #hero .actions a {
+    width: 50%;
+  }
+}
+
 #hero .actions a {
-  font-family: "Raleway", 'IBM Plex Sans Arabic', sans-serif;
+  font-family: "Raleway", "IBM Plex Sans Arabic", sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 1px;
   display: inline-block;
-  padding: 8px 20px;
-  border-radius: 2px;
+  padding: 10px 20px;
+  border-radius: 8px;
   transition: 0.5s;
-  margin: 10px;
+  margin: 18px;
 }
 
 #hero .btn-get-started {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+  background: #03c4eb;
+  border: 2px solid #03c4eb;
   color: #fff;
 }
 
 #hero .btn-get-started:hover {
-  background: none;
-  border: 2px solid #fff;
+  background: rgba(3, 196, 235, 0.15);
+  border: 2px solid rgba(3, 196, 235, 0.25);
   color: #fff;
+  font-weight: bold;
 }
 
 #hero .btn-services {
-  border: 2px solid #fff;
+  background: #0e9f6e;
+  border: 2px solid #0e9f6e;
   color: #fff;
 }
 
 #hero .btn-services:hover {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+  background: rgba(14, 159, 110, 0.15);
+  border: 2px solid rgba(14, 159, 110, 0.25);
+  color: #fff;
+  font-weight: bold;
 }
 
 /*--------------------------------------------------------------
@@ -212,7 +244,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #header.fixed-top {
-  background: #00354E;
+  background: #00354e;
 }
 
 #header .logo {
@@ -265,26 +297,31 @@ h1, h2, h3, h4, h5, h6 {
   position: relative;
 }
 
-.navbar a, .navbar a:focus {
+.navbar a,
+.navbar a:focus {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0 10px 30px;
-  font-family: "Raleway", 'Noto Kufi Arabic', sans-serif;
+  font-family: "Raleway", "Noto Kufi Arabic", sans-serif;
   font-size: 14px;
   color: #fff;
   white-space: nowrap;
   transition: 0.3s;
 }
 
-.navbar a i, .navbar a:focus i {
+.navbar a i,
+.navbar a:focus i {
   font-size: 12px;
   line-height: 0;
   margin-left: 5px;
 }
 
-.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
-  color: #03C4EB;
+.navbar a:hover,
+.navbar .active,
+.navbar .active:focus,
+.navbar li:hover > a {
+  color: #03c4eb;
 }
 
 .navbar .dropdown ul {
@@ -316,11 +353,13 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 12px;
 }
 
-.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover>a {
-  color: #03C4EB;
+.navbar .dropdown ul a:hover,
+.navbar .dropdown ul .active:hover,
+.navbar .dropdown ul li:hover > a {
+  color: #03c4eb;
 }
 
-.navbar .dropdown:hover>ul {
+.navbar .dropdown:hover > ul {
   opacity: 1;
   top: 100%;
   visibility: visible;
@@ -332,7 +371,7 @@ h1, h2, h3, h4, h5, h6 {
   visibility: hidden;
 }
 
-.navbar .dropdown .dropdown:hover>ul {
+.navbar .dropdown .dropdown:hover > ul {
   opacity: 1;
   top: 0;
   left: 100%;
@@ -344,7 +383,7 @@ h1, h2, h3, h4, h5, h6 {
     left: -90%;
   }
 
-  .navbar .dropdown .dropdown:hover>ul {
+  .navbar .dropdown .dropdown:hover > ul {
     left: -100%;
   }
 }
@@ -402,17 +441,21 @@ h1, h2, h3, h4, h5, h6 {
   transition: 0.3s;
 }
 
-.navbar-mobile a, .navbar-mobile a:focus {
+.navbar-mobile a,
+.navbar-mobile a:focus {
   padding: 10px 20px;
   font-size: 15px;
   color: #333333;
 }
 
-.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover>a {
-  color: #03C4EB;
+.navbar-mobile a:hover,
+.navbar-mobile .active,
+.navbar-mobile li:hover > a {
+  color: #03c4eb;
 }
 
-.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
+.navbar-mobile .getstarted,
+.navbar-mobile .getstarted:focus {
   margin: 15px;
 }
 
@@ -440,11 +483,13 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 12px;
 }
 
-.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover>a {
-  color: #03C4EB;
+.navbar-mobile .dropdown ul a:hover,
+.navbar-mobile .dropdown ul .active:hover,
+.navbar-mobile .dropdown ul li:hover > a {
+  color: #03c4eb;
 }
 
-.navbar-mobile .dropdown>.dropdown-active {
+.navbar-mobile .dropdown > .dropdown-active {
   display: block;
 }
 
@@ -477,7 +522,7 @@ section {
 .section-title-divider {
   width: 50px;
   height: 3px;
-  background: #03C4EB;
+  background: #03c4eb;
   margin: 0 auto;
   margin-bottom: 20px;
 }
@@ -534,7 +579,11 @@ section {
 /* Services Section
 --------------------------------*/
 #services {
-  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/services-bg.jpeg") fixed center center;
+  background: linear-gradient(
+      rgba(255, 255, 255, 0.9),
+      rgba(255, 255, 255, 0.9)
+    ),
+    url("../img/services-bg.jpeg") fixed center center;
   background-size: cover;
   padding: 80px 0 60px 0;
 }
@@ -545,10 +594,10 @@ section {
 
 #services .service-icon {
   float: left;
-  background: #03C4EB;
+  background: #03c4eb;
   border-radius: 50%;
   transition: 0.5s;
-  border: 1px solid #03C4EB;
+  border: 1px solid #03c4eb;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -567,7 +616,7 @@ section {
 }
 
 #services .service-item:hover .service-icon i {
-  color: #03C4EB;
+  color: #03c4eb;
 }
 
 #services .service-title {
@@ -589,7 +638,8 @@ section {
 /* Subscribe Section
 --------------------------------*/
 #subscribe {
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/css/bg1.jpeg) fixed center center;
+  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    url(../img/css/bg1.jpeg) fixed center center;
   background-size: cover;
   padding: 80px 0;
 }
@@ -610,7 +660,7 @@ section {
 }
 
 #subscribe .subscribe-btn {
-  font-family: "Raleway", 'IBM Plex Sans Arabic', sans-serif;
+  font-family: "Raleway", "IBM Plex Sans Arabic", sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 16px;
@@ -625,14 +675,15 @@ section {
 }
 
 #subscribe .subscribe-btn:hover {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+  background: #03c4eb;
+  border: 2px solid #03c4eb;
 }
 
 /* Materials Section
 --------------------------------*/
 #materilas {
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/css/bg1.jpeg) fixed center center;
+  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    url(../img/css/bg1.jpeg) fixed center center;
   background-size: cover;
   padding: 80px 0;
 }
@@ -653,7 +704,7 @@ section {
 }
 
 #materilas .subscribe-btn {
-  font-family: "Raleway", 'IBM Plex Sans Arabic', sans-serif;
+  font-family: "Raleway", "IBM Plex Sans Arabic", sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 16px;
@@ -668,8 +719,8 @@ section {
 }
 
 #materilas .subscribe-btn:hover {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+  background: #03c4eb;
+  border: 2px solid #03c4eb;
 }
 
 /* Portfolio Section
@@ -698,8 +749,9 @@ section {
   transition: all 0.3s ease-in-out;
 }
 
-#portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {
-  color: #03C4EB;
+#portfolio #portfolio-flters li:hover,
+#portfolio #portfolio-flters li.filter-active {
+  color: #03c4eb;
 }
 
 #portfolio #portfolio-flters li:last-child {
@@ -736,7 +788,8 @@ section {
   margin-bottom: 0;
 }
 
-#portfolio .portfolio-item .portfolio-info .preview-link, #portfolio .portfolio-item .portfolio-info .details-link {
+#portfolio .portfolio-item .portfolio-info .preview-link,
+#portfolio .portfolio-item .portfolio-info .details-link {
   position: absolute;
   right: 48px;
   font-size: 28px;
@@ -744,8 +797,9 @@ section {
   color: #4d4d4d;
 }
 
-#portfolio .portfolio-item .portfolio-info .preview-link:hover, #portfolio .portfolio-item .portfolio-info .details-link:hover {
-  color: #03C4EB;
+#portfolio .portfolio-item .portfolio-info .preview-link:hover,
+#portfolio .portfolio-item .portfolio-info .details-link:hover {
+  color: #03c4eb;
 }
 
 #portfolio .portfolio-item .portfolio-info .details-link {
@@ -772,16 +826,22 @@ section {
   position: relative;
 }
 
-.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
+.portfolio-details
+  .portfolio-details-slider
+  .swiper-pagination
+  .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background-color: #fff;
   opacity: 1;
-  border: 1px solid #03C4EB;
+  border: 1px solid #03c4eb;
 }
 
-.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
-  background-color: #03C4EB;
+.portfolio-details
+  .portfolio-details-slider
+  .swiper-pagination
+  .swiper-pagination-bullet-active {
+  background-color: #03c4eb;
 }
 
 .portfolio-details .portfolio-info {
@@ -803,7 +863,7 @@ section {
   font-size: 15px;
 }
 
-.portfolio-details .portfolio-info ul li+li {
+.portfolio-details .portfolio-info ul li + li {
   margin-top: 10px;
 }
 
@@ -847,7 +907,7 @@ section {
 
 #testimonials .profile h4 {
   font-weight: 700;
-  color: #03C4EB;
+  color: #03c4eb;
   margin-bottom: 5px;
 }
 
@@ -922,7 +982,7 @@ section {
 }
 
 #team .member .social a:hover {
-  color: #03C4EB;
+  color: #03c4eb;
 }
 
 #team .member .social i {
@@ -943,7 +1003,7 @@ section {
 
 #contact .info i {
   font-size: 32px;
-  color: #03C4EB;
+  color: #03c4eb;
   float: left;
   line-height: 0;
 }
@@ -962,7 +1022,7 @@ section {
   font-weight: 600;
 }
 
-#contact .php-email-form .error-message br+br {
+#contact .php-email-form .error-message br + br {
   margin-top: 25px;
 }
 
@@ -995,24 +1055,26 @@ section {
   animation: animate-loading 1s linear infinite;
 }
 
-#contact .php-email-form input, #contact .php-email-form textarea {
+#contact .php-email-form input,
+#contact .php-email-form textarea {
   border-radius: 0;
   box-shadow: none;
 }
 
-#contact .php-email-form input::focus, #contact .php-email-form textarea::focus {
-  background-color: #03C4EB;
+#contact .php-email-form input::focus,
+#contact .php-email-form textarea::focus {
+  background-color: #03c4eb;
 }
 
-#contact .php-email-form button[type=submit] {
-  background: #03C4EB;
+#contact .php-email-form button[type="submit"] {
+  background: #03c4eb;
   border: 0;
   padding: 10px 24px;
   color: #fff;
   transition: 0.4s;
 }
 
-#contact .php-email-form button[type=submit]:hover {
+#contact .php-email-form button[type="submit"]:hover {
   background: #25d8fc;
 }
 
@@ -1057,11 +1119,11 @@ section {
   font-size: 15px;
 }
 
-.breadcrumbs ol li+li {
+.breadcrumbs ol li + li {
   padding-left: 10px;
 }
 
-.breadcrumbs ol li+li::before {
+.breadcrumbs ol li + li::before {
   display: inline-block;
   padding-right: 10px;
   color: gray;
@@ -1086,7 +1148,7 @@ section {
 # Footer
 --------------------------------------------------------------*/
 #footer {
-  background: #222B43;
+  background: #222b43;
   padding: 30px 0;
   color: #fff;
 }
@@ -1105,7 +1167,7 @@ section {
 /*--------------------------------------------------------------
 # logo
 --------------------------------------------------------------*/
- .row {
+.row {
   justify-content: center;
 }
 
@@ -1116,5 +1178,5 @@ section {
 }
 
 #contact img {
-  padding: 20px
+  padding: 20px;
 }