diff --git a/about.html b/about.html
index 31a4703..5499057 100644
--- a/about.html
+++ b/about.html
@@ -308,10 +308,49 @@
     }
 }
 
+#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;
+        }
+
     </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">
@@ -321,6 +360,7 @@ <h1>Resum Resume</h1>
         <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>
         <a class="tab" href="privacypolicy.html">Privacy Policy</a>
diff --git a/ats_score_finder.html b/ats_score_finder.html
new file mode 100644
index 0000000..5a3ade2
--- /dev/null
+++ b/ats_score_finder.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume ATS Score Finder</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMR5aN2eW1u1a1G6T8G6Fz2F4zS3z7P8S5f5WJ" crossorigin="anonymous">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f4f4f4;
+            color: #333;
+        }
+        h1 {
+            text-align: center;
+        }
+.heading{
+ background-color:#045D5D ;
+height:200px;
+margin-bottom:60px;
+color:white;
+width:100%;
+justify-content:center;
+}
+        .container {
+            max-width: 800px;
+            margin: auto;
+            background: #d9c79e;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	    color:#2f4f4f;
+        }
+        button {
+            width: 100%;
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #218838;
+        }
+        #score {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-top: 20px;
+        }
+        #feedback {
+            text-align: center;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+<div class="heading">
+<br><br><br>
+<h1>Resume ATS Score Finder</h1>
+</div>
+
+<div class="container">
+    <h1>Resume ATS Score Finder</h1>
+    <label for="job-description">Enter Job Description:</label>
+    <textarea id="job-description" rows="4" style="width: 100%;" placeholder="Enter the job description here..."></textarea>
+
+    <label for="resume-upload">Upload Your Resume (PDF or Word):</label>
+    <input type="file" id="resume-upload" accept=".pdf, .docx" />
+
+    <label for="resume-text">Or Paste Your Resume Text Here:</label>
+    <textarea id="resume-text" rows="4" style="width: 100%;" placeholder="Paste your resume text..."></textarea>
+
+    <button id="analyze-button">Analyze Resume</button>
+
+    <div id="score">ATS Compatibility Score: 0%</div>
+    <div id="feedback"></div>
+</div>
+
+<script>
+// Event listener for the analyze button
+document.getElementById("analyze-button").addEventListener("click", function() {
+    const jobDescription = document.getElementById("job-description").value;
+    const resumeText = document.getElementById("resume-text").value.trim();
+
+    // Handle file upload
+    const fileInput = document.getElementById("resume-upload");
+    const file = fileInput.files[0];
+
+    // If both fields are empty, alert the user
+    if (!jobDescription || (!resumeText && !file)) {
+        alert("Please enter the job description and provide either a resume text or upload a file.");
+        return;
+    }
+
+    // If there's a file, process it
+    if (file) {
+        const reader = new FileReader();
+
+        reader.onload = function(event) {
+            const arrayBuffer = event.target.result;
+
+            if (file.type === "application/pdf") {
+                // PDF file handling
+                pdfjsLib.getDocument(arrayBuffer).promise.then(function(pdf) {
+                    pdf.getPage(1).then(function(page) {
+                        page.getTextContent().then(function(textContent) {
+                            const textItems = textContent.items;
+                            const resumeTextFromFile = textItems.map(item => item.str).join(" ");
+                            analyzeResume(jobDescription, resumeText || resumeTextFromFile);
+                        });
+                    });
+                });
+            } else if (file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
+                // Word file handling
+                mammoth.extractRawText({arrayBuffer: arrayBuffer})
+                    .then(function(result) {
+                        const resumeTextFromFile = result.value; // The plain text
+                        analyzeResume(jobDescription, resumeText || resumeTextFromFile);
+                    })
+                    .catch(function(err) {
+                        console.error("Error reading Word file:", err);
+                    });
+            } else {
+                alert("Unsupported file type. Please upload a PDF or Word document.");
+            }
+        };
+
+        reader.readAsArrayBuffer(file);
+    } else {
+        analyzeResume(jobDescription, resumeText); // Analyze with pasted text
+    }
+});
+
+// Function to analyze resume text
+function analyzeResume(jobDescription, resumeText) {
+    if (jobDescription && resumeText) {
+        const atsScore = calculateATSScore(jobDescription, resumeText);
+        const feedback = displayFeedback(atsScore);
+        const formatFeedback = checkFormattingAndStructure(resumeText);
+
+        document.getElementById("score").innerText = "ATS Compatibility Score: " + atsScore + "%";
+        document.getElementById("feedback").innerText = feedback + " " + formatFeedback;
+    } else {
+        document.getElementById("feedback").innerText = "Please enter both the job description and resume.";
+    }
+}
+
+// Function to calculate ATS score based on job description keywords
+function calculateATSScore(jobDescription, resumeText) {
+    // Extract keywords from job description
+    const jobKeywords = jobDescription.toLowerCase().match(/\b\w+\b/g) || [];
+    const resumeKeywords = resumeText.toLowerCase().match(/\b\w+\b/g) || [];
+    let matchingKeywords = 0;
+
+    jobKeywords.forEach(keyword => {
+        if (resumeKeywords.includes(keyword)) {
+            matchingKeywords++;
+        }
+    });
+
+    // Calculate score based on matching keywords
+    return ((matchingKeywords / jobKeywords.length) * 100).toFixed(2);
+}
+
+// Function to display feedback based on ATS score
+function displayFeedback(atsScore) {
+    if (atsScore >= 80) {
+        return "Great! Your resume matches well with the job description.";
+    } else if (atsScore >= 50) {
+        return "Good job! Consider adding more relevant keywords.";
+    } else {
+        return "Your resume needs improvement. Focus on matching key skills.";
+    }
+}
+
+// Function to check formatting and structure
+function checkFormattingAndStructure(resumeText) {
+    const lines = resumeText.split('\n');
+    const hasHeading = lines.some(line => line.trim().toLowerCase().includes("education") || line.trim().toLowerCase().includes("experience"));
+    const hasBulletPoints = lines.some(line => line.trim().startsWith("-") || line.trim().startsWith("•"));
+
+    if (!hasHeading) {
+        return "Consider adding clear headings (e.g., Education, Experience).";
+    }
+    if (!hasBulletPoints) {
+        return "Using bullet points can improve readability.";
+    }
+    return "Your formatting looks good!";
+}
+</script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
index 28024e8..2d0d952 100644
--- a/index.html
+++ b/index.html
@@ -671,12 +671,52 @@
       .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-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+      
     </style>
   </head>
 
   <body>
     <!-- header section starts -->
 
+    <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>
@@ -696,6 +736,8 @@
         <a href="#home">Home</a>
         <a href="about.html">About</a>
         <a href="resume.html">Build Resume</a>
+        <a href="resume_tips.html">Resume Tips</a>
+	<li><a href="ats_score_finder.html">ATS Score Finder</a></li>
         <a href="login.html">Login</a>
       <a href="privacypolicy.html">Privacy Policy</a>
       </nav>
@@ -1177,6 +1219,7 @@ <h3>Services</h3>
 					<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">
@@ -1184,7 +1227,11 @@ <h3>Support</h3>
 				<ul>
 					<li><a href="/Faqs.html">FAQ</a></li>
 					<li><a href="#">Contact Us</a></li>
