Modified the home page design

index.html

@@ -12,7 +12,7 @@
     <link rel="icon" type="image/x-icon" href="./assets/images/favicons/favicon1.png">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
     <script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
     <title>Eventica</title>
 </head>
@@ -69,7 +69,8 @@
     <!-- Main section -->
     <header id="home" class="hero">
         <div class="hero-content">
-            <h1>Discover Bangalore's Events & Meetups</h1>
+            <h1>Discover Events & Meetups</h1>
+            <div class="highlight-text">BANGALORE</div>
             <p>Explore the best vibrant events, tech conferences, and exciting happenings in the Silicon Valley of India.</p>
             <a href="#events" class="explore-button">Explore Events</a>
         </div>

style.css

@@ -31,8 +31,6 @@ body {
     max-width: 1200px;
     margin: 0 auto;
     width: 90%;
-    max-width: 1200px;
-    margin: 0 auto;
     padding: 0 1rem;
 }
 
@@ -278,26 +276,81 @@ body {
 /* Hero Section Css */
 
 .hero {
-    background-size: cover;
-    background-position: center;
+    position: relative;
     height: 100vh;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     text-align: center;
-    color: #fff;
-    position: relative;
-    background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(231, 76, 60, 0.8));
+    background-size: cover;
+    background-position: center;
+    background: linear-gradient(135deg, rgba(95, 158, 231, 0.8), rgba(211, 104, 92, 0.8));
 }
 
 .hero-content {
-    max-width: min(800px, 90%);
-    padding: 2rem;
-    background-color: rgba(0, 0, 0, 0.5);
+    max-width: 1000px;
+    width: 90%;
+    padding: 1rem;
     border-radius: 10px;
     backdrop-filter: blur(10px);
 }
 
+.highlight-text {
+    font-size: clamp(6rem, 12vw, 10rem);
+    font-weight: 800;
+    color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: 0 auto;
+    white-space: nowrap;
+    overflow: visible;
+    text-align: center;
+    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
+    line-height: 1.1;
+    animation: changeBackground 10s infinite;
+    position: relative;
+    z-index: 1;
+    padding: 0;
+    width: 100%;
+    display: block;
+}
+
+@keyframes changeBackground {
+
+    0%,
+    16.66% {
+        background-image: url('assets/images/text-backgrounds/image1.png');
+    }
+
+    16.67%,
+    33.33% {
+        background-image: url('assets/images/text-backgrounds/image2.png');
+    }
+
+    33.34%,
+    49.99% {
+        background-image: url('assets/images/text-backgrounds/image3.png');
+    }
+
+    50%,
+    66.66% {
+        background-image: url('assets/images/text-backgrounds/image4.png');
+    }
+
+    66.67%,
+    83.33% {
+        background-image: url('assets/images/text-backgrounds/image5.png');
+    }
+
+    83.34%,
+    100% {
+        background-image: url('assets/images/text-backgrounds/image6.png');
+    }
+}
+
 .hero h1 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     margin-bottom: 1rem;
@@ -306,25 +359,34 @@ body {
 
 .hero p {
     font-size: clamp(1rem, 3vw, 1.2rem);
-    max-width: 600px;
-    margin: 0 auto 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+    color: #000000;
+    font-weight: 600;
+    text-shadow: none;
+    line-height: 1.3;
+    margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 .explore-button {
     display: inline-block;
-    background-color: var(--secondary-color);
     color: #fff;
     padding: 1rem 2.5rem;
+    font-weight: 600;
+    color: #fff;
+    background-color: var(--primary-color);
     border-radius: 50px;
     text-decoration: none;
-    font-weight: 600;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 1px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
 }
 
 .explore-button:hover {
-    background-color: #e67e22;
+    background-color: #686969;
     transform: translateY(-3px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
@@ -535,7 +597,7 @@ body.dark-mode .footer {
 }
 
 .dark-mode .navbar {
-    background-color: #2a2a2a !important; /* Dark gray background */
+    background-color: #2a2a2a !important;
     transition: background-color 0.3s ease;
 }
 
@@ -619,6 +681,10 @@ body.dark-mode .event-date,
     .theme-options.active {
         transform: translateX(50%) translateY(0);
     }
+
+    .highlight-text {
+        font-size: 11vw;
+    }
 }
 
 @media (max-width: 480px) {