Update education section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/styles/sections/education.scss

@@ -1,41 +1,29 @@
 .education-section {
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
+  }
+
+  .card {
+    &:hover,
+    &:focus {
+      border-left: 2px solid #248aaa;
+    }
+  }
+
   .education-info-table {
     width: 100%;
     border: none;
     background: none;
-  }
-  
-  .education-info-table tr:hover {
-    background: none;
-  }
-  
-  .education-info-table tr,
-  .education-info-table th,
-  .education-info-table td {
-    border: none;
-    padding: 0;
-    background: none;
-  }
-  
-  .timeframe {
-    color: #8392a5;
-    text-align: right;
-  }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px;
-    display: block;
-  }
 
     .icon {
       width: 2rem;
       padding-left: 0;
       padding-right: 0;
       position: relative;
-  }
 
-  .icon .hline {
+      .hline {
         position: absolute;
         left: 1rem;
         top: 0;
@@ -44,15 +32,6 @@
         width: 2px;
       }
 
-  .education-info-table tr:first-child .hline {
-    height: 65%;
-    top: auto;
-  }
-  
-  .education-info-table tr:last-child .hline {
-    height: 50%;
-  }
-  
       .icon-holder {
         background-color: #248aaa;
         border-radius: 50%;
@@ -63,20 +42,46 @@
         color: #e5e9f2;
         position: relative;
       }
+    }
+
+    tr,
+    th,
+    td {
+      border: none;
+      padding: 0;
+      background: none;
+    }
+
+    tr {
+      &:hover {
+        background: none;
+      }
+      &:first-child {
+        .hline {
+          height: 65%;
+          top: auto;
+        }
+      }
+      &:last-child {
+        .hline {
+          height: 50%;
+        }
+      }
 
       .line {
         width: 5%;
         padding-left: 0;
         padding-right: 0;
-  }
 
-  .line div {
+        div {
           height: 2px;
           /* width: 100%; */
           margin-right: -1px;
           background-color: #248aaa;
         }
+      }
 
+      .details {
         .degree-info {
           padding: 1rem;
           margin-top: 0.5rem;
@@ -86,88 +91,65 @@
           border-bottom: 1px solid #c0ccda;
           border-right: 1px solid #c0ccda;
           border-radius: 5px;
-  }
 
-  .degree-info h5 {
+          h5 {
             margin-bottom: 0.3rem;
           }
 
-  .taken-courses table {
+          .timeframe {
+            color: #8392a5;
+            text-align: right;
+          }
+
+          .taken-courses {
+            table {
               margin-left: 1rem;
               width: 100%;
               transition: all 0.3s ease-out;
               background: none;
               border: none;
-  }
 
-  .taken-courses tr {
+              tr,
-    height: auto !important;
+              td,
-  }
+              th {
-  
-  .taken-courses tr,
-  .taken-courses td,
-  .taken-courses th {
                 background: none;
                 border: none;
                 color: #212529;
               }
-  .taken-courses th.course-name-header{
+
+              tr {
+                height: auto !important;
+              }
+              th {
+                .course-name-header {
                   width: 50%;
                 }
-  .taken-courses .hidden-course {
+              }
+              .hidden-course {
                 display: none;
                 transition: all 1s ease-out;
               }
-  
+              ul {
-  .taken-courses ul {
                 margin-bottom: 0;
               }
+            }
+          }
+        }
+      }
+    }
+  }
 
   .hidden {
     display: none;
   }
 
-  /*============ Education Alter Template =============*/
+  @include media('<=large') {
-  .education-alt .degree-info {
-    border-right: 2px solid #248aaa;
-  }
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  
-  @media only screen and (min-width: 1824px) {
-  }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
-  }
-  
-  /* IPad Pro */
-  
-  @media (max-width: 1024px) {
     .container {
       padding-left: 0;
     }
   }
 
-  /*  Large devices (desktops, 992px and up) */
+  @include media('<=small') {
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 
@@ -178,26 +160,17 @@
     .icon {
       display: none;
     }
+
     .line {
       display: none;
     }
+
     .timeframe {
       text-align: left;
     }
   }
-  
+}
-  /* iPhoneX, iPhone 6,7,8 */
+
-  
+.education-alt .degree-info {
-  @media only screen and (max-width: 375px) {
+  border-right: 2px solid #248aaa;
-  }
-  
-  /* Galaxy S5, Moto G4 */
-  
-  @media only screen and (max-width: 360px) {
-  }
-  
-  /* iPhone 5 or before */
-  
-  @media only screen and (max-width: 320px) {
-  }  
 }