Mobile friendly

Author: SasiAlavala

assets/css/main.css

@@ -505,23 +505,176 @@ body {
 
 /* Responsive */
 @media (max-width: 768px) {
-  .hero-text h1 {
-    font-size: 2rem;
+  .navbar {
+    padding: 0.8rem 0;
   }
 
   .nav-container {
     padding: 0 1rem;
     gap: 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav-logo {
+    gap: 0.5rem;
+  }
+
+  .nav-logo img {
+    height: 35px;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    gap: 0.8rem;
+    margin-left: 0;
+    padding-left: 0;
+    width: 100%;
+  }
+
+  .nav-link {
+    font-size: 1rem;
+    padding: 0.5rem 0;
+    width: 100%;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .nav-link:last-child {
+    border-bottom: none;
+  }
+
+  .hero-text h1 {
+    font-size: 1.75rem;
+  }
+
+  .hero-text p {
+    font-size: 1rem;
   }
 
   .main-content {
     padding: 2rem 1rem;
   }
 
+  .people-section h1,
+  .research-section h1 {
+    font-size: 2rem;
+  }
+
+  .people-section h2,
+  .research-section h2,
+  .lab-section h2 {
+    font-size: 1.5rem;
+  }
+
   .people-grid {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 1.5rem;
   }
+
+  .publication-item {
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .pub-thumbnail {
+    width: 100%;
+    height: 200px;
+  }
+
+  .pub-title {
+    font-size: 1rem;
+  }
+
+  .pub-authors,
+  .pub-venue {
+    font-size: 0.9rem;
+  }
+
+  .filter-buttons {
+    gap: 0.5rem;
+  }
+
+  .filter-btn {
+    padding: 0.4rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .research-area {
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1.5rem 0;
+  }
+
+  .research-area-content h2 {
+    font-size: 1.4rem;
+  }
+
+  .research-area-content p {
+    font-size: 0.95rem;
+  }
+
+  .research-area-image {
+    flex: 1;
+    max-width: 100%;
+  }
+
+  .hero-section {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .hero-image {
+    max-width: 100%;
+  }
+
+  .hero-media {
+    max-width: 100%;
+  }
+
+  .hero-media img,
+  .hero-media video {
+    max-width: 100%;
+  }
+
+  .funding-section {
+    padding: 2rem 0;
+    margin-top: 3rem;
+  }
+
+  .funding-section h2 {
+    font-size: 1.5rem;
+  }
+
+  .funding-logo {
+    flex: 0 0 250px;
+    padding: 1.5rem;
+  }
+
+  .funding-logo img {
+    max-width: 150px;
+    max-height: 80px;
+  }
+
+  .funding-carousel::before,
+  .funding-carousel::after {
+    width: 50px;
+  }
+
+  .year-header {
+    font-size: 1.5rem;
+    margin: 2rem 0 0.8rem 0;
+  }
+
+  .contact-page {
+    max-width: 100%;
+    padding: 1rem;
+  }
+
+  .contact-page h1 {
+    font-size: 2rem;
+  }
 }
 
 /* Links */