+ privacy
 					<li><a href="privacypolicy.html">Privacy Policy</a></li>
+
+					<li><a href="/privacy-policy.html">Privacy Policy</a></li>
+ main
 				</ul>
 			</div>
 			<div class="footer-section">
diff --git a/privacy-policy.css b/privacy-policy.css
new file mode 100644
index 0000000..2e2e183
--- /dev/null
+++ b/privacy-policy.css
@@ -0,0 +1,71 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: white;
+    color: #333;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+}
+
+.header {
+    background-color: #00424F;
+    color: white;
+    padding: 1rem 1%;
+    text-align: center;
+    justify-content: space-between;
+    
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.content {
+    max-width: 800px;
+    margin: 20px auto;
+    background: white;
+    padding: 39px;
+    padding-bottom: 114px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 5px  rgba(0, 0, 0, 0.1);
+}
+
+.content h2 {
+    color: #00424F;
+    margin-top: 20px;
+    font-size: 1.5rem;
+}
+
+.content p {
+    margin: 10px 0;
+}
+
+.content ul {
+    list-style-type: disc;
+    margin: 10px 0 10px 20px;
+    padding: 0;
+}
+
+.content li {
+    margin-bottom: 10px;
+}
+
+.content a {
+    color: #4A90E2;
+    text-decoration: none;
+}
+
+.content a:hover {
+    text-decoration: underline;
+}
+
+.footer {
+    text-align: center;
+    padding: 10px;
+    background-color: #00424F;
+    color: white;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
diff --git a/privacy-policy.html b/privacy-policy.html
new file mode 100644
index 0000000..95513ea
--- /dev/null
+++ b/privacy-policy.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Privacy Policy</title>
+    <link rel="stylesheet" href="privacy-policy.css">
+</head>
+<body>
+    <header class="header">
+        <h1>Privacy Policy</h1>
+    </header>
+    <section class="content">
+        <h2>Introduction</h2>
+        <p>We at Resum-Resume value your privacy and are committed to protecting your personal information. This privacy policy outlines how we collect, use, store, and share your information when you use our resume generation service.</p>
+        
+        <h2>Information We Collect</h2>
+        <p>When you use our service, we may collect the following types of information:</p>
+        <ul>
+            <li><strong>Personal Information:</strong> This includes your name, email address, LinkedIn profile URL, and any other data you provide when using our service to generate a resume.</li>
+            <li><strong>Usage Data:</strong> We may collect information about how you use our website, such as your IP address, browser type, pages visited, and the time spent on each page to help improve our service.</li>
+        </ul>
+        
+        <h2>How We Use Your Information</h2>
+        <p>We use the information collected in the following ways:</p>
+        <ul>
+            <li><strong>Resume Generation:</strong> Your LinkedIn profile data is used solely to create your customized resume. This information is not stored or shared with any third-party services.</li>
+            <li><strong>Service Improvement:</strong> Usage data helps us understand how users interact with our website, allowing us to enhance the user experience and make improvements to our service.</li>
+            <li><strong>Communication:</strong> We may use your email address to communicate with you about updates, new features, or changes to our terms and privacy policy.</li>
+        </ul>
+
+        <h2>Data Storage and Security</h2>
+        <p>Your data is processed in real-time for the sole purpose of generating a downloadable resume. We do not store your LinkedIn profile information or any data entered in the resume generation process on our servers.</p>
+        <p>We implement industry-standard security measures to protect your information from unauthorized access, disclosure, alteration, or destruction. However, please note that no method of transmission over the internet is 100% secure, and we cannot guarantee absolute security.</p>
+
+        <h2>Sharing Your Information</h2>
+        <p>We do not sell, trade, or rent your personal information to third parties. Your data is used exclusively for generating the resume as requested. We may share non-personal, aggregated information with third-party analytics providers to help us understand how users engage with our website.</p>
+        
+        <h2>Your Rights</h2>
+        <p>You have the following rights regarding your personal information:</p>
+        <ul>
+            <li><strong>Access:</strong> You have the right to request access to the personal information we hold about you.</li>
+            <li><strong>Correction:</strong> If you believe that any of the information we hold about you is incorrect or incomplete, you can request corrections.</li>
+            <li><strong>Deletion:</strong> You may request the deletion of your personal information that we process if it is no longer necessary for the purpose for which it was collected.</li>
+        </ul>
+
+        <h2>Cookies and Tracking Technologies</h2>
+        <p>We may use cookies and similar tracking technologies to collect and store information about your usage of our website. Cookies help us provide a better user experience by remembering your preferences and analyzing how our service is used. You can adjust your browser settings to disable cookies, but this may affect the functionality of our website.</p>
+        
+        <h2>Third-Party Links</h2>
+        <p>Our website may contain links to third-party websites. Please be aware that we are not responsible for the privacy practices of these external sites. We encourage you to read the privacy policies of any third-party websites you visit.</p>
+
+        <h2>Changes to This Policy</h2>
+        <p>We reserve the right to update or modify this privacy policy at any time. Any changes will be effective immediately upon posting the revised policy on this page. We encourage you to review this privacy policy periodically to stay informed about how we are protecting your information.</p>
+
+        <h2>Contact Us</h2>
+        <p>If you have any questions, concerns, or feedback regarding this privacy policy or our practices, please contact us at <a href="mailto:support@resume.com">support@resume.com</a>. We are here to help and will do our best to address your inquiries promptly.</p>
+    </section>
+    <footer class="footer">
+        <p>&copy; 2024 Resum-Resume. All rights reserved.</p>
+    </footer>
+</body>
+</html>
diff --git a/resume.html b/resume.html
index 96f890b..ffbd543 100644
--- a/resume.html
+++ b/resume.html
@@ -1,341 +1,186 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Resume Builder from LinkedIn</title>
-    <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="style.css">
-    <style>
-        :root {
-            --deep-teal: #003d4d; /* Updated primary color */
-            --off-white: #f8f9fa; /* Updated background color */
-            --dark-slate: #2f4f4f; /* Text color */
-            --soft-gold: #d9c79e; /* Accent color */
-        }
-
-
-    <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"
-    />
-</head>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Resume/CV Builder</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <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: 0.2s linear;
-      }
-
-      body {
-        background-color: var(--off-white);
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh; /* Ensure body takes full height */
-      }
-
-      .container {
-        margin: 50px auto; /* Center horizontally */
-        padding: 20px;
-        max-width: 500px; /* Set a max-width for the container */
-        background-color: #fff;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        border-radius: 10px; /* Added rounded corners */
-        transition: box-shadow 0.3s ease;
-        display: flex; /* Use flexbox to center items */
-        justify-content: center; /* Center horizontally */
-        align-items: center; /* Center vertically */
-        height: calc(100vh - 180px); /* Full height minus margins */
-      }
-
-      .container:hover {
-        box-shadow: 0 0 20px rgba(0, 77, 79, 0.8); /* Glow effect on hover */
-      }
-
-      h1 {
-        text-align: center;
-        color: var(--dark-slate); /* Updated heading color */
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%; /* Make form take full width of container */
-      }
-
-      label {
-        margin: 10px 0 5px;
-        color: var(--dark-slate); /* Updated label color */
-        font-weight: 500;
-      }
-
-      input[type="url"],
-      input[type="email"],
-      input[type="tel"],
-      select,
-      button {
-        padding: 10px;
-        font-size: 16px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        outline: none;
-        width: 100%; /* Full width for input fields */
-      }
-
-      input[type="url"]:focus,
-      input[type="email"]:focus,
-      input[type="tel"]:focus,
-      select:focus {
-        border-color: var(--purple);
-      }
-
-      button {
-        background-color: var(--deep-teal);
-        color: white;
-        border: none;
-        cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-      }
-
-      button:hover {
-        background-color: var(--soft-gold); /* Soft gold hover color */
-        color: var(--deep-teal);
-        transform: scale(1.05);
-      }
-
-      .navbar {
-        background-color: var(--deep-teal);
-        padding: 30px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .navbar h1 {
-        color: white;
-        margin-left: 15px;
-        font-size: 2rem;
-        transition: color 0.3s ease;
-      }
-
-      .navbar h1:hover {
-        color: var(--soft-gold);
-      }
-
-      .navbar ul {
-        list-style-type: none;
-        margin-right: 30px;
-        padding: 0;
-        display: flex;
-        gap: 20px;
-      }
-
-      .navbar ul li {
-        display: inline;
-      }
-
-      .navbar ul li a {
-        color: white;
-        text-decoration: none;
-        font-size: 18px;
-        transition: color 0.3s ease;
-      }
-
-      .navbar ul li a:hover {
-        color: var(--soft-gold);
-      }
-
-      .content {
-        padding: 20px;
-        text-align: center;
-      }
-
-      /* footer section styles */
-
-      :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;
-      }
-      .footer-content {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-      }
-
-      .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: 0px;
-        margin-top: 3px;
-      }
-      .footer-bottom p{
-        margin:0 0 10px;
-      }
-
-      .footer a {
-        color: var(--soft-gold);
-        text-decoration: none;
-        font-size: 16px;
-      }
-
-      .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);
-      }
-
-      .footer a:hover {
-        text-decoration: underline;
-      }
-
-      .footer-section h3 {
-        margin-bottom: 14px;
-        font-size: 28px;
-      }
-      /* footer section style ends */
-
-      /* 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;
-        }
-
-        .container {
-          max-width: 90%; /* Adjusted width for mobile */
-        }
-        .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;
-        }
-      }
-
-      @media (max-width: 450px) {
-        .footer-section h3 {
-          font-size: 14px;
-        }
-
-        .footer a {
-          font-size: 11px;
-        }
-
-
-        .footer-section {
-          margin-bottom: 0;
-          }
-        .navbar  img{
-        width: 100px;
-        padding: 0px 6px;
-        margin-right: -64px;
-        }
-
-        .navbar h1 {
-            color: white;
-            margin-left: -38rem;
-            font-size: 2rem;
-          transition: color 0.3s ease;
-        }
-
-        
-
-        .footer-bottom {
-          font-size: 10px;
-          margin: 0px;
-          margin-top: 5px;
-        }
-      }
-      @media (max-width: 400px) {
-        .navbar ul {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-evenly;
-          width: 100%;
-        }
-        .navbar ul li {
-          justify-content: space-evenly !important;
-        }
-        .navbar ul li a {
-          color: #eee7e7;
-          font-size: 20px;
-        }
-        .navbar ul li a:hover {
-          color: #ffffff;
-          font-size: 22px;
-        }
-      }
+      @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
+
+*{
+    margin: 0%;
+    padding: 0%;
+    font-weight: 500;
+    font-size: 14px;
+}
+body{
+    background: #ddd7f7;
+    display: grid;
+    place-items: center;
+    font-weight: 450;
+    opacity: 1;
+}
+
+.none
+{
+    display: none;
+}
+.resume
+{
+    margin-top: 40px;
+    margin-bottom: 40px;
+    margin-left: 50px;
+    width: 800px;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
+}
+#print
+{
+    background-color: #fff;
+    padding: 30px 50px;
+    height: 1120px;
+
+}
+
+.head
+{
+    display: grid;
+    grid-template-columns: 3fr 1.5fr;
+}
+.head .main .name
+{
+    font-size: 55px;
+    font-family: 'Raleway', sans-serif;
+}
+.head .main  span:nth-child(2)
+{
+    color: rgb(98, 96, 96);
+    font-size: 55px;
+    font-family: 'Raleway', sans-serif;
+    margin-left: 5px;
+}
+.head .main .post
+{
+font-family: 'Barlow', sans-serif;
+}
+.head .contacts
+{
+    text-align: right;
+    padding-top: 7px;
+}
+.head .contacts .content
+{
+    font-weight: 500;
+    padding-right: 5px;
+}
+.head .contacts .symbol
+{
+    margin-right: 5px;
+    font-size: 15px;
+    width: 17px;
+    height: 17px;
+}
+.line
+{
+    height: 0.5px;
+    background-color: rgb(87, 87, 87);
+    margin: 25px 0;
+    margin-bottom: 50px;
+}
+.mainbody
+{
+    display: grid;
+    grid-template-columns: 10fr 1fr 17fr;
+    height: 900px;
+}
+.mainbody .border
+{
+    background-color: rgb(87, 87, 87);
+    width: 3px;
+    opacity: 2;
+}
+.mainbody .rightside
+{
+    padding-left: 15px;
+}
+.title
+{
+    font-weight: 700;
+    font-size: 18px;
+    border: none;
+    padding-bottom: 3px;
+    border-bottom: 2px rgb(9, 80, 72) solid;
+}
+.skill
+{
+    margin-bottom: 6px;
+}
+button
+{
+    margin: 15px 0;
+}
+.language
+{
+    margin-bottom:6px;
+}
+.language span:nth-child(odd)
+{
+    font-weight: 700;
+}
+.edublock{
+    margin-bottom: 10px;
+}
+.edublock .head
+{
+    font-weight: 700;
+    font-size: 17px;
+}
+
+.navbtn
+{
+position: fixed;
+top: 80%;
+left: 4%;
+transform: translate(-40%,-4%);
+height: 60px;
+width: 60px;
+border-radius: 50%;
+border:#fff 4px solid;
+transition: 300ms ease-in-out;
+box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
+}
+.navbtn:nth-child(2)
+{
+top: 50%;
+left: 4.4%;
+transform: translate(-50%,-4.4%);
+}
+.navbtn:nth-child(3)
+{
+top: 60%;
+left: 4.8%;
+transform: translate(-60%,-4.8%);
+}
+.navbtn:hover
+{
+    background-color: #003d4d;
+    color: #fff;
+    border: #fff 3px solid;
+    height: 65px;
+    width: 65px;
+}
+.input-checkbox{
+    margin-right: 10px;
+}
+.education-head{
+    font-weight: 700;
+    font-size: 17px;
+}  
     </style>
