Made the website fully responsive

assets/about/about.css

@@ -21,9 +21,9 @@ body {
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .section-title {
@@ -38,16 +38,17 @@ body {
     font-size: 1.1rem;
     color: var(--text-color);
     line-height: 1.8;
-    max-width: 1000px;
+    max-width: 800px;
     text-align: center;
+    margin: 0 auto;
 }
 
 .about-image {
     width: 100%;
     max-width: 600px;
     height: auto;
     border-radius: 10px;
-    margin: 0 auto 2rem;
+    margin: 2rem auto;
     display: block;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
@@ -62,8 +63,7 @@ body {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
-    max-width: 1200px;
-    margin: 3rem auto;
+    width: 100%;
 }
 
 .feature-item {
@@ -98,8 +98,13 @@ body {
 }
 
 @media (max-width: 768px) {
+    .about-section {
+        padding: 4rem 1rem;
+    }
+
     .about-content {
         padding: 1.5rem;
+        margin: 0 1rem;
     }
 
     .about-text {
@@ -108,5 +113,24 @@ body {
 
     .feature-grid {
         grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .about-section {
+        padding: 3rem 0.5rem;
+    }
+
+    .about-content {
+        padding: 1rem;
+    }
+
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .about-image {
+        margin: 1.5rem auto;
     }
 }

assets/about/about.html

@@ -18,6 +18,9 @@
                 <img src="" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="nav-items">
                 <ul class="nav-links">
                     <li><a href="../../index.html"><i class="fas fa-house"></i> Home</a></li>

assets/contact/contact.html

@@ -18,6 +18,9 @@
                 <img src="" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="nav-items">
                 <ul class="nav-links">
                     <li><a href="../../index.html"><i class="fas fa-house"></i> Home</a></li>

assets/pastevents/pastevents.html

@@ -18,6 +18,9 @@
                 <img src="" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="nav-items">
                 <ul class="nav-links">
                     <li><a href="../../index.html"><i class="fas fa-house"></i> Home</a></li>

index.html

@@ -24,6 +24,9 @@
                 <img src="./assets/images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="nav-items">
                 <ul class="nav-links">
                     <li><a href="index.html"><i class="fas fa-house"></i> Home</a></li>

script.js

@@ -228,6 +228,21 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Mobile menu functionality
+const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+const navItems = document.querySelector('.nav-items');
+
+mobileMenuBtn.addEventListener('click', () => {
+    navItems.classList.toggle('active');
+});
+
+// Close mobile menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (!navItems.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+        navItems.classList.remove('active');
+    }
+});
+
 // Scroll to top button
 document.addEventListener('DOMContentLoaded', () => {
     // Select the scroll-to-top button

style.css

@@ -15,6 +15,7 @@
 
 html {
     scroll-behavior: smooth;
+    font-size: 16px;
 }
 
 .logo-container {
@@ -409,51 +410,165 @@ body {
 
 /* Responsiveness */
 
+html {
+    scroll-behavior: smooth;
+    font-size: 16px;
+}
+
 @media (max-width: 768px) {
+    html {
+        font-size: 14px;
+    }
+}
+
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.navbar-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.nav-items {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+/* new mobile menu styles */
+.mobile-menu-btn {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+@media (max-width: 1024px) {
     .navbar-container {
-        flex-direction: column;
-        align-items: center;
+        padding: 0.8rem 0;
+    }
+
+    .mobile-menu-btn {
+        display: block;
     }
 
     .nav-items {
+        position: fixed;
+        top: 70px;
+        left: -100%;
+        width: 100%;
+        height: calc(100vh - 70px);
+        background-color: white;
         flex-direction: column;
-        align-items: center;
-        margin-top: 1rem;
+        padding: 2rem;
+        transition: left 0.3s ease;
+    }
+
+    .nav-items.active {
+        left: 0;
     }
 
     .nav-links {
         flex-direction: column;
         align-items: center;
+        width: 100%;
         margin-right: 0;
-        margin-bottom: 1rem;
     }
 
     .nav-links li {
-        margin: 0.5rem 0;
+        width: 100%;
+        text-align: center;
+        padding: 1rem 0;
+        border-bottom: 1px solid #eee;
+        margin-left: 0;
     }
+}
 
-    .theme-switcher {
-        margin-top: 1rem;
-    }
+.hero h1 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+}
 
+.hero p {
+    font-size: clamp(1rem, 3vw, 1.2rem);
+}
+
+.hero-content {
+    max-width: min(800px, 90%);
+    padding: 2rem;
+}
+
+.event-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    gap: 2rem;
+    padding: 1rem;
+}
+
+.event-image {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+}
+
+@media (max-width: 768px) {
     .theme-options {
         right: 50%;
         transform: translateX(50%) translateY(-10px);
     }
-
+    
     .theme-options.active {
         transform: translateX(50%) translateY(0);
     }
+}
+
+@media (max-width: 480px) {
+    .container {
+        width: 95%;
+        padding: 0 0.5rem;
+    }
 
-    .hero h1 {
-        font-size: 2.5rem;
+    .hero-content {
+        padding: 1.5rem;
     }
 
-    .hero p {
-        font-size: 1rem;
+    .event-card {
+        margin: 0 -1rem;
     }
 
+    .to-top {
+        bottom: 1rem;
+        right: 1rem;
+    }
+}
+
+@media print {
+    .navbar,
+    .theme-switcher,
+    .to-top,
     .explore-button {
-        padding: 0.8rem 2rem;
+        display: none;
+    }
+
+    .hero {
+        height: auto;
+        min-height: auto;
+    }
+
+    .event-card {
+        break-inside: avoid;
+        page-break-inside: avoid;
     }
 }