diff --git a/src/css/style.css b/src/css/style.css
index a1c01cde..467576e6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,45 +1,467 @@
 
-.wel-content1 h1{
-    font-size: 4.0rem;
-    font-weight: bold;    
-font-family: 'Roboto', sans-serif;
+*{
 
+    margin: 0;
+    padding: 0;
 }
-.wel-content1 p{
-font-size: 1.7rem;
-font-family: 'Roboto', sans-serif;
+
+body{
+    background-color: #f1eff0;
+    width: 100%;
+    height: 100%;
 }
-span{
-    font-size: 1.7rem;
+#solutions{
     font-family: 'Roboto', sans-serif;
-}
-.wel-content1 button{
-    color: white;
-    background-color: black;
-    border: none;
-    margin-left: 150px;
-    margin-top: -30px;
-    height: 30px;
-    border-radius:20px 20px 20px;
-    width: 200px;
+    margin: 3% 0 0 18%;
+   }
+    /* education solution design */
+   .education-solutions{
+    position: absolute;
+    /* background-color: white; */
+    width: 90%;
+    margin: 1% 0 0 5%;
+    height: 100vh;
+    overflow: hidden;
+   }
+   .education-solutions .container{
+    display: flex;
+    flex-wrap: wrap;
+    width: 80%;
+    height: 95%;
+    margin-left: 10%;
+    overflow-x: hidden;
+   }
+
+   /* start of display */
+   .education-solutions .display{
+    position: relative;
+    background-color: #eeecfb;
+    width: 450px;
+    height: 450px;
+    margin: 10px 0 0 10px;
+    display: grid;
+    place-items: center;
+    text-align: justify;
+   }
+   .display .parent{
+    position: relative;
     display: flex;
-    flex-direction: row;
+    width: 450px;
+    flex-direction: row-reverse;
+    overflow: hidden;
+    margin: -15% 0 0 -40px;
+    
+   }
+   .display #about{
+    z-index: 2;
+    margin-top: 80px;
+    font-size: 2.2rem;
+    font-family: 'Roboto', sans-serif;
+    margin-left: -50px;
+   }
+   .display #details{
+    z-index: 2;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    width: 300px;
+    font-weight: 300;
+    line-height: 1.5rem;
+    
+    
+   }
+   .display #details span{
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+   
+   }
+   .display .parent #circle1{
+    z-index: 1;
+    position: relative;
+    background-image: linear-gradient(to right,#a89aeb,transparent);
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    margin-left: -80px;
+   }
+   .display .parent #circle2{
+    z-index: 1;
+    position: relative;
+    background-image: linear-gradient(to right,transparent,#a89aeb);
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+   }
+/* end of display */
+/* display1 content */
+   .education-solutions .display1{
+    background-color: #fcf8ea;
+    width: 850px;
+    height: 450px;
+    margin: 10px 0 0 10px;
+    overflow: hidden;
+   }
+   .display1 #about{
+    z-index: 2;
+    font-size: 2.2rem;
+    font-family: 'Roboto', sans-serif;
+    margin: 80px 0 0 5%;
+   }
+   .display1 #details{
+    z-index: 2;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    width: 400px;
+    font-weight: 300;
+    line-height: 1.8rem;
+    letter-spacing: 0.8px;
+    margin-left: 5%;
+   }
+   .display1 #details span{
+    z-index: 2;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    letter-spacing: 0.8px;
+   }
+ 
+   .display1  #looped1{
+    z-index: 1;
+    position: relative;
+    background-image: linear-gradient(to right,transparent,#ebc359);
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    transform: rotate(260deg);
+    margin: 8% 0 0 42%;
+   }
+   
+   
+   
+   .display1  #looped2{
+    z-index: 1;
+    /* position: relative; */
+       background-image: linear-gradient(to right,transparent,#ebc359); 
+       width: 200px;
+       height: 130px;
+       border-radius: 200px;
+       margin: -20% 0 0 55%;
+       transform: rotate(-90deg);
+   }
+   .display1 #looped3{
+    z-index: 1;
+    /* position: relative; */
+       background-image: linear-gradient(to right,transparent,#ebc359); 
+       width: 300px;
+       height: 150px;
+       border-radius: 200px;
+       margin: -22% 0 0 69%;
+       transform: rotate(-90deg);
+   }
+   /* end of display 1 */
+
+/* start of display 2 */
+   .education-solutions .display2{
+    background-color: #faece9;
+    width: 850px;
+    height: 450px;
+    margin: 10px 0 0 10px;
+    z-index: 2;
+    overflow: hidden;
+   }
+   .display2 #about{  
+    z-index: 2;  
+    position: relative;
+    font-size: 1.9rem;
+    font-family: 'Roboto', sans-serif;
+    margin: 140px 0 0 40px;
+   }
+   .display2 #details{
+    z-index: 2;
+    position: relative;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    width: 400px;
+    font-weight: 300;
+    line-height: 1.8rem;
+    letter-spacing: 0.8px;
+    margin: 10px 0 0 40px;
+   }
+   .display2 #details span{
+    z-index: 2;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    letter-spacing: 0.8px;
+   
+   }
+   .display2 .parent1{
+    position: relative;
+    z-index: 1;
+      width: 500px;
+      height:320px;
+      margin: -20% 0 0 44%;
+      
+   }
+   .display2 .parent1 #oval1{
+    background-image: linear-gradient(to right,transparent,#e39089);
+    width: 300px;
+    height: 200px;
+    z-index: 1;
+    border-radius: 200px;
+
+   }
+   .display2 .parent1 #oval2{
+    background-image: linear-gradient(to right,#e39089,transparent);
+    width: 300px;
+    height: 200px;
+    z-index: 1;
+    border-radius: 200px;
+    margin: -20% 0 0 30%;
+   }
+   /* end of display 2 */
+/* start of display 3 */
+   .education-solutions .display3{
+    background-color: #fcedd8;
+    width: 450px;
+    height: 450px;
+    margin: 10px 0 0 10px;
+    overflow: hidden;
+   }
+   .display3 #about{    
+    position: relative;
+    font-size: 1.9rem;
+    font-family: 'Roboto', sans-serif;
+    margin: 140px 0 0 40px;
+   }
+   .display3 #details{
+    position: relative;
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    width: 350px;
+    font-weight: 300;
+    line-height: 1.8rem;
+    letter-spacing: 0.8px;
+    margin: 10px 0 0 40px;
+   }
+   .display3 #details span{
+    font-size: 1.2rem;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    letter-spacing: 0.8px;
+   
+   }
+   .display3 #oval3{
+    width: 450px;
+    height: 250px;
+    background-image: linear-gradient(to right, #f7d7b1, #f2ba7f);
+    border-radius: 200px;
+    transform: rotate(-28deg);
+    margin: 10% 0 0 12%;
+   }
+
+/* end of display 3 */
+/* media res tablets,phone, lapi */
+
+
+@media (max-width:1840px){
+    .container{
+        overflow-y: scroll;
     }
-.wel-content1 #potential{
-    font-size: 0.8rem;
-    font-weight: bolder;
-    margin-left: 30px;
-    margin-top: 7px;
-
-}   
-.wel-content1 .material-symbols-outlined{
-width: 25px;
-background-color: white;
-color: black;
-border-radius: 50%;
-margin-left: 5px;
-margin-top: 2px;
-}  
-  
+    /* section 2 */
+       .education-solutions .container .display1{
+        width: 700px;
+        }
+        .display1 #about{
+            z-index: 2;
+        }
+        .display1 #details{
+            z-index: 2;
+        }
+        .display1  #looped1{
+            margin: 8% 0 0 32%;
+           }
+           
+            .display1  #looped2{ 
+                z-index: 1;
+                margin: -22% 0 0 50%;
+           }
+           
+           .display1 #looped3{
+            margin: -27% 0 0 66%;
+           }
+        /* end section 2 */
 
