test svg curve between sections

assets/scss/custom.scss

@@ -23,12 +23,44 @@ $icon-yellow: #fcc958;
 // here we need to use it in css, then need to generate it, calling it first from a content md file.
 @mixin apply-bgpattern-01() {
     background-repeat: repeat;
-    background-position: bottom center;
-    background-image: url('../images/bg/dessin-3.png'); 
+    background-position: top center;
+    background-image: url('../images/bg/pattern-1.png'); 
 }
 
+// Sections bg transitions
+@mixin curve-bottom($id) {
+    position: relative;
+    &:before {
+        content: '';
+        position: absolute;
+        width: 100%; 
+        height: 100%;
+        background-image: url('../images/svg/curve-#{$id}.svg');
+        background-size: contain;
+        background-position: bottom center;
+        background-repeat: no-repeat;
+        z-index: 10;
+    }
+}
 
-// Theme Custom sections
+// Title design element, with colored circle
+@mixin circle-in-title($color) {
+    position: relative;
+    z-index: 1;
+    &:before {
+        content: '';
+        position: absolute;
+        width: 45px; 
+        height: 45px;
+        left: -70px; 
+        top: -20px;
+        border-radius: 25px;
+        background-color: $color;
+        z-index: 0;
+    }
+}
+
+// Theme custom sections
 header.header {
     background-color: $bg-dark-blue;
 }
@@ -36,6 +68,7 @@ main > section {
     &.hero {
         background-color: $bg-dark-blue;
         @include apply-bgpattern-01();
+        @include curve-bottom(1);        
         h1 {
             color: $text-green;
         }
@@ -45,12 +78,19 @@ main > section {
         }
     }
     &.section-1 {
-        background-color: $bg-light-blue;
+        @include curve-bottom(2);
+        li {
+            font-weight: 600;
+        }
     }
     &.section-2 {
+        background-color: $bg-light-blue;
     }
     &.section-3 {
         background-color: $text-green;
+        h2 {
+            @include circle-in-title($icon-red);
+        }
     }
     &.section-4 {
     }
@@ -63,6 +103,9 @@ main > section {
     }
     &.section-7 {
         background-color: $bg-light-blue;
+        h2 {
+            @include circle-in-title($icon-yellow);
+        }
     }
 }
 
@@ -76,7 +119,7 @@ section.section-7 {
                 width: 100%;
             }
             h2, p {
-                text-align: center;
+                //text-align: center;
             }
             ul {
                 display: flex;
@@ -88,8 +131,9 @@ section.section-7 {
                     margin: 0.5em;
                     padding: 1.5em;
                     text-align: center;
-                    border: 1px solid #767676;
+                    //border: 1px solid #767676;
                     border-radius: 4px;    
+                    background-color: white;
                 }
             }
         }