Develop

assets/css/about-us-section.css

@@ -37,4 +37,8 @@
 
 #about-us .right-text p span {
     font-weight: 700;
+}
+
+#about-us .about-title {
+    margin-bottom: 15px;
 }

assets/css/faq-section.css

@@ -18,7 +18,7 @@
     width: 100%;
     padding: 1rem 3rem 1rem 1rem;
     color: var(--primaryFontColor) !important;
-    font-size: 1.15rem;
+    font-size: 24px;
     font-weight: 400;
     border-bottom: 1px solid var(--primaryFontColor);
 }
@@ -71,7 +71,7 @@
     transition: all 0.2s ease 0.15s;
 }
 .accordion .content p {
-    font-size: 1rem;
+    /*font-size: 1rem;*/
     font-weight: 300;
 }
 .accordion .content.active {

assets/css/footer-section.css

@@ -1,4 +1,4 @@
-@import "theme-variables.css";
+@import "./theme-variables.css";
 
 @media (max-width: 992px) {
     footer {
@@ -17,8 +17,8 @@
 }
 
 footer {
-    margin-top: 200px;
-    padding-top: 120px;
+    /*margin-top: 200px;*/
+    /*padding-top: 120px;*/
     background-image: url(../images/footer.png);
     background-repeat: no-repeat;
     background-position: center center;
@@ -99,7 +99,8 @@ footer .right-content {
 
 .footer-content .right-content h2 em {
     font-style: normal;
-    color: #fba70b;
+    color: var(--color2);
+    /*color: #fba70b;*/
 }
 
 .footer-content .right-content p {
@@ -111,7 +112,7 @@ footer .right-content {
 }
 
 .footer-content .right-content a:hover {
-    color: #FC3;
+    /*color: #FC3;*/
 }
 
 footer .social {
@@ -129,10 +130,10 @@ footer .social li {
 }
 
 footer .social li a {
-    color: #fff;
+    color: var(--activeColor);
+    background-color: var(--activeColor);
     text-align: center;
-    background-color: transparent;
-    border: 1px solid #fff;
+    border: 1px solid var(--activeColor);
     width: 44px;
     height: 44px;
     line-height: 44px;
@@ -146,9 +147,8 @@ footer .social li a {
 }
 
 footer .social li a:hover {
-    background-color: #fba70b;
-    border-color: #fba70b;
-    color: #fff;
+    background-color: var(--hoverColor);
+    border-color: var(--hoverColor);
 }
 
 footer .copyright {

assets/css/header.css

@@ -55,11 +55,15 @@
     transition: all 0.3s ease 0s;
 }
 
+.header-area .main-nav .logo img {
+    height: 35px;
+    width: 35px;
+}
 
 .header-area .main-nav .nav {
     float: left;
     margin-top: 27px;
-    margin-left: 15%;
+    margin-left: 20%;
     margin-right: 0px;
     /*background-color: var(--primaryBackground);*/
     padding: 0px 20px;
@@ -83,7 +87,7 @@
 .header-area .main-nav .nav li a {
     display: block;
     font-weight: 500;
-    font-size: 13px;
+    font-size: 20px;
     color: var(--primaryFontColor);
     text-transform: uppercase;
     -webkit-transition: all 0.3s ease 0s;
@@ -136,7 +140,7 @@
 
 .header-area .main-nav .nav li.submenu ul li a {
     display: block;
-    background: var(--primaryBackgroundDarker);
+    background: var(--primaryBackground);
     color: var(--primaryFontColor)!important;
     padding-left: 20px;
     height: 40px;
@@ -203,7 +207,7 @@
     -o-transition: all 0.4s;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
-    background-color: var(--primaryFontColor);
+    background-color: var(--color5);
     display: block;
     position: absolute;
     width: 30px;
@@ -214,7 +218,7 @@
 .background-header .main-nav .menu-trigger span,
 .background-header .main-nav .menu-trigger span:before,
 .background-header .main-nav .menu-trigger span:after {
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .header-area .main-nav .menu-trigger span:before,
@@ -223,7 +227,7 @@
     -o-transition: all 0.4s;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
     display: block;
     position: absolute;
     width: 30px;
@@ -234,7 +238,7 @@
 
 .background-header .main-nav .menu-trigger span:before,
 .background-header .main-nav .menu-trigger span:after {
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .header-area .main-nav .menu-trigger span:before,
@@ -275,23 +279,23 @@
     -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
     -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
     transform: translateY(6px) translateX(1px) rotate(45deg);
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .background-header .main-nav .menu-trigger.active span:before {
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .header-area .main-nav .menu-trigger.active span:after {
     -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
     transform: translateY(-6px) translateX(1px) rotate(-45deg);
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .background-header .main-nav .menu-trigger.active span:after {
-    background-color: var(--primaryFontColor);
+    background-color: var(--color1);
 }
 
 .header-area.header-sticky {
@@ -358,8 +362,8 @@
     .header-area .main-nav .nav li {
         width: 100%;
         background: var(--primaryBackground);
-        /*border-bottom: 1px solid var(--primaryBackgroundDarker);*/
-        border: 1px solid var(--primaryBackgroundDarker);
+        /*border-bottom: 1px solid var(--primaryBackground);*/
+        border: 1px solid var(--primaryBackground);
         padding-left: 0 !important;
         padding-right: 0 !important;
     }
@@ -372,7 +376,7 @@
         color: var(--primaryFontColor) !important;
     }
     .header-area .main-nav .nav li a:hover {
-        background: var(--activeColor) !important;
+        background: var(--hoverColor) !important;
         color: var(--primaryFontColor) !important;
     }
     .header-area .main-nav .nav li.submenu ul {

assets/css/hero-section.css

@@ -21,7 +21,7 @@
     font-size: 74px;
     /*line-height: 80px;*/
     letter-spacing: 1px;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
     color: var(--primaryFontColor)
 }
 
@@ -30,6 +30,10 @@
     color: var(--boldFontColor);
 }
 
+.hero-area .hero-text h2 {
+    margin-bottom: 10px;
+}
+
 .hero-area .hero-text p {
     font-weight: 300;
     font-size: 17px;

assets/css/main.css

@@ -73,7 +73,16 @@ a:hover,
 a:active,
 a:visited:hover,
 a:visited:active {
-  color: var(--textHoverColor);
+  color: var(--hoverColor);
+}
+
+a.button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+  text-decoration: none;
+  color: initial;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -87,7 +96,7 @@ ul {
 }
 
 p {
-  font-size: 15px;
+  font-size: 20px;
   line-height: 25px;
   color: var(--primaryFontColor);
 }
@@ -101,6 +110,9 @@ img {
     display: none;
   }
 
+  h2 {
+    font-size: 24px;
+  }
 }
 
 
@@ -160,6 +172,7 @@ a.main-button-slider {
 
 a.main-button-slider:hover {
   background-color: var(--hoverColor);
+  color: orange;
 }
 
 a.main-button {
@@ -179,6 +192,7 @@ a.main-button {
 
 a.main-button:hover {
   background-color: var(--hoverColor);
+  color: initial;
 }
 
 button.main-button {
@@ -211,7 +225,7 @@ button.main-button:hover {
 .center-heading h2 {
   margin-top: 0;
   text-align: center;
-  font-size: 42px;
+  font-size: 50px;
   font-weight: 700;
   color: var(--primaryFontColor);
   margin-bottom: 25px;
@@ -244,7 +258,7 @@ button.main-button:hover {
 
 @-webkit-keyframes glow {
   from {
-    text-shadow: 0 0 10px var(--primaryBackground), 0 0 20px var(--primaryBackground), 0 0 30px var(--primaryBackgroundDarker), 0 0 40px var(--primaryBackgroundDarker), 0 0 50px var(--primaryBackgroundDarker), 0 0 60px var(--primaryBackgroundDarker), 0 0 70px var(--primaryBackgroundDarker);
+    text-shadow: 0 0 10px var(--primaryBackground), 0 0 20px var(--primaryBackground), 0 0 30px var(--primaryBackground), 0 0 40px var(--primaryBackground), 0 0 50px var(--primaryBprimaryBackgroundackgroundDarker), 0 0 60px var(--primaryBackground), 0 0 70px var(--primaryBackground);
   }
 
   to {
@@ -258,7 +272,7 @@ button.main-button:hover {
 --------------------------------------------- */
 #preloader {
   overflow: hidden;
-  background-image: linear-gradient(145deg, var(--primaryBackground) 0%, var(--primaryBackgroundDarker) 100%);
+  background-image: linear-gradient(145deg, var(--primaryBackground) 0%, var(--primaryBackground) 100%);
   left: 0;
   right: 0;
   top: 0;

assets/css/theme-variables.css

@@ -13,40 +13,37 @@
     /* ---------------------------------------------
         DECLARED COLORS
     --------------------------------------------- */
-    --color1: #A72608;
-    --color2: #FA9F42;
-    --color3: #E88723;
-    --color4: #3891A6;
-    --color5: #8783D1;
-    --color6: #AA9ABA;
+    --color1: #EF6351;
+    --color2: #FCE1A7;
+    --color3: #C97CD8;
+    --color4: #DCFFDE;
+    --color5: #253D5B;
 
     /* ---------------------------------------------
         GENERAL COLORS
     --------------------------------------------- */
     --hoverColor: var(--color1);
     --activeColor: var(--color3) !important;
-    --textHoverColor: var(--color4);
-    --textActiveColor: var(--color1);
+    --textHoverColor: var(--color1);
+    --textActiveColor: var(--color3);
 
     /* ---------------------------------------------
         BACKGROUND COLORS
     --------------------------------------------- */
-    --primaryBackground: var(--color6);
-    --primaryBackgroundDarker: var(--color5);
+    --primaryBackground: var(--color5);
     --secondaryBackground: var(--color3);
-    --secondaryBackgroundDarker: var(--color4);
 
     /* ---------------------------------------------
         BUTTON COLORS
     --------------------------------------------- */
     --buttonFontColor: white;
-    --primaryButton: var(--color2);
+    --primaryButton: var(--color3);
 
     /* ---------------------------------------------
         FONT COLORS
     --------------------------------------------- */
     --primaryFontColor: white;
-    --secondaryFontColor: #7a7a7a;
+    --secondaryFontColor: var(--color3);
     --selectionColor: var(--color4);
     --selectionBackground: var(--color3);
     --boldFontColor: var(--color2);

assets/css/tracks-section.css

@@ -16,7 +16,7 @@
     border-radius: 5px;
     padding: 60px 30px;
     text-align: center;
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
 }
 
 .tracks-item h2 {
@@ -26,7 +26,7 @@
     left: 45px;
     font-size: 100px;
     font-weight: 600;
-    color: #fdefe9;
+    color: var(--secondaryFontColor);
 }
 
 .tracks-item img {
@@ -39,7 +39,7 @@
 .tracks-item h4 {
     margin-top: 0px;
     font-size: 22px;
-    color: #1e1e1e;
+    color: var(--primaryFontColor);
     margin-bottom: 25px;
 }