diff --git a/Resume.css b/Resume.css
index cfd806e..3b3fd82 100644
--- a/Resume.css
+++ b/Resume.css
@@ -227,6 +227,8 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    flex-wrap: wrap;
     position: relative;
 }
 .achive-entry{
@@ -468,6 +470,7 @@ button {
 #download-resume {
     background-color: #5cb85c; /* Bootstrap success color */
     color: white;
+
 }
 .ui-autocomplete {
     max-height: 150px;
@@ -476,4 +479,7 @@ button {
     border: 1px solid #ddd;
     background-color: #fff;
   }
-  
\ No newline at end of file
+  
+
+
+ 
diff --git a/about.html b/about.html
index 38bbf4e..812be57 100644
--- a/about.html
+++ b/about.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,196 +8,232 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
 
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
-  </head>
-  
-    <style>
-:root {
-    --deep-teal: #003d4d; /* Updated primary color */
-    --off-white: #f8f9fa; /* Updated background color */
-    --dark-slate: #2f4f4f; /* Text color */
-    --soft-gold: #d9c79e; /* Accent color */
-}
 
-* {
-    margin: 0; 
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    outline: none;
-    border: none;
-    text-decoration: none;
-    text-transform: capitalize;
-    transition: .2s linear;
-}
 
-body {
-    background-color: var(--off-white); /* Updated background color */
-    margin: 0;
-    padding: 0;
-}
+<style>
+    :root {
+        --deep-teal: #003d4d;
+        /* Updated primary color */
+        --off-white: #f8f9fa;
+        /* Updated background color */
+        --dark-slate: #2f4f4f;
+        /* Text color */
+        --soft-gold: #d9c79e;
+        /* Accent color */
+    }
 
-.header {
-    background-color: var(--deep-teal); /* Updated header color */
-    padding: 20px;
-    text-align: center;
-    color: var(--off-white); /* Text color for better contrast */
-}
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        outline: none;
+        border: none;
+        text-decoration: none;
+        text-transform: capitalize;
+        transition: .2s linear;
+    }
 
-.header h1 {
-    margin: 0;
-    font-size: 36px;
-}
+    body {
+        background-color: var(--off-white);
+        /* Updated background color */
+        margin: 0;
+        padding: 0;
+    }
 
-.content1 {
-    display: flex;
-    justify-content: flex-start;
-}
+    .header {
+        background-color: var(--deep-teal);
+        /* Updated header color */
+        padding: 20px;
+        text-align: center;
+        color: var(--off-white);
+        /* Text color for better contrast */
+    }
 
-.gif {
-    margin-left: 100px;
-}
+    .header h1 {
+        margin: 0;
+        font-size: 36px;
+    }
 
-.content {
-    max-width: 70%; /* Further reduced width to prevent hiding the GIFs */
-    margin: 30px auto; /* Centered margin */
-    background-color: #f5f5f5; /* Slightly off-white background */
-    border-radius: 10px;
-    padding: 20px; /* Padding to maintain space inside the box */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; /* Transition for scaling and glow */
-}
+    .content1 {
+        display: flex;
+        justify-content: flex-start;
+    }
 
-.content:hover {
-    transform: scale(1.05); /* Slightly reduced scale effect for a minimalist look */
-    box-shadow: 0 0 15px rgba(0, 77, 79, 0.8); /* Glow effect with Dark Teal color */
-    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Ensure smooth transition */
-}
+    .gif {
+        margin-left: 100px;
+    }
 
-.content h2 {
-    font-size: 28px;
-    color: var(--dark-slate); /* Updated heading color */
-    border-radius: 5px;
-    padding: 2px 5px;
-    margin-bottom: 20px;
-    background-color: var(--soft-gold); /* Updated background color for h2 */
-    text-align: center; /* Center align the heading */
-    transition: background-color 0.5s ease, color 0.5s ease;
-}
+    .content {
+        max-width: 70%;
+        /* Further reduced width to prevent hiding the GIFs */
+        margin: 30px auto;
+        /* Centered margin */
+        background-color: #f5f5f5;
+        /* Slightly off-white background */
+        border-radius: 10px;
+        padding: 20px;
+        /* Padding to maintain space inside the box */
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
+        /* Transition for scaling and glow */
+    }
 
-.content h2:hover {
-    background-color: var(--deep-teal); /* Updated hover effect to match the theme */
-    color: var(--off-white);
-    transition: background-color 0.5s ease, color 0.5s ease; /* Transition for background and color */
-}
+    .content:hover {
+        transform: scale(1.05);
+        /* Slightly reduced scale effect for a minimalist look */
+        box-shadow: 0 0 15px rgba(0, 77, 79, 0.8);
+        /* Glow effect with Dark Teal color */
+        transition: transform 0.5s ease, box-shadow 0.5s ease;
+        /* Ensure smooth transition */
+    }
 
-.content p {
-    font-size: 18px;
-    color: var(--dark-slate); /* Updated paragraph color to Dark Slate */
-    line-height: 1.6;
-    margin-bottom: 20px;
-    text-align: left; /* Left-align paragraph text */
-}
+    .content h2 {
+        font-size: 28px;
+        color: var(--dark-slate);
+        /* Updated heading color */
+        border-radius: 5px;
+        padding: 2px 5px;
+        margin-bottom: 20px;
+        background-color: var(--soft-gold);
+        /* Updated background color for h2 */
+        text-align: center;
+        /* Center align the heading */
+        transition: background-color 0.5s ease, color 0.5s ease;
+    }
 
-.content ul {
-    padding-left: 20px; /* Indent list */
-    margin-bottom: 20px;
-    text-align: left; /* Ensure ul is left aligned */
-}
+    .content h2:hover {
+        background-color: var(--deep-teal);
+        /* Updated hover effect to match the theme */
+        color: var(--off-white);
+        transition: background-color 0.5s ease, color 0.5s ease;
+        /* Transition for background and color */
+    }
 
-.content ul li {
-    font-size: 18px;
-    color: var(--dark-slate); /* Updated list item color */
-    margin-bottom: 10px;
-    text-align: left; /* Left-align list items */
-}
+    .content p {
+        font-size: 18px;
+        color: var(--dark-slate);
+        /* Updated paragraph color to Dark Slate */
+        line-height: 1.6;
+        margin-bottom: 20px;
+        text-align: left;
+        /* Left-align paragraph text */
+    }
 
-/* footer section styles */
+    .content ul {
+        padding-left: 20px;
+        /* Indent list */
+        margin-bottom: 20px;
+        text-align: left;
+        /* Ensure ul is left aligned */
+    }
 
-:root {
-    --deep-teal: #003d4d;
-    --off-white: #f8f9fa;
-    --dark-slate: #2f4f4f;
-    --soft-gold: #d9c79e;
-}
-.footer {
-    width: 100%; 
-    background-color: var(--deep-teal); 
-    color: white;
-    padding: 13px 0;
-}
+    .content ul li {
+        font-size: 18px;
+        color: var(--dark-slate);
+        /* Updated list item color */
+        margin-bottom: 10px;
+        text-align: left;
+        /* Left-align list items */
+    }
 
-.footer-content{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+    /* footer section styles */
 
-}
+    :root {
+        --deep-teal: #003d4d;
+        --off-white: #f8f9fa;
+        --dark-slate: #2f4f4f;
+        --soft-gold: #d9c79e;
+    }
 
-.ul{
-   padding: 0;
-   list-style: none;
-   font-family: Verdana, Geneva, Tahoma, sans-serif;
-   text-align: center;
-}
-.footer-bottom{
-    text-align: center;
-    color: #fff; 
-    font-size: 14px;
-    margin: 0;
-    margin-bottom:10px;
-}
+    .footer {
+        width: 100%;
+        background-color: var(--deep-teal);
+        color: white;
+        padding: 13px 0;
+    }
 
-.footer a {
-    color: var(--soft-gold);
-    text-decoration: none;
-    font-size: 16px;  
-}
+    .footer-content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
 
- .social-icons{
-    display: flex;
-    justify-content: space-between;
-    margin-top:20px
- }
- .social-icons a:hover{
-    color: var(--light-grey);
-    transform: scale(1.2) translateY(-5px);
- }
+    }
 
+    .ul {
+        padding: 0;
+        list-style: none;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        text-align: center;
+    }
 
-.footer a:hover {
-    text-decoration: underline;
-}
+    .footer-bottom {
+        text-align: center;
+        color: #fff;
+        font-size: 14px;
+        margin: 0;
+        margin-bottom: 10px;
+    }
 
-.footer-section h3{
-    margin-bottom: 14px;
-    font-size: 28px;
-}
-/* footer section style ends */
+    .footer a {
+        color: var(--soft-gold);
+        text-decoration: none;
+        font-size: 16px;
+    }
 
-.back-button {
-    display: block;
-    text-align: center;
-    margin-top: 20px; /* Decrease this value to move the button up */
-    margin-bottom: 0px;
-}
+    .social-icons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px
+    }
 
-.back-button a {
-    padding: 10px 20px;
-    background-color: var(--deep-teal); /* Updated back button color */
-    color: var(--off-white); /* Text color for back button */
-    text-decoration: none;
-    border-radius: 5px;
-}
+    .social-icons a:hover {
+        color: var(--light-grey);
+        transform: scale(1.2) translateY(-5px);
+    }
 
-.back-button a:hover {
-    background-color: var(--soft-gold); /* Updated hover color */
-}
 