+
   </head>
   <body>
     <!-- Navbar -->
@@ -355,53 +200,14 @@ <h1>Resum Resume</h1>
 		
     </nav>
 
-    <div class="container">
-      <form id="resumeForm">
-        <label for="linkedin-url">LinkedIn Profile URL</label>
-        <input
-          type="url"
-          id="linkedin-url"
-          name="linkedin-url"
-          placeholder="Enter your LinkedIn URL"
-          required
-        />
-
-        <label for="email">Email Address</label>
-        <input
-          type="email"
-          id="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
-
-        <label for="phone">Phone Number</label>
-        <input
-          type="tel"
-          id="phone"
-          name="phone"
-          placeholder="Enter your phone number"
-          required
-        />
 
-        <label for="template">Choose a Resume Template</label>
-        <select
-          id="template"
-          name="template"
-          placeholder="Choose Template"
-          required
-        >
-          <option value="classic">Choose Template</option>
-          <option value="classic">Classic Template</option>
-          <option value="modern">Modern Template</option>
-          <option value="minimalist">Minimalist Template</option>
-          <option value="custom">Custom Template</option>
-        </select>
-
-        <button type="submit">Generate Resume</button>
-      </form>
+    </head>
+    <body>
+    <div class="nav">
+    <button id="cmd" onclick="printpdf()" class="navbtn"><i class="fas fa-download"></i></button>
     </div>
 
