motion text in hero

_includes/navigation.html

@@ -2,10 +2,10 @@
   <div class="container-fluid container-xl position-relative d-flex align-items-center">
   <a href="/" class=" d-flex align-items-center me-auto">
     <div class="logo-container">
-      <img src="/assets/img/redlogo-removebg-preview.png" alt="" width="100" height="90">
-      <img src="/assets/img/brightlogo.jpg" alt="" width="100" height="90">
+      <img src="/assets/img/Logo_6_prev_ui.png" alt="" style="filter: contrast(200%);">
+      <img src="/assets/img/AKUT.png" alt="">
     </div>
-  <h1 class="sitename">{{site.name}}</h1> 
+  <h1 class="sitename"><b>{{site.name}}</b></h1> 
   </a>
 
   <nav id="navmenu" class="navmenu">

_includes/sections/hero.html

@@ -1,8 +1,11 @@
 <!-- Hero Section -->
 <section id="hero" class="hero section dark-background">
-    <img src="/assets/img/steve-johnson-_0iV9LmPDn0-unsplash.jpg" alt="" data-aos="fade-in" class="">
-    <div class="container ">
-    <h2 data-aos="fade-up" data-aos-delay="100" class="">Machine Intelligence,<br>Numerical Data<span> Laboratory</span></h2>
+    <img src="/assets/img/Designer (1).jpeg" alt="" data-aos="fade-in" class="">
+    <div class="container d-flex flex-column align-items-center text-center me-auto ">
+        <h2 data-aos="fade-up">Machine Intelligence,</h2>
+        <h2 data-aos="fade-up" data-aos-delay="400"> Numerical Data Laboratory</h2>
+
+
     </div>
 
 </section>

_sass/main.scss

@@ -288,6 +288,20 @@ h6 {
   background: color-mix(in srgb, var(--accent-color), transparent 15%);
 }
 
+.header .logo-box {
+  color: var(--contrast-color);
+  background-color: #df15298e;
+  border: 0px solid var(--accent-color);
+  display: inline-block;
+  padding: auto;
+  border-radius: 10px;
+  transition: none;
+  font-size: 16px;
+  font-weight: 500;
+  transition: 0.3s;
+  font-family: var(--heading-font);
+}
+
 @media (max-width: 1200px) {
   .header .logo {
     order: 1;
@@ -911,7 +925,7 @@ section,
   inset: 0;
   display: block;
   width: 100%;
-  height: 100%;
+  height: 100%; 
   object-fit: cover;
   z-index: 1;
 }
@@ -931,6 +945,7 @@ section,
 
 .hero h2 {
   margin: 0;
+  color: #ffffff;
   font-size: 48px;
   font-weight: 700;
 }
@@ -2004,3 +2019,31 @@ section,
   }
 }
 
+
+/* Cursor */
+// .cursor{
+//   position: relative;
+//   width: 24em;
+//   margin: 0 auto;
+//   border-right: 2px solid rgba(255,255,255,.75);
+//   font-size: 30px;
+//   text-align: center;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   transform: translateY(-50%);    
+// }
+// /* Animation */
+// .typewriter-animation {
+// animation: 
+//   typewriter 5s steps(50) 1s 1 normal both, 
+//   blinkingCursor 500ms steps(50) infinite normal;
+// }
+// @keyframes typewriter {
+// from { width: 0; }
+// to { width: 100%; }
+// }
+// @keyframes blinkingCursor{
+// from { border-right-color: rgba(255,255,255,.75); }
+// to { border-right-color: transparent; }
+// }
+