-.navbar {
-    background-color: var(--deep-teal); /* Updated navbar background color */
-    padding: 31px 20px; /* Increased top and bottom padding */
+    .footer a:hover {
+        text-decoration: underline;
+    }
+
+    .footer-section h3 {
+        margin-bottom: 14px;
+        font-size: 28px;
+    }
+
+    /* footer section style ends */
+
+    .back-button {
+        display: block;
+        text-align: center;
+        margin-top: 20px;
+        /* Decrease this value to move the button up */
+        margin-bottom: 0px;
+    }
+
+    .back-button a {
+        padding: 10px 20px;
+        background-color: var(--deep-teal);
+        /* Updated back button color */
+        color: var(--off-white);
+        /* Text color for back button */
+        text-decoration: none;
+        border-radius: 5px;
+    }
+
+    .back-button a:hover {
+        background-color: var(--soft-gold);
+        /* Updated hover color */
+    }
+
+    /* .navbar {
+    background-color: var(--deep-teal); /* Updated navbar background color 
+    padding: 31px 20px; /* Increased top and bottom padding 
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -209,15 +246,15 @@
 }
 
 .navbar h1 {
-    color: var(--off-white); /* Changed to use off-white for better contrast */
+    color: var(--off-white); /* Changed to use off-white for better contrast 
     margin: 0;
     font-size: 2rem;
-    margin-left: -38rem; /* Adjust this value to move the logo right */
-    transition: color 0.3s ease; /* Smooth transition for color change */
+    margin-left: -38rem; /* Adjust this value to move the logo right 
+    transition: color 0.3s ease; /* Smooth transition for color change 
 }
 
 .navbar h1:hover {
-    color: var(--soft-gold); /* Color change on hover */
+    color: var(--soft-gold); /* Color change on hover 
 }
 
 .navbar ul {
@@ -226,7 +263,7 @@
     padding: 0;
     display: flex;
     gap: 20px;
-    margin-right: 30px; /* Adjust this value to move the items left */
+    margin-right: 30px; /* Adjust this value to move the items left 
 }
 
 .navbar ul li {
@@ -234,213 +271,285 @@
 }
 
 .navbar ul li a {
-    color: var(--off-white); /* Updated navbar link color */
+    color: var(--off-white); /* Updated navbar link color *
     text-decoration: none;
     font-size: 18px;
 }
 
 .navbar ul li a:hover {
-    color: var(--soft-gold); /* Updated hover color to Soft Gold */
+    color: var(--soft-gold); /* Updated hover color to Soft Gold *
     text-decoration: none;
     transition: color 0.3s ease;
-}
+} */
 
 
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .navbar {
-        flex-direction: column;
-        align-items: flex-start;
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .navbar {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .navbar ul {
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .navbar h1 {
+            margin-bottom: 10px;
+        }
+
+        .footer-section h3 {
+            font-size: 18px;
+        }
+
+        .footer a {
+            font-size: 13px;
+        }
+
+        .footer-section {
+            margin-bottom: 0;
+            gap: 18px;
+        }
+
+        .footer-bottom {
+            font-size: 12px;
+            margin: 0px;
+            margin-top: 8px;
+        }
     }
 
-    .navbar ul {
-        flex-direction: column;
-        gap: 10px;
+
+    @media (max-width:450px) {
+
+        .footer-section h3 {
+            font-size: 14px;
+        }
+
+        .footer a {
+            font-size: 11px;
+        }
+
+        .footer-section {
+            margin-bottom: 0;
+
+        }
+
+        .footer-bottom {
+            font-size: 10px;
+            margin: 0px;
+            margin-top: 5px;
+        }
     }
 
-    .navbar h1 {
-        margin-bottom: 10px;
+    #progress-container {
+        width: 100%;
+        height: 5px;
+        background-color: white;
+        border-radius: 5px;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 9999;
     }
-    .footer-section h3 {
-        font-size: 18px;
+
+    #progress-bar {
+        height: 100%;
+        background-color: #3f10ea;
     }
-    
-    .footer a {
-        font-size: 13px;
+
+    .panel-1 {
+        padding-top: 40px;
+        width: 100vw;
+        height: auto;
+        position: relative;
+    }
+
+    .about {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-self: center;
+        align-items: center;
+        text-align: center;
+        padding-top: 5rem;
+        padding-bottom: 5rem;
     }
 
-    .footer-section {
-        margin-bottom: 0;
-        gap:18px;
+    .about h1 {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        font-weight: 600;
     }
 
-    .footer-bottom{
-        font-size: 12px;
-        margin: 0px;
-        margin-top:8px;
+    .about p {
+        width: 70%;
+        font-size: 1.8rem;
+    }
+
+    .cards {
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        position: relative;
+        padding-bottom: 5rem;
     }
-}
 
+    .card {
+        width: 30%;
+        padding: 2rem;
+        border-radius: 2rem;
+        background-color: #f8f9fa;
+    }
 
-@media (max-width:450px){
+    .card:hover {
+        scale: 105%;
+    }
 
-    .footer-section h3 {
-        font-size: 14px;
+    .card h2 {
+        font-size: 2.8rem;
+        margin-bottom: 1rem;
+        font-weight: 600;
     }
 
-    .footer a {
-        font-size: 11px;
+    .card p {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
     }
 
-    .footer-section {
-        margin-bottom: 0;
-        
+    .card ul li {
+        font-size: 1.5rem;
     }
 
-    .footer-bottom{
-        font-size: 10px;
-        margin: 0px;
-        margin-top:5px;
+    .card img {
+        margin-bottom: 2rem;
     }
-}
 
-#progress-container {
-            width: 100%;
-            height: 5px;
-            background-color: white;
-            border-radius: 5px;
-            overflow: hidden; 
-            position: fixed;
-            top: 0;
-            left: 0; 
-            z-index: 9999; 
+    @media (max-width:450px) {
+        .cards {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 3rem;
         }
 
-        #progress-bar {
-            height: 100%;
-            background-color: #3f10ea;
+        .card {
+            width: 90%;
         }
-.panel-1{
-    width: 100vw;
-    height: auto;
-    position: relative;
-}
-.about{
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-self: center;
-    align-items: center;
-    text-align: center;
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-}
-.about h1{
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    font-weight: 600;
-}
-.about p{
-    width: 70%;
-    font-size: 1.8rem;
-}
-.cards{
-    width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-    position: relative;
-    padding-bottom: 5rem;
-}
-.card{
-    width: 30%;
-    padding: 2rem;
-    border-radius: 2rem;
-    background-color: #f8f9fa;
-}
-.card:hover{
-    scale: 105%;
-}
-.card h2{
-    font-size: 2.8rem;
-    margin-bottom: 1rem;
-    font-weight: 600;
-}
-.card p{
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-}
-.card ul li{
-    font-size: 1.5rem;
-}
-.card img{
-    margin-bottom: 2rem;
-}
-@media (max-width:450px){
-    .cards{
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 3rem;
     }
-    .card{
-        width: 90%;
-    }
-}
-    </style>
+</style>
 </head>
+
 <body>
 
     <div id="progress-container">
         <div id="progress-bar"></div>
-      </div>
-    
-      <script>
-    let lastScrollPercentage = 0; 
-    
-    function updateProgressBar() {
-        const scrollTop = window.scrollY; 
-        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
-        const scrollPercentage = (scrollTop / windowHeight) * 100; 
-    
-        const progressBar = document.getElementById('progress-bar');
-        
-        
-        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
-        progressBar.style.width = lastScrollPercentage + '%'; 
-    }
-    window.addEventListener('scroll', updateProgressBar);
-    
-      </script>
-
-   <!-- Navbar -->
-    <nav class="navbar">
-        <img src="images/logo.png" alt="logo">
-        <a class="tab" href="index.html">Home</a>
-        <a class="tab" href="about.html">About</a>
-        <a class="tab" href="resume.html">Build Resume</a>
-        <a class="tab" href="resume_tips.html">Resume Tips</a>
-        <a class="tab" href="signup.html">Sign Up</a>
-        <a class="tab" href="login.html">Login</a>
+    </div>
+
+    <script>
+        let lastScrollPercentage = 0;
+
+        function updateProgressBar() {
+            const scrollTop = window.scrollY;
+            const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
+            const scrollPercentage = (scrollTop / windowHeight) * 100;
+
+            const progressBar = document.getElementById('progress-bar');
+
+
+            lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
+            progressBar.style.width = lastScrollPercentage + '%';
+        }
+        window.addEventListener('scroll', updateProgressBar);
+
+    </script>
+
+    <!-- Navbar -->
+    <header>
+        <!-- <input type="checkbox" name="" id="toggler">
+          <label for="toggler" class="fas fa-bars"></label> -->
+        <a href="#" class="logo">Resum Resume<span>.</span></a>
+
+        <nav class="navbar">
+            <a href="#home">Home</a>
+            <a href="about.html">About</a>
+            <a href="resume.html">Build Resume</a>
+            <!-- <a href="signup.html">Sign Up</a> -->
+            <!-- <a href="login.html">Login</a> -->
+        </nav>
+
+        <div class="auth-and-theme">
+            <!-- Login/Signup dynamically added, adding JS below, you can see -->
+            <div id="auth-links">
+                <a href="signup.html" id="signup-link">Sign Up</a>
+                <a href="login.html" id="login-link">Login</a>
+            </div>
+
+            <!-- Hamburger menu for small screens -->
+            <div class="hamburger">
+                <input type="checkbox" id="menu-toggle" class="menu-toggle">
+                <label for="menu-toggle" class="fas fa-bars menu-icon"></label>
+            </div>
+            <!-- Dark mode toggle, better in last of nav -->
+            <div class="dark-mod">
+                <input type="checkbox" name="" id="toggler" class="dark-mode-toggle">
+                <label for="toggler" class="fas fa-moon theme-mode"></label>
+            </div>
+        </div>
+
+    </header>
+    <nav class="mobile-navbar">
+        <div class="main-links">
+            <a href="#home">Home</a>
+            <a href="about.html">About</a>
+            <a href="resume.html">Build Resume</a>
+        </div>
+        <div class="auth-links">
+            <a href="signup.html">Sign Up</a>
+            <a href="login.html">Login</a>
         </div>
     </nav>
-    <!-- navbar styling -->
-    <style> 
-        .navbar{
-            padding-left: 7rem;
-            padding-right: 7rem;
-        }
-        .tab{
-            color: white;
-            font-size: 2rem;
-        }
-    </style>
+    <script>
+        // Get the menu toggle checkbox and mobile navbar elements
+        const menuToggle = document.getElementById('menu-toggle');
+        const mobileNavbar = document.querySelector('.mobile-navbar');
+
+        // Event listener to show/hide mobile navbar based on checkbox state
+        menuToggle.addEventListener('change', function () {
+            if (this.checked) {
+                mobileNavbar.style.transform = 'translateY(0)'; // Slide down into view
+            } else {
+                mobileNavbar.style.transform = 'translateY(-100%)'; // Slide up out of view
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('toggler').addEventListener('change', function () {
+            // document.body.classList.toggle('dark-mode-toggle', this.checked);
+
+            // Change icon between darl and light
+            const icon = document.querySelector('.theme-mode');
+            if (this.checked) {
+                icon.classList.remove('fa-sun');
+                icon.classList.add('fa-moon');
+            } else {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+            }
+        });
+
+    </script>
 
     <!-- main section  -->
     <div class="panel-1">
         <div class="about">
             <h1>About</h1>
-            <p>LinkedIn Resume Builder simplifies your job search by converting your LinkedIn profile into a professional resume. In just a few clicks, you can generate a polished resume from your profile, saving time and effort. With accurate data and a selection of professional templates, it’s the easiest way to create a standout resume quickly and efficiently.</p>
+            <p>LinkedIn Resume Builder simplifies your job search by converting your LinkedIn profile into a
+                professional resume. In just a few clicks, you can generate a polished resume from your profile, saving
+                time and effort. With accurate data and a selection of professional templates, it’s the easiest way to
+                create a standout resume quickly and efficiently.</p>
         </div>
         <div class="cards">
             <!-- Our Mission Card -->
@@ -448,19 +557,23 @@ <h1>About</h1>
                 <img src="images/Gemini_Generated_Image_fx9dejfx9dejfx9d.jpg" alt="">
                 <h2>Our Mission</h2>
                 <p>
-                    The LinkedIn Resume Builder aims to simplify your job search by transforming your LinkedIn profile into a polished, professional resume. 
-                    We recognize the challenges of job hunting and the importance of having an up-to-date resume. Our mission is to offer a fast, reliable solution 
+                    The LinkedIn Resume Builder aims to simplify your job search by transforming your LinkedIn profile
+                    into a polished, professional resume.
+                    We recognize the challenges of job hunting and the importance of having an up-to-date resume. Our
+                    mission is to offer a fast, reliable solution
                     that saves you time and effort.
                 </p>
             </div>
-        
+
             <!-- How It Works Card -->
             <div class="card">
                 <img src="images/Gemini_Generated_Image_52rg8r52rg8r52rg.jpg" alt="">
                 <h2>How It Works</h2>
                 <p>
-                    Our tool seamlessly integrates with LinkedIn to pull essential details from your profile, such as work experience, education, and skills. 
-                    In just a few clicks, you can convert your profile into a beautifully formatted resume. Here’s how it works:
+                    Our tool seamlessly integrates with LinkedIn to pull essential details from your profile, such as
+                    work experience, education, and skills.
+                    In just a few clicks, you can convert your profile into a beautifully formatted resume. Here’s how
+                    it works:
                 </p>
                 <ul>
                     <li>Enter your LinkedIn profile URL in our resume form.</li>
@@ -468,7 +581,7 @@ <h2>How It Works</h2>
                     <li>Download your resume in PDF format within seconds.</li>
                 </ul>
             </div>
-        
+
             <!-- Why Use LinkedIn Resume Builder Card -->
             <div class="card">
                 <img src="images/Gemini_Generated_Image_ootrdvootrdvootr.jpg" alt="">
@@ -478,13 +591,14 @@ <h2>Why Choose Us?</h2>
                 </p>
                 <ul>
                     <li><strong>Time-saving:</strong> No manual updates or formatting required.</li>
-                    <li><strong>Professional templates:</strong> Choose from a variety of modern and classic designs.</li>
+                    <li><strong>Professional templates:</strong> Choose from a variety of modern and classic designs.
+                    </li>
                     <li><strong>User-friendly:</strong> Generate resumes in just a few clicks.</li>
                     <li><strong>Accurate data:</strong> Information is directly pulled from your LinkedIn profile.</li>
                 </ul>
             </div>
         </div>
-        
+
     </div>
     <!-- <div class="back-button">
         <a href="index.html">Go Back to Home</a>
@@ -493,43 +607,44 @@ <h2>Why Choose Us?</h2>
     <!-- footer section -->
     <footer class="footer">
         <div class="footer-content">
-          <div class="footer-section">
-            <h3>About Us</h3>
-            <ul class="ul">
-              <li><a href="#">Our Story</a></li>
-              <li><a href="#">Team</a></li>
-              <li><a href="#">Careers</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Services</h3>
-            <ul class="ul">
-              <li><a href="#">Resume Builder</a></li>
-              <li><a href="#">CV Templates</a></li>
-              <li><a href="#">Career Advice</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Support</h3>
-            <ul class="ul">
-              <li><a href="#">FAQ</a></li>
-              <li><a href="#">Contact Us</a></li>
-              <li><a href="privacypolicy.html">Privacy Policy</a></li>
-            </ul>
-          </div>
-          <div class="footer-section">
-            <h3>Connect With Us</h3>
-            <div class="social-icons">
-              <a href="#"><i class="fab fa-facebook-f"></i></a>
-              <a href="#"><i class="fab fa-x-twitter"></i></a>
-              <a href="#"><i class="fab fa-linkedin-in"></i></a>
-              <a href="#"><i class="fab fa-instagram"></i></a>
+            <div class="footer-section">
+                <h3>About Us</h3>
+                <ul class="ul">
+                    <li><a href="#">Our Story</a></li>
+                    <li><a href="#">Team</a></li>
+                    <li><a href="#">Careers</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Services</h3>
+                <ul class="ul">
+                    <li><a href="#">Resume Builder</a></li>
+                    <li><a href="#">CV Templates</a></li>
+                    <li><a href="#">Career Advice</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Support</h3>
+                <ul class="ul">
+                    <li><a href="#">FAQ</a></li>
+                    <li><a href="#">Contact Us</a></li>
+                    <li><a href="privacypolicy.html">Privacy Policy</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect With Us</h3>
+                <div class="social-icons">
+                    <a href="#"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#"><i class="fab fa-x-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                </div>
             </div>
-          </div>
         </div>
         <div class="footer-bottom">
-          <p>&copy; 2024 Resume Builder. All rights reserved.</p>
+            <p>&copy; 2024 Resume Builder. All rights reserved.</p>
         </div>
+
       </footer>
       <style>
         .footer-section{
@@ -556,18 +671,19 @@ <h3>Connect With Us</h3>
         const toggler = document.getElementById("toggler");
         const body = document.body;
         const closeBtn = document.querySelector(".close-btn");
-  
+
         closeBtn.addEventListener("click", function () {
-          toggler.checked = false;
-          body.classList.remove("sidebar-active");
+            toggler.checked = false;
+            body.classList.remove("sidebar-active");
         });
         toggler.addEventListener("change", function () {
-          if (toggler.checked) {
-            body.classList.add("sidebar-active");
-          } else {
-            body.classList.remove("sidebar-active");
-          }
+            if (toggler.checked) {
+                body.classList.add("sidebar-active");
+            } else {
+                body.classList.remove("sidebar-active");
+            }
         });
-      </script>
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 347e902..215b4ef 100644
--- a/index.html
+++ b/index.html
@@ -1,965 +1,1044 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LinkedIn Resume Builder - Home</title>
+
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
+  <link rel="icon" href="images/favicon-removebg-preview.png">
+  <link rel="stylesheet" href="style.css">
+  <!-- <label for="dark-mode-toggle">
+    <input type="checkbox" id="dark-mode-toggle" />
+    Toggle Dark Mode
+  </label> -->
+  <style>
+    /* Features Section */
+    .features {
+      padding: 60px 20px;
+      background-color: #f9f9f9;
+    }
+
+    .features h2 {
+      text-align: center;
+      color: #333;
+      margin-bottom: 40px;
+      font-size: 32px;
+    }
+
+    .features-cards {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .features-card {
+      background-color: white;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      width: calc(25% - 30px);
+      text-align: center;
+      transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+      position: relative;
+      z-index: 1;
+    }
+
+    .features-card:hover {
+      transform: translateY(-10px) scale(1.1);
+      box-shadow: 0 4px 8px #0073b1;
+      z-index: 3;
+    }
+
+    .features-card img {
+      width: 60px;
+      height: 60px;
+      margin-bottom: 20px;
+    }
+
+    .features-card h3 {
+      color: #6e65f0;
+      margin: 15px 0;
+      font-size: 22px;
+    }
+
+    .features-card p {
+      color: #52525a;
+      font-size: 16px;
+    }
+
+    /* Testimonials Section */
+    .testimonials {
+      padding: 60px 20px;
+      background-color: #ffffff;
+    }
+
+    .testimonials h2 {
+      text-align: center;
+      color: #333;
+      margin-bottom: 40px;
+      font-size: 32px;
+    }
+
+    .testimonial-cards {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .testimonial-card {
+      background-color: #f9f9f9;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      width: calc(33.33% - 30px);
+      text-align: center;
+    }
+
+    .testimonial-card img {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      margin-bottom: 20px;
+    }
+
+    .testimonial-card h3 {
+      color: #6e65f0;
+      margin: 10px 0;
+      font-size: 20px;
+    }
+
+    .testimonial-card p {
+      color: #52525a;
+      font-size: 16px;
+      font-style: italic;
+    }
+
+    /* Chatbot Styles */
+    .chatbot-container {
+      position: fixed;
+      bottom: 20px;
+      /* Adjust as needed */
+      right: 20px;
+      /* Adjust as needed */
+      z-index: 1000;
+      /* Ensure it appears above other elements */
+    }
+
+    .chatbot-button {
+      background-color: #007bff;
+      /* Change to your preferred color */
+      border: none;
+      border-radius: 50%;
+      padding: 5px;
+      /* Smaller padding */
+      cursor: pointer;
+      position: relative;
+      width: 50px;
+      /* Adjusted size */
+      height: 50px;
+      /* Adjusted size */
+    }
+
+    .chatbot-button img {
+      width: 30px;
+      /* Adjusted image size */
+      height: 30px;
+      /* Adjusted image size */
+    }
+
+    .tooltip-text {
+      display: none;
+      /* Hide by default */
+      position: absolute;
+      bottom: 100%;
+      /* Position above the button */
+      right: 50%;
+      transform: translateX(50%);
+      background-color: #333;
+      /* Background color for tooltip */
+      color: #fff;
+      /* Tooltip text color */
+      padding: 5px;
+      border-radius: 5px;
+      white-space: nowrap;
+      /* Prevent text from wrapping */
+    }
+
+    .chatbot-button:hover .tooltip-text {
+      display: block;
+      /* Show on hover */
+    }
+  </style>
+
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LinkedIn Resume Builder - Home</title>
-    
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    
-    <link rel="icon" href="images/favicon-removebg-preview.png">
-    <link rel="stylesheet" href="style.css">
-    <label for ="dark-mode-toggle">
-        <input type="checkbox" id="dark-mode-toggle" />
-        Toggle Dark Mode
-    </label>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+
+    <link rel="icon" href="images/favicon-removebg-preview.png" />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet" />
+
+    <link rel="stylesheet" href="style.css" />
     <style>
+      /* Features Section */
+      .features {
+        padding: 60px 20px;
+        background-color: #f9f9f9;
+      }
+
+      /* <label for = "dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label>.features-card {
+		
+		.features-card {
+			background-color: white;
+			padding : 30px;
+			border-radius: 8px;
+			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+			width: calc(25% - 30px);
+			text-align: center;
+			transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+			position: relative;
+			z-index: 1;
+		} */
+
+      .features-card:hover {
+        transform: translateY(-10px) scale(1.1);
+        box-shadow: 0 4px 8px #0073b1;
+        z-index: 3;
+      }
+    </style>
+
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>LinkedIn Resume Builder - Home</title>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+
+      <link rel="icon" href="images/favicon-removebg-preview.png" />
+
+      <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet" />
+
+      <link rel="stylesheet" href="style.css" />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+      <style>
+        .footer .social-icons {
+          display: flex;
+          justify-content: flex-start;
+          /* Center the icons horizontally */
+          gap: 15px;
+          /* Space between icons */
+          padding: 20px 0;
+          /* Padding around the icons */
+          position: relative;
+          bottom: 20px;
+        }
+
+        .footer .social-icons a {
+          color: #fff;
+          /* White color for icons */
+          font-size: 24px;
+          /* Size of the icons */
+          text-decoration: none;
+          /* Remove underline */
+          transition: transform 0.3s, color 0.3s;
+          /* Smooth transition for hover effects */
+        }
+
+        .footer .social-icons a:hover {
+          transform: scale(1.2);
+          /* Slightly enlarge the icon on hover */
+          color: #ffffff;
+          /* Change icon color on hover */
+        }
+
+        .footer-bottom {
+          background-color: var(--deep-teal);
+          /* Dark background color */
+          padding: 15px 0;
+          /* Padding on top and bottom */
+          text-align: center;
+          /* Center the text */
+          color: #ffffff;
+          /* White text color */
+          font-size: 14px;
+          /* Font size */
+          border-top: 1px solid #333;
+          /* Light border on top */
+        }
+
+        .footer-bottom p {
+          margin: 0;
+          /* Remove default margin */
+          font-family: 'Arial', sans-serif;
+          /* Font family */
+        }
+
         /* Features Section */
         .features {
-            padding: 60px 20px;
-            background-color: #f9f9f9;
+          padding: 60px 20px;
+          background-color: #f9f9f9;
         }
 
+        /* <label for = "dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label>.features-card {
+
+		/* <label for ="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label> */
+
+        .features-card {
+          background-color: white;
+          padding: 30px;
+          border-radius: 8px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          width: calc(25% - 30px);
+          text-align: center;
+          transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+          position: relative;
+          z-index: 1;
+        }
+
+        */ .features-card:hover {
+          transform: translateY(-10px) scale(1.1);
+          box-shadow: 0 4px 8px #0073b1;
+          z-index: 3;
+        }
+
+
         .features h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
+          text-align: center;
+          color: #333;
+          /* Consider changing this for better contrast */
+          margin-bottom: 40px;
+          font-size: 32px;
         }
 
         .features-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: 30px;
+          max-width: 1200px;
+          margin: 0 auto;
         }
 
         .features-card {
-            background-color: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(25% - 30px);
-            text-align: center;
-            transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-            position: relative;
-            z-index: 1;
+          background-color: #fff;
+          /* You might want to change this to a softer off-white */
+
+          border-radius: 18px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          width: calc(25% - 30px);
+          text-align: center;
+
+          transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+          position: relative;
+          z-index: 1;
         }
 
         .features-card:hover {
-            transform: translateY(-10px) scale(1.1);
-            box-shadow: 0 4px 8px #0073b1; 
-            z-index: 3;
+          transform: translateY(-10px) scale(1.1);
+          box-shadow: 0 4px 8px #0073b1;
+          /* Consider adjusting this to match the modern minimalist theme */
+          z-index: 3;
         }
 
         .features-card img {
-            width: 60px;
-            height: 60px;
-            margin-bottom: 20px;
+          width: 100%;
+          /* Set the width for the icon images */
+          height: 185px;
+          /* Set the height for the icon images */
+          /* margin-bottom: 20px; */
+          border-radius: 10px 10px 0 0;
+          /* Rounded corners for the images */
+          transition: transform 0.3s ease;
+        }
+
+        .features-card:hover {
+          transform: translateY(-5px);
+          /* Slight lift effect on hover */
         }
 
         .features-card h3 {
-            color: #6e65f0;
-            margin: 15px 0;
-            font-size: 22px;
+          color: var(--deep-teal);
+          /* Use the deep teal color for headings */
+          margin: 15px 0;
+          font-size: 22px;
         }
 
         .features-card p {
-            color: #52525a;
-            font-size: 16px;
+          color: var(--dark-slate);
+          /* Use dark slate for paragraph text */
+          font-size: 16px;
         }
 
         /* Testimonials Section */
         .testimonials {
-            padding: 60px 20px;
-            background-color: #ffffff;
+          padding: 60px 20px;
+          background-color: var(--off-white);
+          /* Use the off-white background color */
         }
 
         .testimonials h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
+          text-align: center;
+          color: var(--dark-slate);
+          /* Use dark slate for heading text */
+          margin-bottom: 40px;
+          font-size: 32px;
         }
 
+
         .testimonial-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: 30px;
+          max-width: 1200px;
+          margin: 0 auto;
         }
 
+
+        .features-card h3 {
+          color: #aca7eb;
+          margin: 15px 0;
+          font-size: 22px;
+        }
+
+
+
         .testimonial-card {
-            background-color: #f9f9f9;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(33.33% - 30px);
-            text-align: center;
+          background-color: var(--off-white);
+          /* Use off-white for testimonial cards */
+          padding: 30px;
+          border-radius: 8px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          width: calc(33.33% - 30px);
+          text-align: center;
         }
 
+        .features-card p {
+          color: #666;
+          font-size: 16px;
+        }
+
+
         .testimonial-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin-bottom: 20px;
+          width: 80px;
+          /* Profile image width */
+          height: 80px;
+          /* Profile image height */
+          border-radius: 50%;
+          /* Circular shape for profile images */
+          margin-bottom: 20px;
         }
 
         .testimonial-card h3 {
-            color:  #6e65f0;
-            margin: 10px 0;
-            font-size: 20px;
+          color: var(--deep-teal);
+          /* Use deep teal for testimonial headings */
+          margin: 10px 0;
+          font-size: 20px;
         }
 
         .testimonial-card p {
-            color: #52525a;
-            font-size: 16px;
-            font-style: italic;
+          color: var(--dark-slate);
+          /* Use dark slate for testimonial text */
+          font-size: 16px;
+          font-style: italic;
+          /* Italic style for testimonial text */
         }
 
-        /* Chatbot Styles */
-        .chatbot-container {
-            position: fixed;
-            bottom: 20px; /* Adjust as needed */
-            right: 20px; /* Adjust as needed */
-            z-index: 1000; /* Ensure it appears above other elements */
+        /* Footer Styles */
+        .footer {
+          background-color: var(--deep-teal);
+          /* Use deep teal for footer background */
+          color: #ffffff;
+          /* White text for footer */
+          padding: 40px 0;
+          padding-bottom: 0;
         }
 
-        .chatbot-button {
-            background-color: #007bff; /* Change to your preferred color */
-            border: none;
-            border-radius: 50%;
-            padding: 5px; /* Smaller padding */
-            cursor: pointer;
-            position: relative;
-            width: 50px; /* Adjusted size */
-            height: 50px; /* Adjusted size */
+        .footer-content {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          max-width: 1200px;
+          /* Max width for footer content */
+          margin: 0 auto;
+          /* Center footer content */
+          padding: 0 20px;
         }
 
-        .chatbot-button img {
-            width: 30px; /* Adjusted image size */
-            height: 30px; /* Adjusted image size */
+        .footer-section {
+          flex: 1;
+          /* Flexible sections in footer */
+          margin-bottom: 20px;
+          /* Space between footer sections */
+          min-width: 200px;
+          /* Minimum width for each section */
         }
 
-        .tooltip-text {
-            display: none; /* Hide by default */
-            position: absolute;
-            bottom: 100%; /* Position above the button */
-            right: 50%;
-            transform: translateX(50%);
-            background-color: #333; /* Background color for tooltip */
-            color: #fff; /* Tooltip text color */
-            padding: 5px;
-            border-radius: 5px;
-            white-space: nowrap; /* Prevent text from wrapping */
-        }
 
-        .chatbot-button:hover .tooltip-text {
-            display: block; /* Show on hover */
+        .text {
+          padding-right: 20px;
+          /* Right padding for text sections */
+          max-width: 50%;
+          /* Maximum width for text sections */
         }
-    </style>
-
-
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>LinkedIn Resume Builder - Home</title>
-	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-
-	<link rel="icon" href="images/favicon-removebg-preview.png" />
-
-	<link
-		href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-		rel="stylesheet" />
-
-	<link rel="stylesheet" href="style.css" />
-	<style>
-		/* Features Section */
-		.features {
-			padding: 60px 20px;
-			background-color: #f9f9f9;
-		}
-
-		/* <label for = "dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label>.features-card {
-		
-		.features-card {
-			background-color: white;
-			padding : 30px;
-			border-radius: 8px;
-			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-			width: calc(25% - 30px);
-			text-align: center;
-			transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-			position: relative;
-			z-index: 1;
-		} */
-
-		.features-card:hover {
-			transform: translateY(-10px) scale(1.1);
-			box-shadow: 0 4px 8px #0073b1;
-			z-index: 3;
-		}
-    </style>
-
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>LinkedIn Resume Builder - Home</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-    />
-
-    <link rel="icon" href="images/favicon-removebg-preview.png" />
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <style>
-
-
-.footer .social-icons {
-    display: flex;
-    justify-content: flex-start; /* Center the icons horizontally */
-    gap: 15px; /* Space between icons */
-    padding: 20px 0; /* Padding around the icons */
-    position: relative;
-    bottom: 20px;
-}
-
-.footer .social-icons a {
-    color: #fff; /* White color for icons */
-    font-size: 24px; /* Size of the icons */
-    text-decoration: none; /* Remove underline */
-    transition: transform 0.3s, color 0.3s; /* Smooth transition for hover effects */
-}
-
-.footer .social-icons a:hover {
-    transform: scale(1.2); /* Slightly enlarge the icon on hover */
-    color: #ffffff; /* Change icon color on hover */
-}
-
-.footer-bottom {
-    background-color: var(--deep-teal); /* Dark background color */
-    padding: 15px 0; /* Padding on top and bottom */
-    text-align: center; /* Center the text */
-    color: #ffffff; /* White text color */
-    font-size: 14px; /* Font size */
-    border-top: 1px solid #333; /* Light border on top */
-}
-
-.footer-bottom p {
-    margin: 0; /* Remove default margin */
-    font-family: 'Arial', sans-serif; /* Font family */
-}
-      /* Features Section */
-      .features {
-        padding: 60px 20px;
-        background-color: #f9f9f9;
-      }
-
-      /* <label for = "dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label>.features-card {
-
-		/* <label for ="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;"><label for="dark-mode-toggle"><input type="checkbox" id="dark-mode-toggle" />Toggle Dark Mode </label></label> */
-
-      .features-card {
-        background-color: white;
-        padding: 30px;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        width: calc(25% - 30px);
-        text-align: center;
-        transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-        position: relative;
-        z-index: 1;
-      }
-      */ .features-card:hover {
-        transform: translateY(-10px) scale(1.1);
-        box-shadow: 0 4px 8px #0073b1;
-        z-index: 3;
-      }
-
-
-		.features h2 {
-			text-align: center;
-			color: #333;
-			/* Consider changing this for better contrast */
-			margin-bottom: 40px;
-			font-size: 32px;
-		}
-
-		.features-cards {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-			gap: 30px;
-			max-width: 1200px;
-			margin: 0 auto;
-		}
-
-		.features-card {
-			background-color: #fff;
-			/* You might want to change this to a softer off-white */
-			
-			border-radius: 18px;
-			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-			width: calc(25% - 30px);
-			text-align: center;
-
-			transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-			position: relative;
-			z-index: 1;
-		}
-
-		.features-card:hover {
-			transform: translateY(-10px) scale(1.1);
-			box-shadow: 0 4px 8px #0073b1;
-			/* Consider adjusting this to match the modern minimalist theme */
-			z-index: 3;
-		}
-
-		.features-card img {
-			width: 100%;
-			/* Set the width for the icon images */
-			height: 185px;
-			/* Set the height for the icon images */
-			/* margin-bottom: 20px; */
-			border-radius: 10px 10px 0 0;
-			/* Rounded corners for the images */
-			transition: transform 0.3s ease;
-		}
-
-		.features-card:hover {
-			transform: translateY(-5px);
-			/* Slight lift effect on hover */
-		}
-
-		.features-card h3 {
-			color: var(--deep-teal);
-			/* Use the deep teal color for headings */
-			margin: 15px 0;
-			font-size: 22px;
-		}
-
-		.features-card p {
-			color: var(--dark-slate);
-			/* Use dark slate for paragraph text */
-			font-size: 16px;
-		}
-
-		/* Testimonials Section */
-		.testimonials {
-			padding: 60px 20px;
-			background-color: var(--off-white);
-			/* Use the off-white background color */
-		}
-
-		.testimonials h2 {
-			text-align: center;
-			color: var(--dark-slate);
-			/* Use dark slate for heading text */
-			margin-bottom: 40px;
-			font-size: 32px;
-		}
-
-
-		.testimonial-cards {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-			gap: 30px;
-			max-width: 1200px;
-			margin: 0 auto;
-		}
 
+        .testimonial-card h3 {
+          color: #aca7eb;
+          margin: 10px 0;
+          font-size: 20px;
+        }
 
-		.features-card h3 {
-			color: #aca7eb;
-			margin: 15px 0;
-			font-size: 22px;
-		}
 
 
+        .image {
+          max-width: 50%;
+          /* Maximum width for image sections */
+        }
 
-		.testimonial-card {
-			background-color: var(--off-white);
-			/* Use off-white for testimonial cards */
-			padding: 30px;
-			border-radius: 8px;
-			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-			width: calc(33.33% - 30px);
-			text-align: center;
-		}
-
-		.features-card p {
-			color: #666;
-			font-size: 16px;
-		}
-
-
-		.testimonial-card img {
-			width: 80px;
-			/* Profile image width */
-			height: 80px;
-			/* Profile image height */
-			border-radius: 50%;
-			/* Circular shape for profile images */
-			margin-bottom: 20px;
-		}
-
-		.testimonial-card h3 {
-			color: var(--deep-teal);
-			/* Use deep teal for testimonial headings */
-			margin: 10px 0;
-			font-size: 20px;
-		}
-
-		.testimonial-card p {
-			color: var(--dark-slate);
-			/* Use dark slate for testimonial text */
-			font-size: 16px;
-			font-style: italic;
-			/* Italic style for testimonial text */
-		}
-
-		/* Footer Styles */
-		.footer {
-			background-color: var(--deep-teal);
-			/* Use deep teal for footer background */
-			color: #ffffff;
-			/* White text for footer */
-			padding: 40px 0;
-			padding-bottom:0;
-		}
-
-		.footer-content {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			max-width: 1200px;
-			/* Max width for footer content */
-			margin: 0 auto;
-			/* Center footer content */
-			padding: 0 20px;
-		}
-
-		.footer-section {
-			flex: 1;
-			/* Flexible sections in footer */
-			margin-bottom: 20px;
-			/* Space between footer sections */
-			min-width: 200px;
-			/* Minimum width for each section */
-		}
-
-
-		.text {
-			padding-right: 20px;
-			/* Right padding for text sections */
-			max-width: 50%;
-			/* Maximum width for text sections */
-		}
-
-		.testimonial-card h3 {
-			color: #aca7eb;
-			margin: 10px 0;
-			font-size: 20px;
-		}
-
-
-
-		.image {
-			max-width: 50%;
-			/* Maximum width for image sections */
-		}
-
-		.testimonial-card p {
-			color: #666;
-			font-size: 16px;
-			font-style: italic;
-		}
-
-
-
-		.image img {
-			width: 100%;
-			/* Full width for images */
-			height: auto;
-			/* Maintain aspect ratio */
-			border-radius: 5px;
-			/* Rounded corners for images */
-		}
-
-		.footer-section h3 {
-			font-size: 18px;
-			/* Font size for section headings */
-			font-weight: 700;
-			/* Bold weight for section headings */
-			margin-bottom: 15px;
-			/* Space below section headings */
-			color: #ffffff;
-			/* White color for headings */
-		}
-
-		.footer-section ul {
-			list-style-type: none;
-			/* No bullet points for list */
-			padding: 0;
-			/* No padding for list */
-		}
-
-		.footer-section ul li {
-			margin-bottom: 8px;
-			/* Space between list items */
-		}
-
-		.footer-section ul li a {
-			color: #e0e0e0;
-      font-size: 16px;
-			/* Light grey for links */
-			text-decoration: none;
-			/* No underline for links */
-			transition: color 0.3s ease;
-			/* Smooth transition for color change */
-		}
-
-		.footer-section ul li a:hover {
-			color: #ffffff;
-			/* White color on hover */
-			text-decoration: underline;
-			/* Underline on hover */
-		}
-
-      .features h2 {
-        text-align: center;
-        color: #333;
-        /* Consider changing this for better contrast */
-        margin-bottom: 40px;
-        font-size: 32px;
-      }
+        .testimonial-card p {
+          color: #666;
+          font-size: 16px;
+          font-style: italic;
+        }
 
-      .features-cards {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 30px;
-        max-width: 1200px;
-        margin: 0 auto;
-      }
 
-      .features-card {
-        background-color: #fff;
-        /* You might want to change this to a softer off-white */
 
-        border-radius: 18px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        width: calc(25% - 30px);
-        text-align: center;
+        .image img {
+          width: 100%;
+          /* Full width for images */
+          height: auto;
+          /* Maintain aspect ratio */
+          border-radius: 5px;
+          /* Rounded corners for images */
+        }
 
-        transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-        position: relative;
-        z-index: 1;
-      }
+        .footer-section h3 {
+          font-size: 18px;
+          /* Font size for section headings */
+          font-weight: 700;
+          /* Bold weight for section headings */
+          margin-bottom: 15px;
+          /* Space below section headings */
+          color: #ffffff;
+          /* White color for headings */
+        }
 
-      .features-card:hover {
-        transform: translateY(-10px) scale(1.1);
-        box-shadow: 0 4px 8px #0073b1;
-        /* Consider adjusting this to match the modern minimalist theme */
-        z-index: 3;
-      }
+        .footer-section ul {
+          list-style-type: none;
+          /* No bullet points for list */
+          padding: 0;
+          /* No padding for list */
+        }
 
-      .features-card img {
-        width: 100%;
-        /* Set the width for the icon images */
-        height: 185px;
-        /* Set the height for the icon images */
-        /* margin-bottom: 20px; */
-        border-radius: 10px 10px 0 0;
-        /* Rounded corners for the images */
-        transition: transform 0.3s ease;
-      }
+        .footer-section ul li {
+          margin-bottom: 8px;
+          /* Space between list items */
+        }
 
-      .features-card:hover {
-        transform: translateY(-5px);
-        /* Slight lift effect on hover */
-      }
+        .footer-section ul li a {
+          color: #e0e0e0;
+          font-size: 16px;
+          /* Light grey for links */
+          text-decoration: none;
+          /* No underline for links */
+          transition: color 0.3s ease;
+          /* Smooth transition for color change */
+        }
 
-      .features-card h3 {
-        color: var(--deep-teal);
-        /* Use the deep teal color for headings */
-        margin: 15px 0;
-        font-size: 22px;
-      }
+        .footer-section ul li a:hover {
+          color: #ffffff;
+          /* White color on hover */
+          text-decoration: underline;
+          /* Underline on hover */
+        }
 
-      .features-card p {
-        color: var(--dark-slate);
-        /* Use dark slate for paragraph text */
-        font-size: 16px;
-      }
+        .features h2 {
+          text-align: center;
+          color: #333;
+          /* Consider changing this for better contrast */
+          margin-bottom: 40px;
+          font-size: 32px;
+        }
 
-      /* Testimonials Section */
-      .testimonials {
-        padding: 60px 20px;
-        background-color: var(--off-white);
-        /* Use the off-white background color */
-      }
+        .features-cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: 30px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
 
-      .testimonials h2 {
-        text-align: center;
-        color: var(--dark-slate);
-        /* Use dark slate for heading text */
-        margin-bottom: 40px;
-        font-size: 32px;
-      }
+        .features-card {
+          background-color: #fff;
+          /* You might want to change this to a softer off-white */
 
-      .testimonial-cards {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 30px;
-        max-width: 1200px;
-        margin: 0 auto;
-      }
+          border-radius: 18px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          width: calc(25% - 30px);
+          text-align: center;
 
-      .features-card h3 {
-        color: #aca7eb;
-        margin: 15px 0;
-        font-size: 22px;
-      }
+          transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+          position: relative;
+          z-index: 1;
+        }
 
-      .testimonial-card {
-        background-color: var(--off-white);
-        /* Use off-white for testimonial cards */
-        padding: 30px;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        width: calc(33.33% - 30px);
-        text-align: center;
-      }
+        .features-card:hover {
+          transform: translateY(-10px) scale(1.1);
+          box-shadow: 0 4px 8px #0073b1;
+          /* Consider adjusting this to match the modern minimalist theme */
+          z-index: 3;
+        }
 
-      .features-card p {
-        color: #666;
-        font-size: 16px;
-      }
+        .features-card img {
+          width: 100%;
+          /* Set the width for the icon images */
+          height: 185px;
+          /* Set the height for the icon images */
+          /* margin-bottom: 20px; */
+          border-radius: 10px 10px 0 0;
+          /* Rounded corners for the images */
+          transition: transform 0.3s ease;
+        }
 
-      .testimonial-card img {
-        width: 80px;
-        /* Profile image width */
-        height: 80px;
-        /* Profile image height */
-        border-radius: 50%;
-        /* Circular shape for profile images */
-        margin-bottom: 20px;
-      }
+        .features-card:hover {
+          transform: translateY(-5px);
+          /* Slight lift effect on hover */
+        }
 
-      .testimonial-card h3 {
-        color: var(--deep-teal);
-        /* Use deep teal for testimonial headings */
-        margin: 10px 0;
-        font-size: 20px;
-      }
+        .features-card h3 {
+          color: var(--deep-teal);
+          /* Use the deep teal color for headings */
+          margin: 15px 0;
+          font-size: 22px;
+        }
 
-      .testimonial-card p {
-        color: var(--dark-slate);
-        /* Use dark slate for testimonial text */
-        font-size: 16px;
-        font-style: italic;
-        /* Italic style for testimonial text */
-      }
+        .features-card p {
+          color: var(--dark-slate);
+          /* Use dark slate for paragraph text */
+          font-size: 16px;
+        }
 
-      /* Responsive Styles */
-      @media (max-width: 768px) {
-        .navbar {
-          flex-direction: column;
-          /* Stack navbar items vertically */
-          align-items: flex-start;
-          /* Align items to the start */
+        /* Testimonials Section */
+        .testimonials {
+          padding: 60px 20px;
+          background-color: var(--off-white);
+          /* Use the off-white background color */
         }
 
-        .navbar ul {
-          flex-direction: column;
-          /* Stack navbar links vertically */
-          gap: 10px;
-          /* Space between navbar links */
-          margin-top: 10px;
-          /* Space above navbar links */
+        .testimonials h2 {
+          text-align: center;
+          color: var(--dark-slate);
+          /* Use dark slate for heading text */
+          margin-bottom: 40px;
+          font-size: 32px;
         }
 
-        .hero-content {
-          flex-direction: column;
-          /* Stack hero content vertically */
+        .testimonial-cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: 30px;
+          max-width: 1200px;
+          margin: 0 auto;
         }
 
-        .hero-text {
-          padding-right: 0;
-          /* Remove right padding for hero text */
-          margin-bottom: 30px;
-          /* Space below hero text */
+        .features-card h3 {
+          color: #aca7eb;
+          margin: 15px 0;
+          font-size: 22px;
         }
 
-        .features-card,
         .testimonial-card {
-          width: 100%;
-          /* Full width for cards on small screens */
+          background-color: var(--off-white);
+          /* Use off-white for testimonial cards */
+          padding: 30px;
+          border-radius: 8px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          width: calc(33.33% - 30px);
+          text-align: center;
         }
-      }
 
-      /* testimonial section */
-      .testimonials {
-        text-align: center;
-        /* Center the text for better presentation */
-        margin-top: 50px;
-        /* Add some top margin */
-      }
+        .features-card p {
+          color: #666;
+          font-size: 16px;
+        }
 
-      .testimonials h2 {
-        color: #333;
-        /* Initial text color */
-        font-size: 3rem;
-        /* Increase font size for visibility */
-        position: relative;
-        /* Required for the pseudo-element */
-        display: inline-block;
-        /* Make the element fit the content */
-        padding: 10px;
-        /* Add some padding for aesthetics */
-        transition: color 0.4s ease, transform 0.4s ease;
-        /* Smooth transition */
-        margin: 0;
-        /* Remove default margin */
-        background: linear-gradient(90deg, #ff6f61, #de8c3e);
-        /* Gradient background */
-
-        background-clip: text; /* Standard property */
-        -webkit-background-clip: text; /* Clip background to text */ /* For Safari and older versions of Chrome */
-
-        -webkit-text-fill-color: transparent;
-        /* Fill color to transparent for effect */
-      }
+        .testimonial-card img {
+          width: 80px;
+          /* Profile image width */
+          height: 80px;
+          /* Profile image height */
+          border-radius: 50%;
+          /* Circular shape for profile images */
+          margin-bottom: 20px;
+        }
 
-      .testimonials h2::before {
-        content: "";
-        /* Create a pseudo-element */
-        position: absolute;
-        /* Position it absolutely */
-        left: 0;
-        right: 0;
-        bottom: 10%;
-        /* Position it just below the text */
-        height: 5px;
-        /* Set height for the underline */
-        background-color: #ff6f61;
-        /* Initial color of the underline */
-        transform: scaleX(0);
-        /* Start with no width */
-        transition: transform 0.4s ease, background-color 0.4s ease;
-        /* Smooth transition for the underline */
-      }
+        .testimonial-card h3 {
+          color: var(--deep-teal);
+          /* Use deep teal for testimonial headings */
+          margin: 10px 0;
+          font-size: 20px;
+        }
 
-      .testimonials h2:hover {
-        color: #ff6f61;
-        /* Change text color on hover */
-        transform: translateY(-10px) rotate(1deg);
-        /* Move the text up and slightly rotate */
-      }
+        .testimonial-card p {
+          color: var(--dark-slate);
+          /* Use dark slate for testimonial text */
+          font-size: 16px;
+          font-style: italic;
+          /* Italic style for testimonial text */
+        }
 
-      .testimonials h2:hover::before {
-        transform: scaleX(1);
-        /* Scale the underline to full width */
-        background-color: #de8c3e;
-        /* Change underline color on hover */
-      }
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+          .navbar {
+            flex-direction: column;
+            /* Stack navbar items vertically */
+            align-items: flex-start;
+            /* Align items to the start */
+          }
+
+          .navbar ul {
+            flex-direction: column;
+            /* Stack navbar links vertically */
+            gap: 10px;
+            /* Space between navbar links */
+            margin-top: 10px;
+            /* Space above navbar links */
+          }
+
+          .hero-content {
+            flex-direction: column;
+            /* Stack hero content vertically */
+          }
+
+          .hero-text {
+            padding-right: 0;
+            /* Remove right padding for hero text */
+            margin-bottom: 30px;
+            /* Space below hero text */
+          }
+
+          .features-card,
+          .testimonial-card {
+            width: 100%;
+            /* Full width for cards on small screens */
+          }
+        }
 
-      .testimonials h2:hover {
-        box-shadow: 0 10px 30px rgba(255, 111, 97, 0.6);
-        /* Add a shadow effect on hover */
-      }
+        /* testimonial section */
+        .testimonials {
+          text-align: center;
+          /* Center the text for better presentation */
+          margin-top: 50px;
+          /* Add some top margin */
+        }
 
-      /* Responsive Styles */
-      @media (max-width: 768px) {
-        .navbar {
-          flex-direction: column;
-          align-items: flex-start;
+        .testimonials h2 {
+          color: #333;
+          /* Initial text color */
+          font-size: 3rem;
+          /* Increase font size for visibility */
+          position: relative;
+          /* Required for the pseudo-element */
+          display: inline-block;
+          /* Make the element fit the content */
+          padding: 10px;
+          /* Add some padding for aesthetics */
+          transition: color 0.4s ease, transform 0.4s ease;
+          /* Smooth transition */
+          margin: 0;
+          /* Remove default margin */
+          background: linear-gradient(90deg, #ff6f61, #de8c3e);
+          /* Gradient background */
+
+          background-clip: text;
+          /* Standard property */
+          -webkit-background-clip: text;
+          /* Clip background to text */
+          /* For Safari and older versions of Chrome */
+
+          -webkit-text-fill-color: transparent;
+          /* Fill color to transparent for effect */
         }
 
-        .navbar ul {
-          flex-direction: column;
-          gap: 10px;
-          margin-top: 10px;
+        .testimonials h2::before {
+          content: "";
+          /* Create a pseudo-element */
+          position: absolute;
+          /* Position it absolutely */
+          left: 0;
+          right: 0;
+          bottom: 10%;
+          /* Position it just below the text */
+          height: 5px;
+          /* Set height for the underline */
+          background-color: #ff6f61;
+          /* Initial color of the underline */
+          transform: scaleX(0);
+          /* Start with no width */
+          transition: transform 0.4s ease, background-color 0.4s ease;
+          /* Smooth transition for the underline */
         }
 
-        .hero-content {
-          flex-direction: column;
+        .testimonials h2:hover {
+          color: #ff6f61;
+          /* Change text color on hover */
+          transform: translateY(-10px) rotate(1deg);
+          /* Move the text up and slightly rotate */
         }
 
-        .hero-text {
-          padding-right: 0;
-          margin-bottom: 30px;
+        .testimonials h2:hover::before {
+          transform: scaleX(1);
+          /* Scale the underline to full width */
+          background-color: #de8c3e;
+          /* Change underline color on hover */
         }
 
-        .features-card,
-        .testimonial-card {
-          width: 100%;
+        .testimonials h2:hover {
+          box-shadow: 0 10px 30px rgba(255, 111, 97, 0.6);
+          /* Add a shadow effect on hover */
         }
-      }
 
-      /* Scroll to Top Button */
-      .scroll-to-top {
-        position: fixed;
-        bottom: 30px;
-        right: 30px;
-        background-color: #0073b1;
-        color: white;
-        border: none;
-        border-radius: 50%;
-        width: 50px;
-        height: 50px;
-        display: none;
-        /* Hidden by default */
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-        transition: background-color 0.3s, transform 0.3s;
-      }
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+          .navbar {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+
+          .navbar ul {
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 10px;
+          }
+
+          .hero-content {
+            flex-direction: column;
+          }
+
+          .hero-text {
+            padding-right: 0;
+            margin-bottom: 30px;
+          }
+
+          .features-card,
+          .testimonial-card {
+            width: 100%;
+          }
+        }
 
-      .scroll-to-top:hover {
-        background-color: #005580;
-        transform: scale(1.1);
-      }
+        /* Scroll to Top Button */
+        .scroll-to-top {
+          position: fixed;
+          bottom: 30px;
+          right: 30px;
+          background-color: #0073b1;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          width: 50px;
+          height: 50px;
+          display: none;
+          /* Hidden by default */
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+          transition: background-color 0.3s, transform 0.3s;
+        }
 
-      .scroll-to-top i {
-        font-size: 20px;
-      }
+        .scroll-to-top:hover {
+          background-color: #005580;
+          transform: scale(1.1);
+        }
 
+        .scroll-to-top i {
+          font-size: 20px;
+        }
 
 
-      #progress-container {
-            width: 100%;
-            height: 5px;
-            background-color: white;
-            border-radius: 5px;
-            overflow: hidden; 
-            position: fixed;
-            top: 0;
-            left: 0; 
-            z-index: 9999; 
+
+        #progress-container {
+          width: 100%;
+          height: 5px;
+          background-color: white;
+          border-radius: 5px;
+          overflow: hidden;
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: 9999;
         }
 
         #progress-bar {
-            height: 100%;
-            background-color: #3f10ea;
+          height: 100%;
+          background-color: #3f10ea;
         }
-      
-    </style>
-  </head>
+      </style>
+    </head>
 
-<body>
+  <body>
     <!-- header section starts -->
     <header>
-        <input type="checkbox" name="" id="toggler">
-        <label for="toggler" class="fas fa-bars"></label>
-        <a href="#" class="logo">Resum Resume<span>.</span></a>
-                 
-        <nav class="navbar">
-            <a href="#home">Home</a>
-            <a href="about.html">About</a>
-            <a href="resume.html">Build Resume</a>
-            <a href="signup.html">Sign Up</a>
-            <a href="login.html">Login</a>
-        </nav>
-    
-        <div class="icons">
-            <a href="about.html" class="fas fa-info-circle"></a>
-            <a href="#" class="fas fa-envelope"></a>
-            <a href="login.html" id="loginIcon" class="fas fa-user"></a>
+      <!-- <input type="checkbox" name="" id="toggler">
+        <label for="toggler" class="fas fa-bars"></label> -->
+      <a href="#" class="logo">Resum Resume<span>.</span></a>
+
+      <nav class="navbar">
+        <a href="#home">Home</a>
+        <a href="about.html">About</a>
+        <a href="resume.html">Build Resume</a>
+        <!-- <a href="signup.html">Sign Up</a> -->
+        <!-- <a href="login.html">Login</a> -->
+      </nav>
+
+      <div class="auth-and-theme">
+        <!-- Login/Signup dynamically added, adding JS below, you can see -->
+        <div id="auth-links">
+          <a href="signup.html" id="signup-link">Sign Up</a>
+          <a href="login.html" id="login-link">Login</a>
         </div>
-    </header> 
+
+        <!-- Hamburger menu for small screens -->
+        <div class="hamburger">
+          <input type="checkbox" id="menu-toggle" class="menu-toggle">
+          <label for="menu-toggle" class="fas fa-bars menu-icon"></label>
+        </div>
+        <!-- Dark mode toggle, better in last of nav -->
+        <div class="dark-mod">
+          <input type="checkbox" name="" id="toggler" class="dark-mode-toggle">
+          <label for="toggler" class="fas fa-moon theme-mode"></label>
+        </div>
+      </div>
+
+    </header>
+    <nav class="mobile-navbar">
+      <div class="main-links">
+        <a href="#home">Home</a>
+        <a href="about.html">About</a>
+        <a href="resume.html">Build Resume</a>
+      </div>
+      <div class="auth-links">
+        <a href="signup.html">Sign Up</a>
+        <a href="login.html">Login</a>
+      </div>
+    </nav>
+    <script>
+      // Get the menu toggle checkbox and mobile navbar elements
+      const menuToggle = document.getElementById('menu-toggle');
+      const mobileNavbar = document.querySelector('.mobile-navbar');
+
+      // Event listener to show/hide mobile navbar based on checkbox state
+      menuToggle.addEventListener('change', function () {
+        if (this.checked) {
+          mobileNavbar.style.transform = 'translateY(0)'; // Slide down into view
+        } else {
+          mobileNavbar.style.transform = 'translateY(-100%)'; // Slide up out of view
+        }
+      });
+    </script>
+    <script>
+      document.getElementById('toggler').addEventListener('change', function () {
+        // document.body.classList.toggle('dark-mode-toggle', this.checked);
+
+        // Change icon between darl and light
+        const icon = document.querySelector('.theme-mode');
+        if (this.checked) {
+          icon.classList.remove('fa-sun');
+          icon.classList.add('fa-moon');
+        } else {
+          icon.classList.remove('fa-moon');
+          icon.classList.add('fa-sun');
+        }
+      });
+
+    </script>
     <!-- header section ends -->
-    
+
     <!-- home section starts -->
     <section class="home" id="Home">
-        <div class="content">
-            <h3>Build Your Resume in Seconds from LinkedIn</h3>
-            <p>Easily generate a professional resume using your LinkedIn profile. Select a template, enter your LinkedIn URL,
-                and get a downloadable resume in a few clicks. Save time and create a resume that stands out.</p>
-            <a href="signup.html" class="btn">Get Started</a>
-        </div>
+      <div class="content">
+        <h3>Build Your Resume in Seconds from LinkedIn</h3>
+        <p>Easily generate a professional resume using your LinkedIn profile. Select a template, enter your LinkedIn
+          URL,
+          and get a downloadable resume in a few clicks. Save time and create a resume that stands out.</p>
+        <a href="signup.html" class="btn">Get Started</a>
+      </div>
     </section>
     <!-- home section ends-->
     <!-- Features Section -->
     <section class="features">
-        <h2>Our Features</h2>
-        <div class="features-cards">
-            <div class="features-card">
-                <img src="assets/joao-ferrao-4YzrcDNcRVg-unsplash.jpg" alt="Easy to Use">
-                <h3>Easy to Use</h3>
-                <p>Create a professional resume effortlessly with our user-friendly interface.</p>
-            </div>
-            <div class="features-card">
-                <img src="assets/instant resume.jpg" alt="Instant Resume">
-                <h3>Instant Resume</h3>
-                <p>Generate a polished resume in seconds using your LinkedIn profile data.</p>
-            </div>
-            <div class="features-card">
-                <img src="assets/securedata.jpg" alt="Secure Data">
-                <h3>Secure Data</h3>
-                <p>Your personal information is safe with our secure and encrypted platform.</p>
-            </div>
-            <div class="features-card">
-                <img src="assets/support.jpg" alt="24/7 Support">
-                <h3>24/7 Support</h3>
-                <p>Our dedicated support team is available round the clock to assist you.</p>
-            </div>
+      <h2>Our Features</h2>
+      <div class="features-cards">
+        <div class="features-card">
+          <img src="assets/joao-ferrao-4YzrcDNcRVg-unsplash.jpg" alt="Easy to Use">
+          <h3>Easy to Use</h3>
+          <p>Create a professional resume effortlessly with our user-friendly interface.</p>
+        </div>
+        <div class="features-card">
+          <img src="assets/instant resume.jpg" alt="Instant Resume">
+          <h3>Instant Resume</h3>
+          <p>Generate a polished resume in seconds using your LinkedIn profile data.</p>
+        </div>
+        <div class="features-card">
+          <img src="assets/securedata.jpg" alt="Secure Data">
+          <h3>Secure Data</h3>
+          <p>Your personal information is safe with our secure and encrypted platform.</p>
         </div>
+        <div class="features-card">
+          <img src="assets/support.jpg" alt="24/7 Support">
+          <h3>24/7 Support</h3>
+          <p>Our dedicated support team is available round the clock to assist you.</p>
+        </div>
+      </div>
     </section>
 
     <!-- Testimonials Section -->
     <section class="testimonials">
-        <h2>What Our Users Say</h2>
-        <div class="testimonial-cards">
-            <div class="testimonial-card">
-                <img src="assets/jondoe.jpg" alt="User 1">
-                <h3>Jane Doe</h3>
-                <p>"This resume builder transformed my LinkedIn profile into a professional resume effortlessly. Highly recommended!"</p>
-            </div>
-            <div class="testimonial-card">
-                <img src="assets/john_smith.jpg" alt="User 2">
-                <h3>John Smith</h3>
-                <p>"I was amazed at how quickly I was able to generate a resume. The process was smooth and the result was perfect."</p>
-            </div>
-            <div class="testimonial-card">
-                <img src="assets/emily_johnson.jpg" alt="User 3">
-                <h3>Emily Johnson</h3>
-                <p>"The platform is user-friendly and secure. I felt confident that my data was protected. Great service!"</p>
-            </div>
+      <h2>What Our Users Say</h2>
+      <div class="testimonial-cards">
+        <div class="testimonial-card">
+          <img src="assets/jondoe.jpg" alt="User 1">
+          <h3>Jane Doe</h3>
+          <p>"This resume builder transformed my LinkedIn profile into a professional resume effortlessly. Highly
+            recommended!"</p>
+        </div>
+        <div class="testimonial-card">
+          <img src="assets/john_smith.jpg" alt="User 2">
+          <h3>John Smith</h3>
+          <p>"I was amazed at how quickly I was able to generate a resume. The process was smooth and the result was
+            perfect."</p>
         </div>
+        <div class="testimonial-card">
+          <img src="assets/emily_johnson.jpg" alt="User 3">
+          <h3>Emily Johnson</h3>
+          <p>"The platform is user-friendly and secure. I felt confident that my data was protected. Great service!"</p>
+        </div>
+      </div>
     </section>
 
 
@@ -1016,37 +1095,37 @@ <h3>Connect With Us</h3>
 	    
         </div>
         <div class="footer-bottom">
-            <p>&copy; 2024 Resume Builder. All rights reserved.</p>
+          <p>&copy; 2024 Resume Builder. All rights reserved.</p>
         </div>
-    </footer>
-    <div id="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-  
-    <script>
-  let lastScrollPercentage = 0; 
-  
-  function updateProgressBar() {
-      const scrollTop = window.scrollY; 
-      const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
-      const scrollPercentage = (scrollTop / windowHeight) * 100; 
-  
-      
-      const progressBar = document.getElementById('progress-bar');
-      
-     
-      lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
-      progressBar.style.width = lastScrollPercentage + '%'; 
-  }
-  window.addEventListener('scroll', updateProgressBar);
-  
-    </script>
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-	
+      </footer>
+      <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+        let lastScrollPercentage = 0;
+
+        function updateProgressBar() {
+          const scrollTop = window.scrollY;
+          const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
+          const scrollPercentage = (scrollTop / windowHeight) * 100;
+
+
+          const progressBar = document.getElementById('progress-bar');
+
+
+          lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
+          progressBar.style.width = lastScrollPercentage + '%';
+        }
+        window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+      <!-- Scripts -->
+      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
 
-</body>
+  </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/login.css b/login.css
index e69de29..2b1b611 100644
--- a/login.css
+++ b/login.css
@@ -0,0 +1,282 @@
+/* Reset default margin and padding */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+/* Progress Bar */
+#progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 9px;
+  z-index: 99990;
+}
+
+#progress-bar {
+  height: 9px;
+  width: 0;
+  background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%);
+  box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7);
+  transition: width 0.09s ease-in-out;
+  border-radius: 10px;
+}
+
+/* Header and Navigation */
+header {
+  background-color: #00796b;
+  color: white;
+  padding: 15px;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header h1 {
+  font-size: 1.5rem;
+  margin: 0;
+  color: white;
+}
+
+nav ul {
+  list-style-type: none;
+  display: flex;
+  gap: 20px;
+}
+
+nav ul li a {
+  color: white;
+  transition: color 0.3s;
+}
+
+nav ul li a:hover {
+  color: #e0f7fa;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 7px;
+}
+
+.nav-controls {
+  display: flex;
+  align-items: center;
+}
+
+#menu-toggle {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  margin-left: 15px;
+  display: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 90%;
+  max-width: 600px;
+  background: #fff;
+  border-radius: 10px;
+  margin: 20px auto;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.forms-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  width: 100%;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+.input-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0.5rem;
+}
+
+.input-field i {
+  color: #666;
+  margin-right: 0.5rem;
+}
+
+.input-field input {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  outline: none;
+}
+
+.btn {
+  background-color: #6e8efb;
+  color: #fff;
+  padding: 0.75rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+  background-color: #a777e3;
+}
+
+/* Social Media */
+.social-media a img {
+  transition: transform 0.3s ease;
+}
+
+.social-media a img:hover {
+  transform: scale(1.1);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  nav ul {
+    flex-direction: column;
+    display: none;
+    width: 100%;
+    position: absolute;
+    background-color: #00796b;
+    top: 100%;
+    left: 0;
+    padding: 15px 0;
+    z-index: 9999;
+  }
+  nav ul li {
+    margin: 10px 0;
+    text-align: center;
+  }
+  #menu-toggle {
+    display: block; /* Show menu toggle button */
+  }
+
+  .container {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .forms-container {
+    padding: 1.5rem;
+  }
+}
+
+/* Footer */
+.footer {
+  background-color: #00796b;
+  color: #ffffff;
+  padding: 40px 20px;
+  margin-top: 20px;
+}
+
+.footer-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-section {
+  flex: 1;
+  min-width: 200px;
+  margin-bottom: 20px;
+}
+
+.footer-section h3 {
+  font-size: 1.3rem;
+  margin-bottom: 15px;
+}
+
+.footer-section ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 10px;
+}
+
+.footer-section ul li a {
+  color: #ffffff;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.footer-section ul li a:hover {
+  color: #b2dfdb;
+}
+
+.social-icons {
+  display: flex;
+  gap: 10px;
+}
+
+.social-icons a {
+  color: #ffffff;
+  font-size: 1.5rem;
+  transition: color 0.3s;
+}
+
+.social-icons a:hover {
+  color: #b2dfdb;
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 20px;
+  font-size: 0.9rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 20px;
+  color: #e0f2f1;
+}
+
+/* Responsive Footer Styles */
+@media (max-width: 768px) {
+  .footer-content {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .footer-section {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 30px;
+  }
+
+  .footer-section h3 {
+      font-size: 1.2rem;
+  }
+}
diff --git a/login.html b/login.html
index 2040471..20964db 100644
--- a/login.html
+++ b/login.html
@@ -1,104 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Register & Login</title>
-    <link rel="stylesheet" href="login.css" />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register & Login</title>
+  <link rel="stylesheet" href="login.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+</head>
+<body>
+  <!-- Progress Bar -->
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+</div>
 
-  </head>
-  <body>
-    <div class="container">
-      <div class="forms-container">
-        <div class="signin-signup">
-          <form action="#" class="sign-in-form">
-            <h2 class="title">Sign in</h2>
-            <div class="input-field">
-              <i class="fas fa-user"></i>
-              <input type="text" placeholder="Username" />
-            </div>
-            <div class="input-field">
-              <i class="fas fa-lock"></i>
-              <input type="password" placeholder="Password" />
-            </div>
-            <input type="submit" value="Login" class="btn solid" />
-            <p class="social-text">Or Sign in with social platforms</p>
-            <div class="social-media">
-        
-
-              <a href="https://github.com/YourGitHubProfile" target="_blank">
-    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;">
-              </a>
-            </div>
-          </form>
-          <form action="#" class="sign-up-form">
-            <h2 class="title">Sign up</h2>
-            <div class="input-field">
-              <i class="fas fa-user"></i>
-              <input type="text" placeholder="Username" />
-            </div>
-            <div class="input-field">
-              <i class="fas fa-envelope"></i>
-              <input type="email" placeholder="Email" />
-            </div>
-            <div class="input-field">
-              <i class="fas fa-lock"></i>
-              <input type="password" placeholder="Password" />
-            </div>
-            <input type="submit" class="btn" value="Sign up" />
-            <p class="social-text">Or Sign up with social platforms</p>
-            <div class="social-media">
-            
-              <a href="https://github.com/YourGitHubProfile" target="_blank">
-    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;">
-              </a>
-            </div>
-          </form>
-        </div>
-      </div>
+<!-- Navbar section -->
+<header>
+    <a href="index.html"><h1>Resum Resume<span>.</span></h1></a>
+    <nav>
+        <ul id="nav-menu">
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about.html">About Us</a></li>
+            <li><a href="#resume.html">Resume</a></li>
+            <li><a href="#signup.html">Sign Up</a></li>
+            <li><a href="login.html">Login</a></li>
+        </ul>
+    </nav>
+    <div class="nav-controls">
+      <a href="about.html" class="fas fa-info-circle"></a>
+      <a href="login.html" id="loginIcon" class="fas fa-user"></a>
+        <button id="menu-toggle" aria-label="Toggle menu">☰</button>
+    </div>
+</header>
 
-      <div class="panels-container">
-        <a href="index.html" class="homeBtn">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
-            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
-          </svg>
-        </a>
-        <div class="panel left-panel">
-          <div class="content">
-            <h3>New here ?</h3>
-            <p>
-                Discover new experiences with AmbuFlow! <br>Get access to exclusive content and features. <br> Create your account.
-            </p>
-            <a href="index.html" class="homeBtn">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
-                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
-              </svg>
+  <div class="container">
+    <div class="forms-container">
+      <div class="signin-signup">
+        <form action="#" class="sign-up-form">
+          <h2 class="title">Sign up</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" required />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-envelope"></i>
+            <input type="email" placeholder="Email" required />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-lock"></i>
+            <input type="password" placeholder="Password" required />
+          </div>
+          <input type="submit" class="btn" value="Sign up" />
+          <p class="social-text">Or Sign up with social platforms</p>
+          <div class="social-media">
+            <a href="https://github.com/YourGitHubProfile" target="_blank">
+              <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;">
             </a>
-            <button class="btn transparent" id="sign-up-btn">
-              Sign up
-            </button>
           </div>
-          <img src="img/log.svg" class="image" alt="" />
+          <input type="submit" class="btn" value="Login" />
+        </form>
+      </div>
+    </div>
+  </div>
+
+
+  <footer class="footer">
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>About Us</h3>
+            <ul>
+                <li><a href="#">Our Story</a></li>
+                <li><a href="#">Team</a></li>
+                <li><a href="#">Careers</a></li>
+            </ul>
         </div>
-        <div class="panel right-panel">
-          
-          <div class="content">
-            
-            <h3>One of us ?</h3>
-            <p>
-                Welcome to our community
-            </p>
-            <button class="btn transparent" id="sign-in-btn">
-              Sign in
-            </button>
-            
-          </div>
-          <img src="img/register.svg" class="image" alt="" />
+        <div class="footer-section">
+            <h3>Services</h3>
+            <ul>
+                <li><a href="#">Resume Builder</a></li>
+                <li><a href="cv.html">CV Templates</a></li>
+                <li><a href="#">Career Advice</a></li>
+            </ul>
         </div>
-        
-      </div>
-      
+        <div class="footer-section">
+            <h3>Support</h3>
+            <ul>
+                <li><a href="Faqs.html">FAQ</a></li>
+                <li><a href="comment.html">Contact Us</a></li>
+                <li><a href="privacy-policy.html">Privacy Policy</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>Connect With Us</h3>
+            <div class="social-icons">
+                <a href="#"><i class="fab fa-facebook-f"></i></a>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                <a href="#"><i class="fab fa-instagram"></i></a>
+            </div>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        <p>&copy; 2024 Resume Builder. All rights reserved.</p>
     </div>
-    <script src="login.js"></script>
-  </body>
+</footer>
+  <script src="login.js"></script>
+</body>
 </html>
diff --git a/login.js b/login.js
index e69de29..bcbc2a7 100644
--- a/login.js
+++ b/login.js
@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const container = document.querySelector(".container");
+    const signUpBtn = document.getElementById("sign-up-btn");
+    const signInBtn = document.getElementById("sign-in-btn");
+  
+    signUpBtn.addEventListener("click", () => {
+      container.classList.add("show-signup");
+    });
+  
+    signInBtn.addEventListener("click", () => {
+      container.classList.remove("show-signup");
+    });
+});
+  
+
+document.addEventListener("DOMContentLoaded", function () {
+  const container = document.querySelector(".container");
+  const menuToggle = document.getElementById("menu-toggle");
+  const navMenu = document.getElementById("nav-menu");
+  
+  // Toggle menu functionality
+  menuToggle.addEventListener("click", () => {
+      navMenu.classList.toggle("show-menu");
+  });
+
+  // Progress bar functionality
+  window.addEventListener("scroll", () => {
+      const scrollY = window.scrollY;
+      const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = (scrollY / documentHeight) * 100;
+      document.getElementById("progress-bar").style.width = `${scrollPercent}%`;
+  });
+});
+
diff --git a/resume.html b/resume.html
index 709b79a..6acec7f 100644
--- a/resume.html
+++ b/resume.html
@@ -1,41 +1,105 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Build Resume</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="Resume.css">
 </head>
+
 <body>
-    <!-- header section starts --> 
+    <!-- header section starts -->
     <header>
+        <!-- <input type="checkbox" name="" id="toggler">
+          <label for="toggler" class="fas fa-bars"></label> -->
         <a href="#" class="logo">Resum Resume<span>.</span></a>
-                 
+
         <nav class="navbar">
             <a href="#home">Home</a>
             <a href="about.html">About</a>
             <a href="resume.html">Build Resume</a>
             <a href="RateMyResume.html">RateMyResume</a>
+
+            <!-- <a href="signup.html">Sign Up</a> -->
+            <!-- <a href="login.html">Login</a> -->
+        </nav>
+
+        <div class="auth-and-theme">
+            <!-- Login/Signup dynamically added, adding JS below, you can see -->
+            <div id="auth-links">
+                <a href="signup.html" id="signup-link">Sign Up</a>
+                <a href="login.html" id="login-link">Login</a>
+            </div>
+
+            <!-- Hamburger menu for small screens -->
+            <div class="hamburger">
+                <input type="checkbox" id="menu-toggle" class="menu-toggle">
+                <label for="menu-toggle" class="fas fa-bars menu-icon"></label>
+            </div>
+            <!-- Dark mode toggle, better in last of nav -->
+            <div class="dark-mod">
+                <input type="checkbox" name="" id="toggler" class="dark-mode-toggle">
+                <label for="toggler" class="fas fa-moon theme-mode"></label>
+            </div>
+        </div>
+
+    </header>
+    <nav class="mobile-navbar">
+        <div class="main-links">
+            <a href="#home">Home</a>
+            <a href="about.html">About</a>
+            <a href="resume.html">Build Resume</a>
+        </div>
+        <div class="auth-links">
             <a href="signup.html">Sign Up</a>
             <a href="login.html">Login</a>
-        </nav>
-    
-        <div class="icons">
-            <a href="about.html" class="fas fa-info-circle"></a>
-            <a href="#" class="fas fa-envelope"></a>
-            <a href="login.html" id="loginIcon" class="fas fa-user"></a>
         </div>
-    </header> 
+    </nav>
+    <script>
+        // Get the menu toggle checkbox and mobile navbar elements
+        const menuToggle = document.getElementById('menu-toggle');
+        const mobileNavbar = document.querySelector('.mobile-navbar');
+
+        // Event listener to show/hide mobile navbar based on checkbox state
+        menuToggle.addEventListener('change', function () {
+            if (this.checked) {
+                mobileNavbar.style.transform = 'translateY(0)'; // Slide down into view
+            } else {
+                mobileNavbar.style.transform = 'translateY(-100%)'; // Slide up out of view
+            }
+        });
+    </script>
+    <script>
+        document.getElementById('toggler').addEventListener('change', function () {
+            // document.body.classList.toggle('dark-mode-toggle', this.checked);
+
+            // Change icon between darl and light
+            const icon = document.querySelector('.theme-mode');
+            if (this.checked) {
+                icon.classList.remove('fa-sun');
+                icon.classList.add('fa-moon');
+            } else {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+            }
+        });
+
+    </script>
     <style>
-        body{
+        body {
             padding: 0;
         }
-        header{
+
+        header {
             position: relative;
         }
-        footer{
+
+        footer {
             margin-top: 5rem;
         }
     </style>
@@ -89,12 +153,12 @@ <h2>Review and Download</h2>
                 <span class="circle">3</span>
                 <span class="label">Step 3</span>
             </div>
-        </div>    
+        </div>
     </div>
     <!-- main section start -->
     <div class="form-container">
         <h2>Fill Your Information</h2>
-        
+
         <!-- Personal Information -->
         <div class="section" id="personal-info">
             <h3>Personal Information <i id="caret1" class="fa-solid fa-caret-down"></i></h3>
@@ -105,10 +169,10 @@ <h3>Personal Information <i id="caret1" class="fa-solid fa-caret-down"></i></h3>
 
                     <label>Email:</label>
                     <input type="email" id="email" placeholder="Enter your email">
-                    
+
                     <label>Contact Number:</label>
                     <input type="tel" id="contact" placeholder="Enter your contact number">
-                    
+
                     <label>Location:</label>
                     <input type="text" id="location" placeholder="Enter your location">
                 </div>
@@ -242,7 +306,7 @@ <h3>Languages (Optional) <i id="caret7" class="fa-solid fa-caret-down"></i></h3>
     <!-- Step 2: Template Selection Section -->
     <div id="step-2" class="step-section" style="display: none;">
         <h2>Select a Resume Template</h2>
-        
+
         <div class="template-section">
             <div id="basic" class="template-card" onclick="selectTemplate('basic')">
                 <img src="templates/basic.jpg" alt="Basic Template">
@@ -257,7 +321,7 @@ <h2>Select a Resume Template</h2>
                 <p>Modern</p>
             </div>
         </div>
-        
+
         <!-- Navigation Buttons -->
         <div class="buttons">
             <button id="prev-step-2" onclick="showStep(1)">Prev Step</button>
@@ -274,6 +338,14 @@ <h2>Review Your Resume</h2>
 
     <button id="prev-step-3">Edit Previous Steps</button>
     <button id="download-resume">Download Resume</button>
+
+        <h2>Review Your Resume</h2>
+        <div id="resume-display">
+            <!-- Generated resume will be displayed here -->
+        </div>
+
+        <button id="prev-step-3">Edit Previous Steps</button>
+        <button id="download-resume">Download Resume</button>
     </div>
 
 </div>
@@ -334,4 +406,5 @@ <h3>Connect With Us</h3>
     <script src="Resume.js"></script>
     <script src="resume2.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index c3925ad..556b16e 100644
--- a/style.css
+++ b/style.css
@@ -82,143 +82,149 @@ header {
     top: 0;
     left: 0;
     right: 0;
-    background: var(--soft-teal);
-    /*Changed background to Deep Teal */
-    padding: 2rem 9%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     z-index: 1000;
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);/
+    display: flex;
+    justify-content: space-between; 
+    align-items: center; 
+    padding: 15px 30px;
+    background-color: var(--deep-teal); 
 }
 
-header .logo {
-    font-size: 3rem;
-
-    font-family: 'Poppins', sans-serif;
-    color: #353047;
-
+.logo {
+    font-size: 28px; 
+    font-weight: bold; 
+    transition: color 0.3s;
     color: var(--off-white);
-    /* White logo for contrast */
-    font-weight: bolder;
-}
-
-.logo img {
-    width: 100px;
-    padding: 0px 6px;
-    margin-right: -14px;
 }
 
-header .logo:hover {
-    font-size: 3rem;
-    color: var(--soft-gold);
-    /* Soft Gold on hover for logo */
-    font-weight: bolder;
+.logo:hover {
+    color: var(--soft-gold); 
+    transform: translateY(-2px);
     text-decoration: none;
 }
 
-header .logo {
-    font-size: 3rem;
-    color: white;
-    font-weight: bolder;
-    font-size: 2.5rem;
+.navbar {
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+    flex: 1; 
+    padding-top: 10px;
 }
 
+/* Links in navbar */
+.navbar a {
+    margin: 0 15px; 
+    text-decoration: none; 
+    color: var(--off-white); 
+    font-size: 18px; 
+    font-weight: 600; 
+    transition: color 0.3s; 
+}
 
-
-header .logo span {
-    color: var(--off-white);
-    /* Updated to match logo color */
-
+.navbar a:hover {
+    color: var(--soft-gold); 
 }
 
+.auth-and-theme {
+    display: flex;
+    align-items: center; 
+}
 
-header .navbar a {
-    font-size: 2rem;
-    padding: 15px;
-    color: white;
+#auth-links {
+    display: flex; 
+    margin-right: 20px; 
 }
 
-header .navbar a:hover {
-    color: var(--soft-gold);
-    /* Soft Gold on hover */
+#auth-links a {
+    margin-left: 15px; 
     text-decoration: none;
-    /* Ensure no underline by default */
+    color: var(--off-white);
+    font-size: 18px; 
+    font-weight: 600; 
+    transition: color 0.3s; 
 }
 
-header .icons a {
-    font-size: 2.5rem;
-    color: white;
-    margin-left: 1.5rem;
+#auth-links a:hover {
+    color: var(--soft-gold);
 }
 
-header .navbar a {
-    font-size: 2rem;
-    padding: 0 1.5rem;
-    color: #ffffff;
-    font-size: 1.8rem;
+.hamburger{
+    display: none;
 }
-
-header .navbar a:hover {
-    color: var(--red);
-    text-decoration: none;
-    color: #ffffff;
+.dark-mod{
+    width: 20px;
+    margin-top: -11px;
+    cursor: pointer;
 }
 
-header .icons a {
-    font-size: 2.5rem;
-    color: #ffffff;
-    margin-left: 1.5rem;
-    font-size: 2.2rem;
+.dark-mode-toggle {
+    margin-left: 15px; 
+    opacity: 0;
 }
-
-header .icons a:hover {
-    color: var(--purple);
-    color: #ffffff;
-    text-decoration: none;
+.menu-toggle{
+    opacity: 0;
 }
 
-header #toggler {
-    display: none;
-}
+.menu-icon {
+    padding-top: 6px;
+    font-size: 24px;
+    cursor: pointer; 
+    color: var(--off-white);
 
-header .fa-bars {
-    font-size: 3rem;
+}
 
+label[for="toggler"] {
+    font-size: 20px; 
+    cursor: pointer; 
+    margin-left: 10px; 
     color: var(--off-white);
-    /* White for better visibility */
-    border-radius: .5rem;
-    padding: .5rem 1.5rem;
-    cursor: pointer;
-    border: .1rem solid rgba(0, 0, 0, 0.3);
-    display: none;
 }
 
-/* Default light mode styles */
-body {
-    background-color: var(--off-white);
-    /* Changed from #ffffff to Off-White */
-    color: var(--dark-slate);
-    /* Changed from #000000 to Dark Slate */
+.mobile-navbar{
+    width: 100%;
+    height: 290px;
+    background-color: var(--deep-teal);
+    position: fixed;
+    display: none;
+    justify-content: space-around;
+    align-items: flex-start;
+    z-index: 999;
+    top: 71px;
+    border-top: 2px solid wheat;
+    transform: translateY(-100%); /* Initially hidden off-screen */
+    transition: transform 0.4s ease; /* Smooth transition */
 }
 
+.mobile-navbar .main-links,.auth-links{ 
+    display: flex;
+    flex-direction: column;
+}
+.mobile-navbar .main-links > a, .auth-links > a{ 
+    color: var(--off-white);
+    margin: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    text-decoration: none;
+    border: 1px dashed var(--soft-gold);
+    padding: 10px;
+}
 
 
-.dark-mode button {
-    background-color: #1e1e1e;
-    color: #ffffff;
-}
+@media (max-width: 900px) {
+    .navbar, #auth-links{
+        display: none;
+    }
 
+    .hamburger{
+        display: block;
+    }
 
-.home .content h3 {
-    font-size: 5rem;
-    color: #333;
-    font-size: 4.5rem;
-    font-weight: 600;
-    line-height: 6rem;
+    .mobile-navbar{
+        display: flex;
+    }
+    
 }
 
-/* Add more styles as needed for other elements */
 
 .home {
     display: flex;
diff --git a/templates/classic.html b/templates/classic.html
index d03580f..52cb200 100644
--- a/templates/classic.html
+++ b/templates/classic.html
@@ -8,35 +8,72 @@
 </head>
 <body>
     <div class="resume classic">
-        <h1 id="name">[Name]</h1>
-        <p id="profile">[Profile]</p>
-        <h2>Contact Information</h2>
-        <p>Email: <span id="email">[Email]</span></p>
-        <p>Contact No: <span id="contact">[Contact]</span></p>
-        <p>Location: <span id="location">[Location]</span></p>
+        <h1 id="name">${name}</h1>
+        <div class="resumemain">
+            <div class="resumeleft">
+                <p id="profile">${profile}</p>
+                <h2>Contact Information</h2>
+                <p>Email: <span id="email">${email}</span></p>
+                <p>Contact No: <span id="contact">${contact}</span></p>
+                <p>Location: <span id="location">${location}</span></p>
+                <h2>Skills</h2>
+                <p id="skills">${skills}</p>
+                <h2>Education</h2>
+                <div id="education">
+                ${educationHTML}
+                </div>
+            </div>
+            <div class="line"></div>
+            <div class="resumeright">
+                <h2>Experience</h2>
+                <div id="experience">
+                ${experienceHTML}
+                </div>
         
-        <h2>Education</h2>
-        <div id="education">
-            <!-- Education data will be filled here -->
-        </div>
-
-        <h2>Skills</h2>
-        <p id="skills">[Skills]</p>
-
-        <h2>Experience</h2>
-        <div id="experience">
-            <!-- Experience data will be filled here -->
-        </div>
-
-        <h2>Achievements and Certifications</h2>
-        <div id="achievements">
-            <!-- Achievements data will be filled here -->
-        </div>
-
-        <h2>Projects</h2>
-        <div id="projects">
-            <!-- Projects data will be filled here -->
+                <h2>Achievements and Certifications</h2>
+                <div id="achievements">
+                    <!-- Achievements data will be filled here -->
+                </div>
+        
+                <h2>Projects</h2>
+                <div id="projects">
+                ${projectHTML}
+                </div>
+            </div>
         </div>
     </div>
+    <style>
+    #profile{
+        height: auto;
+    }
+    .resumeright h2{
+        margin-top: 0;
+    }
+    .classic{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .resume.classic{
+        display: flex;
+        flex-direction: column;
+        justify-content: left;
+    }
+    .resumemain{
+        display: flex;
+        justify-content: space-between;
+    }
+    .resumeleft{
+        width: 40%;
+    }
+    .resumeright{
+        width: 40%;
+    }
+    .line{
+        height: 100%;
+        width: 3px;
+        background-color: gray;
+    }
+    </style>
 </body>
 </html>
diff --git a/templates/modern.html b/templates/modern.html
index 5b90213..cba6295 100644
--- a/templates/modern.html
+++ b/templates/modern.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="templates.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Modern Template</title>
 </head>
 <body>
@@ -11,9 +12,9 @@
         <h1 id="name">[Name]</h1>
         <p id="profile">[Profile]</p>
         <h2>Contact Information</h2>
-        <p>Email: <span id="email">[Email]</span></p>
-        <p>Contact No: <span id="contact">[Contact]</span></p>
-        <p>Location: <span id="location">[Location]</span></p>
+        <p><i class="fa-solid fa-envelope"></i> Email: <span id="email">[Email]</span></p>
+        <p><i class="fa-solid fa-address-book"></i> Contact No: <span id="contact">[Contact]</span></p>
+        <p><i class="fa-solid fa-location-dot"></i> Location: <span id="location">[Location]</span></p>
         
         <h2>Education</h2>
         <div id="education">
@@ -38,5 +39,42 @@ <h2>Projects</h2>
             <!-- Projects data will be filled here -->
         </div>
     </div>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 0;
+        }
+
+        .resume {
+            border: 1px solid #ddd;
+            padding: 20px;
+            border-radius: 8px;
+            background-color: #f9f9f9;
+        }
+
+        h1, h2 {
+            color: #333;
+        }
+
+        h1 {
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }
+
+        h2 {
+            margin-top: 20px;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 5px;
+        }
+
+        p {
+            margin: 5px 0;
+        }
+        .modern {
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
 </body>
 </html>