+
     <!-- footer-section -->
     <footer class="footer">
       <div class="footer-content">
@@ -444,24 +250,295 @@ <h3>Connect With Us</h3>
       </div>
     </footer>
 
-    <script>
-      document
-        .getElementById("resumeForm")
-        .addEventListener("submit", function (event) {
-          event.preventDefault();
-
-          const linkedInUrl = document.getElementById("linkedin-url").value;
-          const email = document.getElementById("email").value;
-          const phone = document.getElementById("phone").value;
-          const template = document.getElementById("template").value;
+        
+    <div class="resume" id="resume">
+        <section id="print">
+             <div class="head">
+                <div class="main">
+                    <span class="name" contenteditable="true">YOUR</span> <span contenteditable="true">NAME</span>
+                    <div class="post" contenteditable="true">YOUR JOB PROFILE</div>
+                </div>
+                <div class="contacts">
+                <span contenteditable="true" class="content">231-3212-2132</span><span class="symbol"> <i class="fas fa-phone"></i></span><br>
+                <span contenteditable="true" class="content">samplemail@email.in</span><span class="symbol"> <i class="fas fa-envelope"></i></span><br>
+                <span contenteditable="true" class="content">linkedin/username.com</span><span class="symbol"> <i class="fab fa-linkedin"></i></span><br>
+                <span contenteditable="true" class="content">sample street-India</span><span class="symbol"> <i class="fas fa-map-marker-alt"></i></i></span>
+                </div>
+            </div>
+        
+            <div class="line"></div>
+            <div class="mainbody">
+                <div class="leftside">
+                <span class="title">MY SKILLS</span><br><br><div>
+                <div class="skill"><span><input type="checkbox" class="input-checkbox"></span><span><i class="fas fa-chevron-circle-right"></i></span>   <span contenteditable="true">write your skill here</span></div>
+                <div id="skills"></div>
+                <button id="skilladd" type="button" class="btn btn-success" onclick="addskill()"><i class="fas fa-plus-circle"></i> Skill</button> 
+                <button id="skillrem" type="button" class="btn btn-danger" onclick="remskill(event)"><i class="fas fa-minus-circle"></i> Skill</button></div>
+                <br><br><span class="title">LANGUAGES</span><br><br><div>
+                <div class="language"><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">LANGNAME</span> - <span contenteditable="true">level u know</span></div>
+                <div id="languages"></div>
+                <button id="langadd" type="button" class="btn btn-success" onclick="addLang()"><i class="fas fa-plus-circle"></i> Language</button>
+                 
+                <button id="langrem" type="button" class="btn btn-danger" onclick="remLang(event)"><i class="fas fa-minus-circle"></i> Language</button></div>
+                <br><br><span class="title">ACHIEVEMENTS</span><br><br><div>
+                <div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write your achievement</span></div>
+                <div id="achievement"></div>
+                <button id="achadd" type="button" class="btn btn-success" onclick="addAch()"><i class="fas fa-plus-circle"></i> Achievement</button>
+                 
+                <button id="achrem" type="button" class="btn btn-danger" onclick="remAch(event)" style="margin-top: 0;"><i class="fas fa-minus-circle"></i> Achievement</button></div>
+                <br><br><span class="title">INTERESTS</span><br><br><div>
+                <div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write interest</span></div>
+                <div id="interest"></div>
+                <button id="Intadd" type="button" class="btn btn-success" onclick="addInt()"><i class="fas fa-plus-circle"></i> Interest</button>
+                 
+                <button id="Intrem" type="button" class="btn btn-danger" onclick="remInt(event)"><i class="fas fa-minus-circle"></i> Interest</button></div>
+                </div>
+                
+                <div class="border"></div>
+                <div class="rightside">
+                <span class="title">PROFILE</span><br><br>
+                <div contenteditable="true">
+                Here u can write the basic information about your career like your forte, something about yourself that
+                you want your interviewer to know. Try to keep it brief and only provide necessary information. Do not include information which is
+                already written in your resume in some other section.</div>
+                <br><br><span class="title">EDUCATION</span><br><br><div>
+                <div id="education">
+                    <div class="edublock">
+                        <span><input type="checkbox" class="input-checkbox"></span>
+                        <span class="education-head" contenteditable="true">YOUR DEGREE</span>
+                        <div ><span contenteditable="true">Institute name</span> - <span contenteditable="true">Passing Year</span></div>
+                    </div>
+                </div>
+                    
+                <button id="eduadd" type="button" class="btn btn-success" onclick="addedu()"><i class="fas fa-plus-circle"></i> Education</button>
+                 
+                <button id="edurem" type="button" class="btn btn-danger" onclick="remedu(event)"><i class="fas fa-minus-circle"></i> Education</button></div>
+                <br><br>
+                <div class="new-section-div"><div><span><input type="checkbox" class="input-checkbox"></span><span class="title" contenteditable="true">NEW SECTION</span><br><br>
+                <div contenteditable="true">
+                This is the description part of your new section. Try to stay within limit and write something which has less 
+                than 400 characters. The spaces and symbols you use will also be included so use them for an indentation effect.</div>
+                </div>
+                    
+                <div id="newsec"></div>
+                <button id="secadd" type="button" class="btn btn-success" onclick="addsec()"><i class="fas fa-plus-circle"></i> Section</button>
+                 
+                <button id="secrem" type="button" class="btn btn-danger" onclick="remsec(event)"><i class="fas fa-minus-circle"></i> Section</button>
+            </div>
+            </div>
+        </section>
+     </div>
+    </body>
+
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
 
-          if (linkedInUrl && email && phone && template) {
-            alert(
-              `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}, Email: ${email}, Phone: ${phone}`
-            );
-            // Add logic to send this data to your backend for processing
+    <script>
+    function printpdf() {
+      var content = document.getElementById("resume");
+    
+      const allButtons = document.querySelectorAll("#print button");
+      allButtons.forEach(button => {
+          button.classList.add("none");
+      });
+      let allInputCheckboxes = document.querySelectorAll(".input-checkbox");
+      allInputCheckboxes.forEach(input => {
+          input.classList.add("none");
+      })
+    
+    allButtons.forEach(button => {
+        button.classList.remove("none");
+    })
+    allInputCheckboxes.forEach(input => {
+        input.classList.remove("none");
+    })
+    
+      html2pdf(content, {
+          html2canvas: { scale: 1, logging: true, dpi: 500 }
+      });
+    }
+    
+    function addedu() {
+      const head = document.createElement('div');
+      document.getElementById("education").appendChild(head);
+      head.innerHTML = ('<div class="edublock"><span><input type="checkbox" class="input-checkbox"></span><span class="education-head" contenteditable="true">YOUR DEGREE</span><div ><span contenteditable="true">Institute name</span> - <span contenteditable="true">Passing Year</span></div></div>');
+      saveresume();
+    }
+    function remedu(event) {
+      let val = 0;
+      let empty = true;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          console.log(array);
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    
+    function addskill() {
+      const head = document.createElement('div');
+      document.getElementById("skills").appendChild(head);
+      head.innerHTML = ('<div class="skill"><span><input type="checkbox" class="input-checkbox"></span><span><i class="fas fa-chevron-circle-right"></i></span>   <span contenteditable="true">write your skill here</span></div>');
+      saveresume();
+    }
+    
+    function remskill(event) {
+      let val = 0;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          console.log(array);
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    
+    function addLang() {
+      const head = document.createElement('div');
+      document.getElementById("languages").appendChild(head);
+      head.innerHTML = ('<div class="language"><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">LANGNAME</span> - <span contenteditable="true">level u know</span></div>');
+      saveresume();
+    }
+    function remLang(event) {
+      let val = 0;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          console.log(array);
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    
+    function addAch() {
+      const head = document.createElement('div');
+      document.getElementById("achievement").appendChild(head);
+      head.innerHTML = ('<div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write your achievement</span></div>');
+      saveresume();
+    }
+    function remAch(event) {
+      let val = 0;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          console.log(array);
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    
+    function addInt() {
+      const head = document.createElement('div');
+      document.getElementById("interest").appendChild(head);
+      head.innerHTML = ('<div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write interest</span></div>');
+      saveresume();
+    }
+    function remInt(event) {
+      let val = 0;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    let maxNewSection = 1;
+    function addsec() {
+      if (maxNewSection < 2) {
+          const head = document.createElement('div');
+          document.getElementById("newsec").appendChild(head);
+          if (maxNewSection === 0) {
+              head.innerHTML = ('<div><span><input type="checkbox" class="input-checkbox"></span><span class="title" contenteditable="true">NEW SECTION</span><br><br><div contenteditable="true">This is the description part of your new section. Try to stay within limit and write something which has less than 400 characters. The spaces and symbols you use will also be included so use them for an indentation effect.</div></div>');
+          }
+          else {
+              head.innerHTML = ('<div><br><br><span><input type="checkbox" class="input-checkbox"></span><span class="title" contenteditable="true">NEW SECTION</span><br><br><div contenteditable="true">This is the description part of your new section. Try to stay within limit and write something which has less than 400 characters. The spaces and symbols you use will also be included so use them for an indentation effect.</div></div>');
           }
-        });
+    
+          maxNewSection = maxNewSection + 1;
+      }
+      else {
+          alert("Atmost 2 NEW SECTION can be added!")
+    
+      }
+      saveresume();
+    }
+    function remsec(event) {
+      let val = 0;
+      const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
+      const array = Array.from(allInputCheckboxes);
+      if (array.length === 0) {
+          alert("No fields are present to be deleted!")
+      }
+      else {
+          console.log(array);
+          array.forEach(element => {
+              if (element.checked === true) {
+                  val = 1;
+                  maxNewSection = maxNewSection - 1;
+                  element.parentElement.parentElement.remove();
+              }
+          })
+          if (val === 0) alert("Please select the checkboxes to delete the required field!")
+      }
+      saveresume();
+    }
+    
+    function saveresume() {
+      var sec = document.getElementById("print");
+      value1 = sec.innerHTML;
+      var info = document.getElementById("custinfo");
+      info.value = value1;
+    }
     </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resume_tips.html b/resume_tips.html
new file mode 100644
index 0000000..b88c88b
--- /dev/null
+++ b/resume_tips.html
@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resume Tips - LinkedIn Resume Builder</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <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); 
+            margin: 0;
+            padding: 0;
+            line-height: 1.6;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+        
+        .gif {
+            margin-left: 100px;
+        }
+        
+        .footer {
+            width: 100%; 
+            background-color: var(--deep-teal); 
+            color: white;
+            padding: 13px 0;
+        }
+        
+        .footer-content{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        
+        }
+        
+        .footer-bottom{
+            text-align: center;
+            color: #fff; 
+            font-size: 14px;
+            margin: 0;
+            margin-bottom:10px;
+        }
+        
+        .footer a {
+            color: var(--soft-gold);
+            text-decoration: none;
+            font-size: 16px;  
+        }
+        
+         .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);
+         }
+        
+        
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        
+        .footer-section h3{
+            margin-bottom: 14px;
+            font-size: 28px;
+        }
+        /* footer section style ends */
+        
+        .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;
+        }
+        
+        .navbar  img{
+            width: 100px;
+            padding: 0px 6px;
+            margin-right: -64px;
+        }
+        
+        .navbar h1 {
+            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 */
+        }
+        
+        .navbar h1:hover {
+            color: var(--soft-gold); /* Color change on hover */
+        }
+        
+        .navbar ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            gap: 20px;
+            margin-right: 30px; /* Adjust this value to move the items left */
+        }
+        
+        .navbar ul li {
+            display: inline;
+        }
+        
+        .navbar ul li a {
+            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 */
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        
+        /* 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;
+            }
+        }
+        
+        
+        @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;
+            }
+        }
+        main {
+            max-width: 1200px;
+            margin: 30px auto;
+            padding: 0 20px;
+            text-align: justify;
+            font-size: 130%;
+        }
+
+        .summary, .education, .skills, .experience, .achieve, .tips {
+            background-color: var(--soft-gold);
+            color: var(--dark-slate);
+            padding: 30px;
+            margin-bottom: 25px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 4px 6px #2f4f4f;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .summary:hover, .education:hover, .skills:hover, .experience:hover, .achieve:hover, .tips:hover {
+            background-color: rgb(185, 210, 210); 
+            color: var(--deep-teal);
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px #2f4f4f;
+        }
+
+        .summary h2,.education h2,.skills h2,.experience h2,.achieve h2,.tips h2{
+            color: #003d4d;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        #main_heading {
+            text-align: center;
+            margin: 10px;
+            padding: 10px;
+            text-transform: uppercase;
+            font-weight: bold;
+            color: #003d4d;
+           
+        }
+        .logo {
+            font-size: 2rem; /* Decreased size for single line */
+            color: var(--deep-teal);
+            font-weight: 600;
+            margin-bottom:20px;
+            cursor: pointer; /* Change cursor to pointer */
+        }
+
+         #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;
+        }
+
+    </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">
+    <h1>Resum Resume</h1>
+    <nav class="navbar">
+        <div class="tabs-container"></div>
+        <a class="tab" href="#home">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>
+    </nav>
+</nav>
+
+    <h1 id="main_heading">Ace Your Resume: Essential Tips</h1>
+    <main>
+        <div class="summary">
+            <h2>How To Write a Strong Professional Summary?</h2>
+            <br>
+            <p>A resume summary, also known as a professional summary or summary statement, is a short description at the top of your resume that describes your experience, qualities and skills. Your professional summary is your first impression. Make it count!</p>
+            <br>
+            <ul>
+                <li>Length: Keep it concise—2-3 sentences long.</li>
+                <li>Customization: Tailor it for each job application using keywords from the job description.</li>
+                <li>Professional Background: Include your job title, years of experience, and relevant industries.</li>
+                <li>Core Skills: Mention both hard and soft skills pertinent to the role in short.</li>
+                <li>Value Proposition: Explain how you can contribute to the employer’s success.</li>
+            </ul>
+            <br>
+            <p>
+                <h3>Example: For a Recent Graduate</h3>
+
+                Motivated Computer Science graduate with hands-on software development experience through internships. Proficient in Python and Java, with a solid foundation in data structures and algorithms. Demonstrated strong analytical and problem-solving skills through academic projects, including a web application that enhanced user engagement by 30%. Eager to apply technical skills and passion for technology to contribute to a dynamic tech team while continuing to grow professionally.
+            <p>
+        </div>
+        <div class="education">
+            <h2>Education Section</h2>
+            <br>
+            <p>Your education background is important, especially if you are a recent graduate.</p>
+            <br>
+            <ul>
+                <li>Order: List your education in reverse chronological order (most recent first).</li>
+                <li>Degree: Specify your degree and major (if applicable).</li>
+                <li>Institution: Name the school, college, or university.</li>
+                <li>Graduation Date: Include month and year.</li>
+                <li>GPA/Percentage: Include if it's impressive.</li>
+            </ul>
+        </div>
+        <div class="skills">
+            <h2>Highlighting Skills Effectively</h2>
+            <br>
+            <p>Make sure to showcase the skills that set you apart.</p>
+            <br>
+            <ul>
+                <li>Relevance: Tailor skills to the job description.</li>
+                <li>Categorization: Categorize the skills into hard skills (field related skills) as well as soft skills (interpersonal skills).</li>
+                <li>Be honest: Do not list skills you don't possess.</li>
+                <li>Avoid Overloading: Limit to 8-12 relevant skills.</li>
+            </ul>
+        </div>
+        <div class="experience">
+            <h2>Detailing Work Experience</h2>
+            <br>
+            <p>Your work experience section should showcase your career journey.</p>
+            <br>
+            <ul>
+                <li>Reverse Chronological Order: List jobs starting with the most recent position.</li>
+                <li>Include Key Information: Job Title, Company Name, Location, Dates of Employment.</li>
+                <li>Quantify Achievements: Whenever possible, include numbers or metrics to showcase your accomplishments (e.g., “Increased sales by 20%”).</li>
+                <li>Projects: If applicable, mention significant projects and your role in them.</li>
+            </ul>
+        </div>
+        <div class="achieve">
+            <h2>Achievements and awards section</h2>
+            <br>
+            <p>Mentioning achievements on your resume demonstrates your skills, value, and contributions, helping you stand out to potential employers.</p>
+            <br>
+            <ul>
+                <li>Relevance: Include achievements that are relevant to the job you’re applying for. This could include academic honors, professional awards, or notable projects.</li>
+                <li>Specificity: Be specific about each achievement. Include the name of the award or recognition, the organization that granted it, and the date received.</li>
+                <li>Quantify When Possible: Use numbers to illustrate the impact of your achievements (e.g., “Awarded Employee of the Month for increasing sales by 25%”).</li>
+            </ul>
+        </div>
+
+        <div class="tips">
+            <h2>Additional Tips</h2>
+            <br>
+            <p>The way your resume looks can affect its readability.</p>
+            <br>
+            <ul>
+                <li>Use a clean and professional layout.</li>
+                <li>Keep your font size between 10-12 points.</li>
+                <li>Use consistent formatting for headings and bullet points.</li>
+                <li>Leave adequate white space for easy reading.</li>
+                <li>Avoid using jargons.</li>
+                <li>Double-check for typos, grammar mistakes, and inaccuracies.</li>
+            </ul>
+        </div>
+        
+    </main>
+    <!-- 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="#">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 class="footer-bottom">
+          <p>&copy; 2024 Resume Builder. All rights reserved.</p>
+        </div>
+      </footer>
+      <script>
+        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.addEventListener("change", function () {
+          if (toggler.checked) {
+            body.classList.add("sidebar-active");
+          } else {
+            body.classList.remove("sidebar-active");
+          }
+        });
+      </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index c303600..c3925ad 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,5 @@
-:root{
-
-    
+:root {
     --soft-teal: #003d4d;
-
-
 }
 
 * {
@@ -18,65 +14,76 @@
     transition: .2s linear;
 }
 
-html{
+html {
     font-size: 62.5%;
     scroll-behavior: smooth;
     scroll-padding-top: 6rem;
     overflow-x: hidden;
 }
 
-section{
+section {
     padding: 2rem 9%;
 }
 
 .heading {
     text-align: center;
     font-size: 4rem;
-    color: var(--dark-slate); /* Dark Slate color */
+    color: var(--dark-slate);
+    /* Dark Slate color */
     padding: 1rem;
     margin: 2rem 0;
-    background: var(--deep-teal); /* Changed background to Deep Teal */
+    background: var(--deep-teal);
+    /* Changed background to Deep Teal */
 }
 
 .heading span {
-    color: var(--soft-gold); /* Soft Gold for span */
+    color: var(--soft-gold);
+    /* Soft Gold for span */
 }
 
 .btn {
     display: inline-block;
     margin-top: 1rem;
     border-radius: 5rem;
-    background: var(--soft-gold); /* Soft Gold button background */
-    color: var(--dark-slate); /* Dark Slate text color */
+    background: var(--soft-gold);
+    /* Soft Gold button background */
+    color: var(--dark-slate);
+    /* Dark Slate text color */
     padding: 0.9rem 3.5rem;
     cursor: pointer;
     font-size: 1.7rem;
 }
 
 .btn:hover {
-    background: var(--deep-teal); /* Deep Teal on hover */
+    background: var(--deep-teal);
+    /* Deep Teal on hover */
 }
+
 .btn {
-  display: inline-block;
-  margin-top: 1rem;
-  border-radius: 5rem;
-  background: #ffffff;
-  color: #fff;
-  padding: 0.9rem 3.5rem;
-  cursor: pointer;
-  font-size: 1.7rem;
-  background-color: #3f10ea;
+    display: inline-block;
+    margin-top: 1rem;
+    border-radius: 5rem;
+    background: #ffffff;
+    color: #fff;
+    padding: 0.9rem 3.5rem;
+    cursor: pointer;
+    font-size: 1.7rem;
+    background-color: #3f10ea;
 }
+
 .btn:hover {
-  background: var(--purple);
-  background-color: #f03c0b;
-  color: white;
+    background: var(--purple);
+    background-color: #f03c0b;
+    color: white;
 }
 
 header {
     position: fixed;
-    top: 0; left: 0; right: 0;
-    background: var(--soft-teal); /*Changed background to Deep Teal */
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--soft-teal);
+    /*Changed background to Deep Teal */
     padding: 2rem 9%;
     display: flex;
     align-items: center;
@@ -91,11 +98,12 @@ header .logo {
     font-family: 'Poppins', sans-serif;
     color: #353047;
 
-    color: var(--off-white); /* White logo for contrast */
+    color: var(--off-white);
+    /* White logo for contrast */
     font-weight: bolder;
 }
 
-.logo img{
+.logo img {
     width: 100px;
     padding: 0px 6px;
     margin-right: -14px;
@@ -103,21 +111,24 @@ header .logo {
 
 header .logo:hover {
     font-size: 3rem;
-    color: var(--soft-gold); /* Soft Gold on hover for logo */
+    color: var(--soft-gold);
+    /* Soft Gold on hover for logo */
     font-weight: bolder;
     text-decoration: none;
 }
+
 header .logo {
-  font-size: 3rem;
-  color: white;
-  font-weight: bolder;
-  font-size: 2.5rem;
+    font-size: 3rem;
+    color: white;
+    font-weight: bolder;
+    font-size: 2.5rem;
 }
 
 
 
 header .logo span {
-    color: var(--off-white); /* Updated to match logo color */
+    color: var(--off-white);
+    /* Updated to match logo color */
 
 }
 
@@ -125,46 +136,47 @@ header .logo span {
 header .navbar a {
     font-size: 2rem;
     padding: 15px;
-    color: white
-
+    color: white;
 }
 
 header .navbar a:hover {
-    color: var(--soft-gold); /* Soft Gold on hover */
-    text-decoration: none; /* Ensure no underline by default */
+    color: var(--soft-gold);
+    /* Soft Gold on hover */
+    text-decoration: none;
+    /* Ensure no underline by default */
 }
 
 header .icons a {
     font-size: 2.5rem;
-    color: white
+    color: white;
     margin-left: 1.5rem;
 }
 
-  header .navbar a {
-  font-size: 2rem;
-  padding: 0 1.5rem;
-  color: #ffffff;
-  font-size: 1.8rem;
+header .navbar a {
+    font-size: 2rem;
+    padding: 0 1.5rem;
+    color: #ffffff;
+    font-size: 1.8rem;
 }
 
 header .navbar a:hover {
-  color: var(--red);
-  text-decoration: none;
-  color: #ffffff;
+    color: var(--red);
+    text-decoration: none;
+    color: #ffffff;
 }
 
 header .icons a {
-  font-size: 2.5rem;
-  color: #ffffff;
-  margin-left: 1.5rem;
-  font-size: 2.2rem;
+    font-size: 2.5rem;
+    color: #ffffff;
+    margin-left: 1.5rem;
+    font-size: 2.2rem;
 }
 
 header .icons a:hover {
-  color: var(--purple);
-  color: #ffffff;
-  text-decoration: none;
- }
+    color: var(--purple);
+    color: #ffffff;
+    text-decoration: none;
+}
 
 header #toggler {
     display: none;
@@ -173,7 +185,8 @@ header #toggler {
 header .fa-bars {
     font-size: 3rem;
 
-    color: var(--off-white); /* White for better visibility */
+    color: var(--off-white);
+    /* White for better visibility */
     border-radius: .5rem;
     padding: .5rem 1.5rem;
     cursor: pointer;
@@ -183,8 +196,10 @@ header .fa-bars {
 
 /* 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 */
+    background-color: var(--off-white);
+    /* Changed from #ffffff to Off-White */
+    color: var(--dark-slate);
+    /* Changed from #000000 to Dark Slate */
 }
 
 
@@ -195,76 +210,89 @@ body {
 }
 
 
-.home .content h3{
-  font-size: 5rem;
-  color: #333;
-  font-size: 4.5rem;
-  font-weight: 600;
-  line-height: 6rem;
+.home .content h3 {
+    font-size: 5rem;
+    color: #333;
+    font-size: 4.5rem;
+    font-weight: 600;
+    line-height: 6rem;
 }
+
 /* Add more styles as needed for other elements */
 
-.home{
+.home {
     display: flex;
     align-items: center;
     min-height: 100vh;
     background: url(images/background-home.png) no-repeat;
     background-size: cover;
     background-position: center;
-    animation: floatInFromRight 2s ease-out forwards; /* Image floats from right */
+    animation: floatInFromRight 2s ease-out forwards;
+    /* Image floats from right */
 }
+
 .home {
-  display: flex;
-  align-items: center;
-  min-height: 100vh;
-  background: url(images/background-home.png) no-repeat;
-  background-size: cover;
-  background-position: center;
-  min-height: 110vh;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+    background: url(images/background-home.png) no-repeat;
+    background-size: cover;
+    background-position: center;
+    min-height: 110vh;
 }
+
 /* Dark mode styles */
 .dark-mode {
     background-color: #121212;
     color: #ffffff;
-  }
+}
 
 .home .content {
     max-width: 50rem;
-    opacity: 0; /* Ensure the text is hidden initially */
-    animation: floatInFromTop 2s ease-out forwards; /* Text floats from top */
+    opacity: 0;
+    /* Ensure the text is hidden initially */
+    animation: floatInFromTop 2s ease-out forwards;
+    /* Text floats from top */
 }
 
 .home .content h3,
 .home .content p,
 .home .content a {
-    opacity: 0; /* Initially hidden */
-    animation: floatInFromTop 2s ease-out forwards; /* Text enters from the top */
-    animation-delay: 0.5s; /* Delay for a smooth entrance */
+    opacity: 0;
+    /* Initially hidden */
+    animation: floatInFromTop 2s ease-out forwards;
+    /* Text enters from the top */
+    animation-delay: 0.5s;
+    /* Delay for a smooth entrance */
 }
 
 .home .content p {
-  font-size: 1.5rem;
-  color: #999;
-  padding: 1rem 0;
-  line-height: 1.5;
-  margin-bottom: 2rem;
-  color: grey;
-}
-.home .content h3{
+    font-size: 1.5rem;
+    color: #999;
+    padding: 1rem 0;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    color: grey;
+}
+
+.home .content h3 {
     font-size: 5rem;
-    color: var(--dark-slate); /* Changed from #333 to Dark Slate */
+    color: var(--dark-slate);
+    /* Changed from #333 to Dark Slate */
 }
 
-.home .content span{
+.home .content span {
     font-size: 3.5rem;
-    color: var(--soft-gold); /* Changed from var(--purple) to Soft Gold */
+    color: var(--soft-gold);
+    /* Changed from var(--purple) to Soft Gold */
     padding: 1rem 0;
     line-height: 1.5;
 }
 
-.home .content p{
+.home .content p {
     font-size: 1.5rem;
-    color: #666; /* Changed from #999 to a darker gray for better readability */
+    color: #666;
+    /* Changed from #999 to a darker gray for better readability */
     padding: 1rem 0;
     line-height: 1.5;
 }
@@ -272,22 +300,28 @@ body {
 @keyframes floatInFromTop {
     0% {
         opacity: 0;
-        transform: translateY(0); /* Starting position from above */
+        transform: translateY(0);
+        /* Starting position from above */
     }
+
     100% {
         opacity: 1;
-        transform: translateY(0); /* Final position */
+        transform: translateY(0);
+        /* Final position */
     }
 }
 
 @keyframes floatInFromRight {
     0% {
         opacity: 0;
-        transform: translateX(50px); /* Starting position from the right */
+        transform: translateX(50px);
+        /* Starting position from the right */
     }
+
     100% {
         opacity: 1;
-        transform: translateX(0); /* Final position */
+        transform: translateX(0);
+        /* Final position */
     }
 }
 
@@ -299,13 +333,15 @@ body {
     --dark-slate: #2f4f4f;
     --soft-gold: #d9c79e;
 }
+
 .footer {
-    width: 100%; 
-    background-color: var(--deep-teal); 
+    width: 100%;
+    background-color: var(--deep-teal);
     color: white;
     padding: 13px 0;
 }
-.footer-content{
+
+.footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
@@ -321,19 +357,28 @@ body {
     border-bottom: 2px solid #3f10ea;
     padding-bottom: 10px;
 }
+
 .ul{
    padding: 0;
    list-style: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
 
+.ul {
+    padding: 0;
+    list-style: none;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+
+
 }
-.footer-bottom{
+
+.footer-bottom {
     text-align: center;
-    color: #fff; 
+    color: #fff;
     font-size: 14px;
     margin: 0px;
-    margin-top:10px;
+    margin-top: 10px;
 }
 
 
@@ -362,28 +407,26 @@ body {
 }
 
 .footer .footer-section .social-icons a:hover {
-    color: white;
-    text-decoration: none;
-
     color: #3f10ea;
- main
+    text-decoration: none;
 }
 
 .footer a {
     color: var(--soft-gold);
     text-decoration: none;
-    font-size: 16px;  
+    font-size: 16px;
 }
 
- .social-icons{
+.social-icons {
     display: flex;
     justify-content: space-between;
-    margin-top:20px
- }
- .social-icons a:hover{
+    margin-top: 20px
+}
+
+.social-icons a:hover {
     color: var(--light-grey);
     transform: scale(1.2) translateY(-5px);
- }
+}
 
 
 
@@ -391,10 +434,11 @@ body {
     text-decoration: underline;
 }
 
-.footer-section h3{
+.footer-section h3 {
     margin-bottom: 14px;
     font-size: 28px;
 }
+
 /* footer section style ends */
 
 
@@ -416,7 +460,7 @@ body {
     .home {
         background-position: left;
     }
-    
+
 }
 
 @media (max-width: 768px) {
@@ -429,26 +473,30 @@ body {
         top: 100%;
         left: 0;
         right: 0;
-        background: #f9f9f9; /* Updated background to a softer light color */
+        background: #f9f9f9;
+        /* Updated background to a softer light color */
         border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }
 
-    header #toggler:checked ~ .navbar {
+    header #toggler:checked~.navbar {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
 
     header .navbar a {
         margin: 1.5rem;
         padding: 1.5rem;
-        background: #ffffff; /* Updated to a cleaner white */
+        background: #ffffff;
+        /* Updated to a cleaner white */
         border: 0.1rem solid rgba(0, 0, 0, 0.1);
-        color: var(--dark-slate); /* Changed text color to Dark Slate */
+        color: var(--dark-slate);
+        /* Changed text color to Dark Slate */
         display: block;
     }
 
     header .navbar a:hover {
-        color: var(--soft-gold); /* Hover color set to Soft Gold */
+        color: var(--soft-gold);
+        /* Hover color set to Soft Gold */
     }
 
     .home .content h3 {
@@ -462,7 +510,7 @@ body {
     .icons-container .icons h3 {
         font-size: 2rem;
     }
-    
+
     .icons-container .icons span {
         font-size: 1.7rem;
     }
@@ -470,22 +518,22 @@ body {
     .footer-section h3 {
         font-size: 18px;
     }
-    
+
     .footer a {
         font-size: 13px;
     }
 
     .footer-section {
         margin-bottom: 0;
-        gap:18px;
+        gap: 18px;
     }
 
-    .footer-bottom{
+    .footer-bottom {
         font-size: 12px;
         margin: 0px;
-        margin-top:8px;
+        margin-top: 8px;
     }
-     
+
 
 }
 
@@ -497,39 +545,40 @@ body {
     .heading {
         font-size: 3rem;
     }
-    
+
 
     .footer-section h3 {
         font-size: 14px;
     }
-    
+
     .footer a {
         font-size: 11px;
     }
 
     .footer-section {
         margin-bottom: 0;
-        
+
     }
 
-    .footer-bottom{
+    .footer-bottom {
         font-size: 10px;
         margin: 0px;
-        margin-top:5px;
+        margin-top: 5px;
     }
 }
 
 
 .tab:hover {
-    background-color: rgba(0, 0, 0, 0.8); 
+    background-color: rgba(0, 0, 0, 0.8);
     color: blue;
 }
 
 
 .tab.active {
-    color: blue; 
-    font-weight: bold; 
+    color: blue;
+    font-weight: bold;
 }
+
 .navbar {
     position: relative;
 }
@@ -547,8 +596,8 @@ body {
     padding: 10px 20px;
     font-size: 19px;
     color: black;
-    
-   
+
+
     border-radius: 4px;
     transition: background-color 0.3s;
 }
@@ -563,71 +612,78 @@ body {
     width: 24px;
     background: black;
     border-radius: 50%;
-    pointer-events: none; 
-    transition: all 0.3s ease; 
-    opacity: 0; 
+    pointer-events: none;
+    transition: all 0.3s ease;
+    opacity: 0;
 }
 
 /* Features section */
-.features h2{
-  font-weight: 600;
+.features h2 {
+    font-weight: 600;
 }
-.features-card img{
-  width:80%;
-  height: 40%;
-  object-fit: cover;
+
+.features-card img {
+    width: 80%;
+    height: 40%;
+    object-fit: cover;
 }
-.features-card h3{
-  color: #003d4d;
+
+.features-card h3 {
+    color: #003d4d;
 }
-.features-card p{
-  margin-bottom: 0;
-  color: grey;
+
+.features-card p {
+    margin-bottom: 0;
+    color: grey;
 }
 
 /* testimonials features section */
-.testimonials h2{
-  font-weight: 600;
+.testimonials h2 {
+    font-weight: 600;
 }
-.testimonial-card img{
-  height: 9rem;
-  width: 9rem;
-  border: 0.3rem solid white;
+
+.testimonial-card img {
+    height: 9rem;
+    width: 9rem;
+    border: 0.3rem solid white;
 }
-.testimonial-card h3{
-  color: #003d4d;
-  font-size: 2rem;
+
+.testimonial-card h3 {
+    color: #003d4d;
+    font-size: 2rem;
 }
-.testimonial-card p{
-  color: grey;
+
+.testimonial-card p {
+    color: grey;
 
 }
 
 /* Footer section */
-.footer{
-  background-color: #003d4d;
-  padding-bottom: 2rem;
-}
-.footer-section h3{
-  font-size: 2.5rem;
-}
-.footer-section ul li{
-  font-size: 1.5rem;
-  font-weight: 500;
+.footer {
+    background-color: #003d4d;
+    padding-bottom: 2rem;
 }
-    .footer-section ul li a{
-      color:#000;
+
+.footer-section h3 {
+    font-size: 2.5rem;
 }
-    
-.footer-bottom p{
-  font-size: 1.5rem;
-  font-weight: 500;
+
+.footer-section ul li {
+    font-size: 1.5rem;
+    font-weight: 500;
 }
 
-.footer-bottom{
-  display: flex;
-  justify-content: center;
-  align-content: center;
+.footer-section ul li a {
+    color: #000;
 }
 
+.footer-bottom p {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
 
+.footer-bottom {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
\ No newline at end of file
