Add different backgrounds for other 2 colorful sections

css/theme.css

@@ -128,13 +128,16 @@ a:focus {
     }
 }
 
-.intro {
+.features-section, .outro, .intro {
     display: table;
     width: 100%;
     height: auto;
     padding: 100px 0;
     text-align: center;
     color: #fff;
+}
+
+.intro {
     background: url(images/header.jpg) no-repeat bottom center scroll;
     background-color: #000;
     -webkit-background-size: cover;
@@ -143,6 +146,22 @@ a:focus {
     -o-background-size: cover;
 }
 
+.features-section {
+    background: url('images/bgtr.svg') top right no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/overlay.png'),
+        linear-gradient(45deg, #b39c68, #a56365, #412e4c);
+}
+
+.outro {
+    height: 100%;
+    background: url('images/bgtr.svg') top right no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/overlay.png'),
+        linear-gradient(45deg, #384955, #655361, #85505f);
+}
+
 .intro-body {
     display: table-cell;
     vertical-align: middle;

index.html

@@ -103,7 +103,7 @@
         </div>
     </section>
 
-    <section class="intro content-section" id="features">
+    <section class="features-section content-section" id="features">
         <div class="container">
             <div class="row">
                 <div class="col-lg-4">
@@ -188,7 +188,7 @@
         </div>
     </section>
 
-    <section class="intro content-section" id="contact">
+    <section class="outro content-section" id="contact">
         <div class="intro-body">
             <div class="container">
                 <div class="row">

less/theme.less

@@ -133,22 +133,39 @@ a:focus {
 }
 
  // Full Page Image Intro Section 
-
- .intro {
+.features-section, .outro, .intro {
     display: table;
     width: 100%;
     height: auto;
     padding: 100px 0;
     text-align: center;
-    color: @light;
+    color: #fff;
+}
+
+.intro {
     background: url(images/header.jpg) no-repeat bottom center scroll;
-    background-color: @dark;
+    background-color: #000;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
 }
 
+.features-section {
+    background: url('images/bgtr.svg') top right no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/overlay.png'),
+        linear-gradient(45deg, #b39c68, #a56365, #412e4c);
+}
+
+.outro {
+    background: url('images/bgtr.svg') top right no-repeat,
+        url('images/bgbl.svg') bottom left no-repeat,
+        url('images/overlay.png'),
+        linear-gradient(45deg, #384955, #655361, #85505f);
+}
+
 .intro-body {
     display: table-cell;
     vertical-align: middle;