Update on Landing Page/Index.html and Index.css

-Change logo to the new one
-Change slogan styling like in figma
-Add the same hero image like in figma
-Add "Join Us!" button

CSS/Index.css

@@ -1,7 +1,7 @@
 /* //////////////////////CONFIG////////////////////// #f5f5e1 */
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Roboto&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;500;800&display=swap');
 
 :root{
     font-size: 16px;
@@ -86,7 +86,7 @@ a {
 
 body{
     width: 100vw;
-    height: 100vh;
+    height: auto;
 }
 
 body::-webkit-scrollbar{
@@ -210,6 +210,18 @@ body::-webkit-scrollbar{
     z-index: 1;
 }
 
+.cls-1 {
+    fill: #014040;
+  }
+
+  .cls-2 {
+    fill: #f27405;
+  }
+
+  .cls-3 {
+    fill: #008f8c;
+  }
+
 .item-3{
     width: 150px;
     justify-content: space-between;
@@ -249,24 +261,57 @@ section{min-height: 400px;}
 .slogan{
     display: block;
     align-items: flex-start;
-    margin: 8rem 6rem;
+    margin: 8rem 8rem;
 }
 
 .txt-1{
     font-family: 'Roboto', sans-serif;
-    font-size: 30px;
+    font-size: 36px;
+}
+
+.txt-2{
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
+    top: 5px;
+    font-style: italic;
+}
+
+.join{
+    width: 479px;
+    margin-top: -4.6rem;
+    margin-left: 6rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.join-btn{
+    color: white;
+    font-size: 24px;
+    font-family: 'Source Sans 3', sans-serif;
+    background: var(--element-primary);
+    padding: 5px;
+    width: 188px;
+    border-radius: 9999px;
+    display: flex;
+    justify-content: center;
+}
+
+.join-slogan{
+    font-size: 13px;
+    color: var(--element-primary);
+    margin-top: 2px;
 }
 
-.txt-2{top: 5px;}
 /* ///////////////////////CODE//////////////////////// */
 
 /* ======================= BALLS ====================== */
 #ellipse-1{
     width: 50rem;
     height: 50rem;
     position: absolute;
-    left: 70vw;
-    top: 15vw;
+    left: 60vw;
+    top: 10vw;
     z-index: -1;
     border-radius: 50%;
     background-color: var(--element-primary);
@@ -276,88 +321,124 @@ section{min-height: 400px;}
     width: 45rem;
     height: 45rem;
     position: absolute;
-    left: 50vw;
-    top: 30vw;
+    left: 47vw;
+    top: 21.5vw;
     z-index: -1;
     border-radius: 50%;
     background-color: var(--element-secondary);
 }
+.hero-img{
+    position: absolute;
+    z-index: -1;
+    display: flex;
+    width: 100vw;
+    justify-content: flex-end;
+    margin-top: 2rem;
+    transform: rotate(-1deg);
+}
+
+.img-2{
+    position: relative;
+    right: 4rem;
+    top: 1rem;
+}
+
+.img-1{
+    position: relative;
+    right: 8rem;
+    top: 2.9rem;
+    z-index: -1;
+}
+
+
 /* ======================= BALLS ====================== */
 
 /* ================== LOWER SECTION =================== */
 
 /* -------------------- SEMANTICS --------------------- */
-article div{
-    background: var(--background-secondary);
-    margin: 0;
-}   
-
 article svg{fill: var(--background-secondary);}
-
-article h1{
-    color: white;
-    font-size: 36px;
-    font-weight: 800;
-}
-
-article p{
-    color: white;
-    font-size: 24px;
-    font-weight: 300;
-}
 /* -------------------- SEMANTICS --------------------- */
 
 /* ---------------------- CLASS ----------------------- */
-.lower-container{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 40vh 40vh 40vh 40vh;
-    margin-top: -4.7vw;
-}
-
-.lower-item{
-    padding: 0 5rem;
+.lower-container-1{
+    width: 100vw;
+    height: 590px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
+    margin-top: -4.7vw;
+    background: var(--background-secondary);
 }
 
-.about-us{
-    text-align: center;
-    margin-top: -5vw;
+.benefits{
+    font-family: 'Source Sans 3', sans-serif;
+    font-size: 32px;
+    font-weight: bolder;
+    letter-spacing: 1px;
+    color: var(--backgorund-primary);
 }
 
-.feature-header{
-    text-align: center;
-    margin-top: 10vw;
+.box{
+    width: 100vw;
+    height: auto;
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 3rem;
 }
 
-.feature-1{
-    text-align: right;
+.box1{
+    background: var(--extra);
+    width: 360px;
+    height: 360px;
+    border-radius: 32px;
 }
 
-.feature-2{
-    text-align: left;
+.box2{
+    background: var(--extra);
+    width: 360px;
+    height: 360px;
+    border-radius: 32px;
 }
 
-.feature-3{
-    text-align: right;
+.box3{
+    background: var(--extra);
+    width: 360px;
+    height: 360px;
+    border-radius: 32px;
 }
 
-.ex-feature-1{
-    text-align: right;
+.many{
+    font-family: 'Source Sans 3', sans-serif;
+    font-size: 32px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin-top: 3rem;
+    color: var(--backgorund-primary);
 }
 
-.ex-feature-2{
-    text-align: left;
+.lower-container-2{
+    width: 100vw;
+    height: 590px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    background: var(--backgorund-primary);
 }
 
-.ex-feature-3{
-    text-align: right;
+.features{
+    font-family: 'Source Sans 3', sans-serif;
+    font-size: 32px;
+    font-weight: bolder;
+    letter-spacing: 1px;
+    color: var(--element-primary);
+    margin-top: 5rem;
 }
 
 /* ---------------------- CLASS ----------------------- */
 
 /* ----------------------- ID ------------------------- */
-#f-heading{margin-top: 3rem;}
 /* ----------------------- ID ------------------------- */
 
 /* ================== LOWER SECTION =================== */

JS/Index.Js

@@ -4,8 +4,6 @@ function openNav() {
     document.getElementById("outer").style.width = "100vw";
     document.getElementById("outer").style.height = "100vh";
     document.getElementById("outer").style.marginLeft = "250px";
-    document.getElementById("burger").style.width = "100vw";
-    document.getElementById("burger").style.height = "64px";
     }
 
 function closeNav() {