Update home.css

static/home.css

@@ -451,6 +451,213 @@
   .scroller-top:after{
     background: #FFAB91;
   }
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Nunito', sans-serif;
+}
+/* Bannner styles */
+.body_section .banner{
+    width: 100%;
+    height: 70vh;
+    background-image: linear-gradient(rgba(32, 31, 31, 0.55),rgba(36, 35, 35, 0.55)), url(./images/Home/banner_3.jpg);
+    background-position: center;
+    background-size: cover;
+}
+
+/* Moving heading*/
+@keyframes showTopText {
+    0% { transform: translate3d(0, 100%, 0); }
+    40%, 60% { transform: translate3d(0, 50%, 0); }
+    100% { transform: translate3d(0, 0, 0); }
+  }
+  @keyframes showBottomText {
+    0% { transform: translate3d(0, -100%, 0); }
+    100% { transform: translate3d(0, 0, 0); }
+  }
+  .animated-title {
+    color: #ffffff;
+    font-family: Roboto, Arial, sans-serif;
+    font-weight: normal;
+    height: 500px;
+    left: 0;
+    position: absolute;
+    top: 20%;
+    width: 500px;
+    padding-left: 70px;
+    
+  }
+
+  .animated-title > div {
+    height: 50%;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+  }
+  .animated-title > div div {
+    font-size: 40px;
+    padding: 2vmin 0;
+    position: absolute;
+  }
+  .animated-title > div div span {
+    display: block;
+  }
+  .animated-title > div.text-top {
+    border-bottom: 7px solid #ffffff;
+    top: 0;
+  }
+  .animated-title > div.text-top div {
+    animation: showTopText 3s;
+    animation-delay: 1s;
+    animation-fill-mode: forwards;
+    bottom: 0;
+    transform: translate(0, 100%);
+  }
+  .animated-title > div.text-top div span:first-child {
+    color: #ffffff;
+  }
+  .animated-title > div.text-bottom {
+    bottom: 0;
+  }
+  .animated-title > div.text-bottom div {
+    animation: showBottomText 3s;
+    animation-delay: 3.5s;
+    animation-fill-mode: forwards;
+    top: 0;
+    transform: translate(0, -100%);
+  }
+/*  end of moving headings*/
+
+
+
+
+
+
+
+
+
+
+
+/* Tablet landscape */
+@media screen and (max-width: 1280px){
+    .body_section .banner{
+        background-position: center;
+        background-size: auto;
+    }
+    .animated-title > div div {
+        font-size: 30px;
+      }
+}
+/* End of Tablet landscape */
+
+
+/* Tablet portrait */
+@media screen and (max-width: 970px){
+    .body_section .banner{
+        height: 45vh;
+        background-position: center;
+        background-size: auto;
+
+    }
+    .animated-title{
+        color: #ffffff;
+        height: 250px;
+        left: 0;
+        top: 30%;
+        width: 500px;
+        padding-left: 50px;
+    }
+    .animated-title > div div {
+        font-size: 30px;
+      }
+      .animated-title > div.text-top {
+        border-bottom: 6px solid #ffffff;
+        top: 0;
+      }
+
+      .gif{
+        margin-top: 100px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .gif  img{
+        width: 200px;
+    }
+    /* brief description */
+    .biolith{
+        padding-top: 100px;
+    }
+    .body_container .biolith h2{
+        color: #005b96;
+        font-size: 50px;
+        padding-top: 240px;
+        padding-left: 100px;
+        padding-bottom: 10px;
+    }
+    .body_container .biolith p{
+        color: black;
+        padding-right: 990px;
+        padding-left: 100px;
+    }
+    
+    .body_container .biolith button{
+        margin-left: 100px;
+        margin-top: 20px;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14px;
+        font-weight: bold;
+        background: #6497b1;
+    }
+    .body_container .biolith button:hover{
+        color: #ffffff;
+        font-weight: normal;
+    }
+
+}
+/* End of Tablet portrait */
+
+
+
+
+/* mobile view*/
+@media screen and (max-width: 700px){
+    .gif{
+        margin-top: 100px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .gif  img{
+        width: 150px;
+    }
+
+    .animated-title{
+        color: #ffffff;
+        height: 250px;
+        left: 0;
+        top: 30%;
+        width: 300px;
+        padding-left: 20px;
+    }
+    .animated-title > div div {
+        font-size: 20px;
+      }
+      .animated-title > div.text-top {
+        border-bottom: 5px solid #ffffff;
+        top: 0;
+      }
+}
+/* mobile view*/
+
 
 @keyframes moveRotate {
     0% {