+       .education-solutions .container .display2{
+        width: 700px; }
+        .display2 .parent1{
+              margin-left: 34%;
+           }
+}
+@media (max-width:1646px){
+    .education-solutions .container{
+        margin-left: 2%;
+        width: 100%;
+      
+    }
+} 
+@media (max-width:1332px) {
+    .education-solutions .container .display1{
+        width: 450px;
+        overflow: hidden;
+        }
+        
+        .display1  #looped1{
+            margin: 25% 0 0 10%;
+           }
+           
+            .display1  #looped2{ 
+                z-index: 1;
+                margin: -32% 0 0 35%;
+           }
+           
+           .display1 #looped3{
+            margin: -38% 0 0 60%;
+           } 
+        /*  end section 2 */
 
+       .education-solutions .container .display2{
+        width: 450px; }
+         .display2 .parent1{
+              margin: -30% 0 0 2%;
+           } 
+}
+@media (max-width:1022px) {
+    .education-solutions .container .display1{
+        width: 430px;
+        
+        }
+        .education-solutions .container .display{
+            width: 430px;
+            
+            }
+        
+        .display1  #looped1{
+            margin: 26% 0 0 10%;
+           }
+           
+            .display1  #looped2{ 
+                z-index: 1;
+                margin: -32% 0 0 35%;
+           }
+           
+           .display1 #looped3{
+            margin: -38% 0 0 60%;
+           } 
+        /*  end section 2 */
+
+       .education-solutions .container .display2{
+        width: 430px; }
+         .display2 .parent1{
+              margin: -30% 0 0 2%;
+           } 
+           .education-solutions .container .display3{
+            width: 430px;
+            
+            }
+}
+@media (max-width:960px){
+    .education-solutions .container{
+        margin-left: 15%;
+        width: 80%;
+      
+    }
+}
+@media (max-width:624px){
+    .education-solutions .container{
+        margin-left: 0%;
+        width: 95%;
+      
+    }
+}
+@media (max-width:510px){
+    .display1 #about{
+        font-size: 2.2rem;
+        font-family: 'Roboto', sans-serif;
+        margin: 80px 0 0 3%;
+       }
+       .display1 #details{
+        line-height: 1.8rem;
+        letter-spacing: 0.4px;
+        margin-left: 5%;
+        position: relative;
+        height: 180px;
+        width: 320px;
+       }
+       .display1 #details span{
+        font-size: 1.2rem;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 400;
+        letter-spacing: 0.4px;
+       }
+       .display2 #about{  
+        z-index: 2;  
+        position: relative;
+        font-size: 1.9rem;
+        font-family: 'Roboto', sans-serif;
+        margin: 140px 0 0 40px;
+       }
+       .display2 #details{
+        font-size: 1.2rem;
+        font-family: 'Roboto', sans-serif;
+        width: 300px;
+        font-weight: 300;
+        line-height: 1.8rem;
+        letter-spacing: 0.4px;
+        margin-left: 40px;
+       }
+       .display #about{
+        margin-left: -80px;
+       }
+       .display #details{
+        z-index: 2;
+        font-size: 1.2rem;
+        font-family: 'Roboto', sans-serif;
+        width: 250px;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+        line-height: 1.5rem;
+        margin-left: -15%;
+        
+       }
+       .display #details span{
+        font-size: 1.2rem;
+        font-family: 'Roboto', sans-serif;
+       
+       }
+       .display .parent{
+        width: 400px;
+        margin-left: -30%;
+       }
+       .display .parent #circle1{
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        margin-left: -80px;
+       }
+       .display .parent #circle2{
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+       }
+       /* convention */
+       .display1  #looped1{
+        margin: 8% 0 0 3%;
+       }
+       
+        .display1  #looped2{ 
+            z-index: 1;
+            margin: -38% 0 0 32%;
+       }
+       
+       .display1 #looped3{
+        margin: -38% 0 0 60%;
+       } 
+    /*  end section 2 */
+      
+}
\ No newline at end of file