diff --git a/css/styles.css b/css/styles.css
index cebdbe8..1a99cf2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,12 +1,16 @@
 /* Fallback styles in case CDN links fail */
 :root {
-    --primary-color: #0d6efd;
-    --dark-bg: #212529;
+    --primary-color: #8b5cf6;
+    --secondary-color: #ec4899;
+    --dark-bg: #4c1d95;
     --light-bg: #f8f9fa;
-    --text-dark: #212529;
-    --text-light: #6c757d;
+    --text-dark: #1f2937;
+    --text-light: #6b7280;
     --white: #ffffff;
     --shadow: 0 2px 4px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+    --gradient-primary: linear-gradient(135deg, #8b5cf6, #ec4899);
+    --gradient-secondary: linear-gradient(135deg, #6366f1, #8b5cf6);
 }
 
 /* Reset and base styles */
@@ -19,8 +23,9 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.5;
-    background-color: var(--light-bg);
+    background: linear-gradient(135deg, var(--light-bg), #e0e7ff);
     color: var(--text-dark);
+    scroll-behavior: smooth;
 }
 
 /* Container fallback */
@@ -33,9 +38,14 @@ body {
 
 /* Navbar fallback */
 .navbar {
-    background-color: var(--dark-bg);
+    background: var(--gradient-primary);
     padding: 1rem 0;
     box-shadow: var(--shadow);
+    transition: all 0.3s ease;
+}
+
+.navbar:hover {
+    box-shadow: var(--shadow-lg);
 }
 
 .navbar-brand {
@@ -43,6 +53,11 @@ body {
     text-decoration: none;
     font-size: 1.25rem;
     font-weight: bold;
+    transition: transform 0.3s ease;
+}
+
+.navbar-brand:hover {
+    transform: scale(1.1);
 }
 
 .navbar-nav {
@@ -55,12 +70,30 @@ body {
     color: var(--white);
     text-decoration: none;
     opacity: 0.8;
-    transition: opacity 0.3s ease;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background: var(--gradient-primary);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+    width: 100%;
 }
 
 .nav-link:hover,
 .nav-link.active {
     opacity: 1;
+    color: #f472b6;
 }
 
 /* Button fallback */
@@ -72,16 +105,38 @@ body {
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s ease, height 0.6s ease;
+}
+
+.btn:hover::before {
+    width: 300px;
+    height: 300px;
 }
 
 .btn-primary {
-    background-color: var(--primary-color);
+    background: var(--gradient-primary);
     color: var(--white);
+    box-shadow: var(--shadow);
 }
 
 .btn-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(135deg, #7c3aed, #db2777);
 }
 
 /* Grid fallback */
@@ -158,16 +213,97 @@ body {
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
+/* Form styles */
+.form-control {
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
+    transform: translateY(-1px);
+}
+
+/* Card hover effects */
+.card {
+    transition: all 0.3s ease;
+    background: linear-gradient(135deg, #ffffff, #f9fafb);
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(135deg, #ffffff, #f3f4f6);
+}
+
 /* Custom animations */
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from { 
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
 
 .fade-in {
     animation: fadeIn 0.5s ease-in;
 }
 
+/* Gradient backgrounds */
+.gradient-bg {
+    background: var(--gradient-primary);
+    background-size: 200% 200%;
+    animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Section backgrounds */
+.section-gradient-1 {
+    background: linear-gradient(135deg, #ffffff, #e0e7ff);
+}
+
+.section-gradient-2 {
+    background: linear-gradient(135deg, #f3e8ff, #fdf2f8);
+}
+
+.section-gradient-3 {
+    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
+}
+
+/* Text gradients */
+.text-gradient {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Border gradients */
+.border-gradient {
+    border: 2px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+                var(--gradient-primary) border-box;
+}
+
 /* Responsive fallback */
 @media (max-width: 768px) {
     .navbar-nav {
diff --git a/index.html b/index.html
index 2f50637..a3a4349 100644
--- a/index.html
+++ b/index.html
@@ -8,33 +8,52 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    animation: {
+                        'float': 'float 3s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'bounce-slow': 'bounce 3s infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-10px)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
     <!-- Custom CSS -->
     <link rel="stylesheet" href="css/styles.css">
 </head>
-<body class="bg-gray-100">
+<body class="bg-gradient-to-br from-gray-100 to-blue-50">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-to-r from-purple-600 to-indigo-600 fixed-top transition-all duration-300 hover:shadow-lg">
         <div class="container">
-            <a class="navbar-brand" href="#">Your Brand</a>
+            <a class="navbar-brand hover:scale-110 transition-transform duration-300" href="#">Your Brand</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav">
                     <li class="nav-item">
-                        <a class="nav-link active" href="#home">Home</a>
+                        <a class="nav-link active hover:text-pink-300 transition-colors duration-300" href="#home">Home</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#about">About</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#about">About</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#services">Services</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#services">Services</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#portfolio">Portfolio</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#portfolio">Portfolio</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#contact">Contact</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#contact">Contact</a>
                     </li>
                 </ul>
             </div>
@@ -42,54 +61,60 @@
     </nav>
 
     <!-- Hero Section -->
-    <section id="home" class="py-5">
-        <div class="container">
+    <section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-20"></div>
+        <div class="container relative z-10">
             <div class="row">
                 <div class="col-md-8 mx-auto text-center">
-                    <h1 class="text-4xl font-bold mb-4">Welcome to Your Website</h1>
-                    <p class="text-gray-600 mb-4">A clean, modern template for your next project</p>
-                    <button class="btn btn-primary me-2">Get Started</button>
-                    <button class="btn btn-outline-secondary">Learn More</button>
+                    <h1 class="text-5xl font-bold mb-4 animate-float bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Welcome to Your Website</h1>
+                    <p class="text-gray-700 mb-8 text-xl animate-pulse-slow">A clean, modern template for your next project</p>
+                    <div class="space-x-4">
+                        <button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Get Started</button>
+                        <button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">Learn More</button>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- About Section -->
-    <section id="about" class="py-5 bg-white">
+    <section id="about" class="py-5 bg-gradient-to-br from-white to-blue-50 relative">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">About Us</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Us</h2>
             <div class="row">
-                <div class="col-md-6">
-                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
+                    <p class="text-gray-700 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                 </div>
-                <div class="col-md-6">
-                    <p class="text-gray-600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
+                    <p class="text-gray-700 text-lg">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Services Section -->
-    <section id="services" class="py-5">
+    <section id="services" class="py-5 relative bg-gradient-to-br from-blue-50 to-purple-50">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Our Services</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Our Services</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
-                        <h3 class="text-xl font-bold mb-3">Service 1</h3>
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
+                        <div class="text-4xl mb-4 animate-bounce-slow">🚀</div>
+                        <h3 class="text-xl font-bold mb-3 text-purple-600">Service 1</h3>
                         <p class="text-gray-600">Description of your first service goes here.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
-                        <h3 class="text-xl font-bold mb-3">Service 2</h3>
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-pink-500">
+                        <div class="text-4xl mb-4 animate-bounce-slow">💡</div>
+                        <h3 class="text-xl font-bold mb-3 text-pink-600">Service 2</h3>
                         <p class="text-gray-600">Description of your second service goes here.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
-                        <h3 class="text-xl font-bold mb-3">Service 3</h3>
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-indigo-500">
+                        <div class="text-4xl mb-4 animate-bounce-slow">⚡</div>
+                        <h3 class="text-xl font-bold mb-3 text-indigo-600">Service 3</h3>
                         <p class="text-gray-600">Description of your third service goes here.</p>
                     </div>
                 </div>
@@ -98,28 +123,28 @@
     </section>
 
     <!-- Portfolio Section -->
-    <section id="portfolio" class="py-5 bg-white">
+    <section id="portfolio" class="py-5 bg-gradient-to-br from-purple-50 to-pink-50 relative">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Portfolio</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Portfolio</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 1</h3>
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <h3 class="text-xl font-bold mb-2 text-purple-600">Project 1</h3>
                         <p class="text-gray-600">Brief description of your first project.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 2</h3>
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">Project 2</h3>
                         <p class="text-gray-600">Brief description of your second project.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 3</h3>
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <h3 class="text-xl font-bold mb-2 text-pink-600">Project 3</h3>
                         <p class="text-gray-600">Brief description of your third project.</p>
                     </div>
                 </div>
@@ -128,25 +153,25 @@
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-5">
+    <section id="contact" class="py-5 relative bg-gradient-to-br from-blue-50 to-indigo-50">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Contact Us</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Contact Us</h2>
             <div class="row">
                 <div class="col-md-6 mx-auto">
-                    <form class="bg-white rounded-lg shadow-md p-6">
+                    <form class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
                         <div class="mb-3">
-                            <label for="name" class="form-label">Name</label>
-                            <input type="text" class="form-control" id="name" placeholder="Your name">
+                            <label for="name" class="form-label text-purple-600">Name</label>
+                            <input type="text" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="name" placeholder="Your name">
                         </div>
                         <div class="mb-3">
-                            <label for="email" class="form-label">Email</label>
-                            <input type="email" class="form-control" id="email" placeholder="Your email">
+                            <label for="email" class="form-label text-purple-600">Email</label>
+                            <input type="email" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="email" placeholder="Your email">
                         </div>
                         <div class="mb-3">
-                            <label for="message" class="form-label">Message</label>
-                            <textarea class="form-control" id="message" rows="4" placeholder="Your message"></textarea>
+                            <label for="message" class="form-label text-purple-600">Message</label>
+                            <textarea class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="message" rows="4" placeholder="Your message"></textarea>
                         </div>
-                        <button type="submit" class="btn btn-primary">Send Message</button>
+                        <button type="submit" class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Send Message</button>
                     </form>
                 </div>
             </div>
@@ -154,16 +179,16 @@
     </section>
 
     <!-- Footer -->
-    <footer class="bg-dark text-white py-4">
+    <footer class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 relative">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
-                    <p>&copy; 2024 Your Brand. All rights reserved.</p>
+                    <p class="hover:text-pink-300 transition-colors duration-300">&copy; 2024 Your Brand. All rights reserved.</p>
                 </div>
                 <div class="col-md-6 text-end">
-                    <a href="#" class="text-white me-3">Privacy Policy</a>
-                    <a href="#" class="text-white me-3">Terms of Service</a>
-                    <a href="#" class="text-white">Contact</a>
+                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Privacy Policy</a>
+                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Terms of Service</a>
+                    <a href="#" class="text-white hover:text-pink-300 transition-colors duration-300">Contact</a>
                 </div>
             </div>
         </div>