From 4cbc4682a7cd6c52c1901217247dc21df7da230b Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Mon, 28 Oct 2024 23:21:27 +0530
Subject: [PATCH 1/8] done

---
 .../components/header/header.component.html   | 49 ++++---------------
 .../components/navbar/navbar.component.html   |  6 ++-
 src/index.html                                | 16 +++---
 3 files changed, 22 insertions(+), 49 deletions(-)
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 91929e2..e19a0f3 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html lang="en">
 
 <head>
   <meta charset="UTF-8">
@@ -9,6 +10,12 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.6.10/i18next.min.js"></script>
+  <!-- <iframe
+src="https://www.chatbase.co/chatbot-iframe/L51AYDMWE0tDQxPXKTgeX"
+width="100%"
+style="height: 100%; min-height: 700px"
+frameborder="0"
+></iframe> -->
   <style>
     /* .canvas_1 {
       color: #333;
@@ -70,51 +77,17 @@
   height: 25px;
   width: 25px;
 }
-  * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html, body {
-            height: 100%; /* Ensure full height */
-            overflow: hidden; /* Prevent body scrolling */
-        }
-
-        /* For WebKit browsers (Chrome, Safari, Edge) */
-        ::-webkit-scrollbar {
-            width: 12px; /* Width of the scrollbar */
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #f0f0f0; /* Background of the track */
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
-            border-radius: 10px; /* Rounded corners for the scrollbar thumb */
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
-        }
-
-        /* For Firefox */
-        html {
-            scrollbar-width: thin; /* Makes the scrollbar thin */
-            scrollbar-color: #ff66b2 #800ab3; /* Color of the thumb and track */
-        }
 
 
   </style>
 </head>
 
+<body>
+
   <header>
     <nav style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; background-color: #1a1a2e;">
       <div class="logo" style="display: flex; align-items: center;">
-        <img src='/a.png' alt="Logo" 
-        style="height: 70px; width: 75px; border-radius: 50%; margin-right: 10px; object-fit: contain; image-rendering: auto; filter: none;"/>
-
+        <img src="a.png" alt="Logo" style="height: 70px; width: 75px; border-radius: 50%; margin-right: 10px;" />
         <a href="#hero" style="color: white; font-size: 1.5rem; text-decoration: none; white-space: nowrap;">GraphExplorer Pro</a>
       </div>
   
@@ -289,12 +262,10 @@ <h3 data-i18n="undirected-graphs">Undirected Graphs</h3>
         </div>
         <div class="graph-item">
           <div class="graph-icon">⚖️</div>
-          <a href="../Graphs/weightedgraph.html">
           <h3 data-i18n="weighted-graphs">Weighted Graphs</h3>
         </div>
         <div class="graph-item">
           <div class="graph-icon">🌳</div>
-          <a href="../Graphs/tree.html">
           <h3 data-i18n="trees">Trees</h3>
         </div>
         <div class="graph-item">
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index b49edc9..aa25856 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -50,10 +50,12 @@
     </script>
     <script>
         window.embeddedChatbotConfig = {
-            chatbotId: "oA_rXZ5BFgXbM-YwcC0vx",
+            chatbotId:"L51AYDMWE0tDQxPXKTgeX",
             domain: "www.chatbase.co"
         };
     </script>
-    <script src="https://www.chatbase.co/embed.min.js" chatbotId="oA_rXZ5BFgXbM-YwcC0vx" domain="www.chatbase.co"
+    <script src="https://www.chatbase.co/embed.min.js" chatbotId="L51AYDMWE0tDQxPXKTgeX" domain="www.chatbase.co"
         defer></script>
+    
+          
 </div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index fb23e89..c3096cf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -516,14 +516,14 @@ <h2>Contact Us</h2>
     </script>
 
 
-    <script>
-      window.embeddedChatbotConfig = {
-        chatbotId: "oA_rXZ5BFgXbM-YwcC0vx",
-        domain: "www.chatbase.co"
-      }
-    </script>
-    <script src="https://www.chatbase.co/embed.min.js" chatbotId="oA_rXZ5BFgXbM-YwcC0vx" domain="www.chatbase.co"
-      defer></script>
+<script>
+  window.embeddedChatbotConfig = {
+      chatbotId:"L51AYDMWE0tDQxPXKTgeX",
+      domain: "www.chatbase.co"
+  };
+</script>
+<script src="https://www.chatbase.co/embed.min.js" chatbotId="L51AYDMWE0tDQxPXKTgeX" domain="www.chatbase.co"
+  defer></script>
 
     <script>
       const scrollButton = document.getElementById('scrollToTopBtn');

From e2c68b9238060c3e44dde96932111bb0e7a5cdfd Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Tue, 29 Oct 2024 00:49:43 +0530
Subject: [PATCH 2/8] done

---
 .../components/bfs-page/bfs-page.component.ts    |  7 +++++--
 .../components/dfs-page/dfs-page.component.ts    | 14 ++++++++++++--
 src/app/components/faq/faq.component.ts          | 16 +++++++++++++++-
 .../login-page/login-page.component.html         |  2 +-
 src/app/components/quiz/quiz.component.ts        | 14 +++++++++++---
 src/app/components/reviews/reviews.component.ts  |  9 +++++++--
 src/index.html                                   |  4 ++--
 7 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/app/components/bfs-page/bfs-page.component.ts b/src/app/components/bfs-page/bfs-page.component.ts
index 8a9c811..3851e99 100644
--- a/src/app/components/bfs-page/bfs-page.component.ts
+++ b/src/app/components/bfs-page/bfs-page.component.ts
@@ -2,6 +2,7 @@ import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { AuthService } from '../../services/auth.service';
+import { Title } from '@angular/platform-browser';
 import { NavbarComponent } from '../navbar/navbar.component';
 
 @Component({
@@ -24,9 +25,11 @@ export class BfsPageComponent implements AfterViewInit, OnInit {
   isDropdownOpen: boolean = false;
   private finalPath: number[] = []; // To store the final path taken
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService,private titleService: Title) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.titleService.setTitle('GraphExplorer Pro | BFS');
+  }
 
   ngAfterViewInit(): void {
     this.bfsCanvas = document.getElementById('bfs-canvas') as HTMLCanvasElement;
diff --git a/src/app/components/dfs-page/dfs-page.component.ts b/src/app/components/dfs-page/dfs-page.component.ts
index 985972e..50280a7 100644
--- a/src/app/components/dfs-page/dfs-page.component.ts
+++ b/src/app/components/dfs-page/dfs-page.component.ts
@@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { AuthService } from '../../services/auth.service';
 import { NavbarComponent } from '../navbar/navbar.component';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-dfs-page',
@@ -12,6 +13,15 @@ import { NavbarComponent } from '../navbar/navbar.component';
   styleUrls: ['./dfs-page.component.css'],
 })
 export class DfsPageComponent implements AfterViewInit, OnInit {
+
+  // constructor(private titleService: Title) { }
+
+  // ngOnInit(): void {
+    
+  //   this.titleService.setTitle('GraphExplorer | DFS');
+  // }
+
+
   private nodes: { label: string; x: number; y: number }[] = [];
   private edges: [number, number][] = [];
 
@@ -24,10 +34,10 @@ export class DfsPageComponent implements AfterViewInit, OnInit {
   customEdgeInput: string = '';
   isDropdownOpen: boolean = false;
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService,private titleService: Title) {}
 
   ngOnInit(): void {
-    // No need to access the canvas here
+    this.titleService.setTitle('GraphExplorer Pro | DFS');
   }
 
   ngAfterViewInit(): void {
diff --git a/src/app/components/faq/faq.component.ts b/src/app/components/faq/faq.component.ts
index 308c872..b29aa3d 100644
--- a/src/app/components/faq/faq.component.ts
+++ b/src/app/components/faq/faq.component.ts
@@ -1,5 +1,7 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { NavbarComponent } from '../navbar/navbar.component';
+import { Title } from '@angular/platform-browser';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-faq',
@@ -9,6 +11,14 @@ import { NavbarComponent } from '../navbar/navbar.component';
   styleUrls: ['./faq.component.css']
 })
 export class FaqComponent implements AfterViewInit {
+
+  constructor(private authService: AuthService,private titleService: Title) {}
+
+  ngOnInit(): void {
+    this.titleService.setTitle('GraphExplorer Pro | FAQ');
+  }
+
+
   ngAfterViewInit() {
     // const faqItems = document.querySelectorAll<HTMLElement>('.faq-item');
     // faqItems.forEach((item) => {
@@ -27,6 +37,10 @@ export class FaqComponent implements AfterViewInit {
     //     });
     //   }
     // });
+
+
+   
+
     document.addEventListener('DOMContentLoaded', () => {
       const togglers = document.querySelectorAll('[data-toggle]');
       
diff --git a/src/app/components/login-page/login-page.component.html b/src/app/components/login-page/login-page.component.html
index ecb49e5..b16de83 100644
--- a/src/app/components/login-page/login-page.component.html
+++ b/src/app/components/login-page/login-page.component.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Login Form</title>
+  <title>GraphExplorer|LoginForm</title>
   <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
 </head>
diff --git a/src/app/components/quiz/quiz.component.ts b/src/app/components/quiz/quiz.component.ts
index 121a6a0..020e178 100644
--- a/src/app/components/quiz/quiz.component.ts
+++ b/src/app/components/quiz/quiz.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { NavbarComponent } from '../navbar/navbar.component';
+import { AuthService } from '../../services/auth.service';
+import { Title } from '@angular/platform-browser';
 
 interface Question {
   text: string;
@@ -31,6 +33,14 @@ interface Question {
   ],
 })
 export class QuizComponent implements OnInit {
+
+
+  constructor(private authService: AuthService,private titleService: Title) {}
+
+  ngOnInit(): void {
+    this.titleService.setTitle('GraphExplorer Pro | Quiz');
+    this.shuffleQuestions();
+  }
   questions: Question[] = [
     { text: "In a complete graph with n vertices, how many edges are there?", options: ["n", "n-1", "n(n-1)/2", "2^n"], correctAnswer: 2, difficulty: "easy" },
     { text: "What is the chromatic number of a planar graph?", options: ["2", "3", "4", "5"], correctAnswer: 2, difficulty: "easy" },
@@ -52,9 +62,7 @@ export class QuizComponent implements OnInit {
   quizStarted: boolean = false; // Track whether the quiz has started
   animationState: string = 'normal';
 
-  ngOnInit() {
-    this.shuffleQuestions();
-  }
+  
 
   get currentQuestion(): Question {
     return this.questions[this.currentQuestionIndex];
diff --git a/src/app/components/reviews/reviews.component.ts b/src/app/components/reviews/reviews.component.ts
index d402abf..b690f88 100644
--- a/src/app/components/reviews/reviews.component.ts
+++ b/src/app/components/reviews/reviews.component.ts
@@ -5,6 +5,8 @@ import { CommonModule } from '@angular/common';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { AuthService } from '../../services/auth.service';
 
 interface Review {
   id: number;
@@ -40,10 +42,13 @@ export class ReviewComponent implements OnInit {
   newQuestion: Partial<Question> = {};
   newReply: Partial<Reply> = {};
 
-  constructor(private http: HttpClient) {}
+ 
+  constructor(private http: HttpClient,private authService: AuthService,private titleService: Title) {}
 
-  ngOnInit() {
+  ngOnInit():void {
     this.fetchReviews();
+    this.titleService.setTitle('GraphExplorer Pro | Reviews');
+    
   }
 
   fetchReviews() {
diff --git a/src/index.html b/src/index.html
index c3096cf..7cf9f83 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>EccomPRJ - Real-Time Collaboration</title>
+  <title>GraphExplorer Pro</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/png" sizes="32x32"
@@ -820,4 +820,4 @@ <h2>What Our Users Say</h2>
 
   </body>
 
-</html>
+</html>
\ No newline at end of file

From 4538b47f5c9662adb19d48cadafcbb8f3173de02 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Tue, 29 Oct 2024 01:13:52 +0530
Subject: [PATCH 3/8] done

---
 src/app/components/bfs-page/bfs-page.component.css   | 10 +++++++++-
 src/app/components/dfs-page/dfs-page.component.css   | 10 +++++++++-
 src/app/components/faq/faq.component.css             | 12 ++++++++----
 src/app/components/navbar/navbar.component.css       |  3 +++
 src/app/components/quiz/quiz.component.css           |  7 +++++++
 src/app/components/realworld/realworld.component.css | 11 +++++++++++
 src/app/components/resources/resources.component.css | 11 +++++++++++
 src/app/components/reviews/reviews.component.css     | 11 +++++++++++
 src/app/components/roadmap/roadmap.component.css     | 10 ++++++++++
 src/index.html                                       |  8 ++++++++
 src/styles.css                                       |  6 +++++-
 11 files changed, 92 insertions(+), 7 deletions(-)

diff --git a/src/app/components/bfs-page/bfs-page.component.css b/src/app/components/bfs-page/bfs-page.component.css
index 1f0f1db..68da060 100644
--- a/src/app/components/bfs-page/bfs-page.component.css
+++ b/src/app/components/bfs-page/bfs-page.component.css
@@ -1,10 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+
 body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   background-color: #f5f5f5;
-  font-family: Arial, sans-serif;
   color: #333;
 }
 
diff --git a/src/app/components/dfs-page/dfs-page.component.css b/src/app/components/dfs-page/dfs-page.component.css
index d8dcfbf..3182ce5 100644
--- a/src/app/components/dfs-page/dfs-page.component.css
+++ b/src/app/components/dfs-page/dfs-page.component.css
@@ -1,10 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+
 body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   background-color: #f5f5f5;
-  font-family: Arial, sans-serif;
   color: #333;
 }
 
diff --git a/src/app/components/faq/faq.component.css b/src/app/components/faq/faq.component.css
index 9c37a3b..82e0b73 100644
--- a/src/app/components/faq/faq.component.css
+++ b/src/app/components/faq/faq.component.css
@@ -1,9 +1,13 @@
 
-
-
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
 body {
-font-family: Arial, sans-serif;  
-  /* max-width: 800px; */
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
   width: 100vw;
   margin:auto 0;
   display:flex;
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index 37be406..76d2da1 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -1,4 +1,7 @@
 /* Reset and Base Styles */
+
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
 body {
   font-family: Arial, sans-serif;
   margin: 0;
diff --git a/src/app/components/quiz/quiz.component.css b/src/app/components/quiz/quiz.component.css
index 4c6418a..1b2aca3 100644
--- a/src/app/components/quiz/quiz.component.css
+++ b/src/app/components/quiz/quiz.component.css
@@ -1,3 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+
 .quiz-container {
   display: flex;
   flex-direction: column;
diff --git a/src/app/components/realworld/realworld.component.css b/src/app/components/realworld/realworld.component.css
index 64b43d3..ec00ad9 100644
--- a/src/app/components/realworld/realworld.component.css
+++ b/src/app/components/realworld/realworld.component.css
@@ -1,3 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
+}
+
 :host {
   display: block;
   background-color: #f0f4f8;
diff --git a/src/app/components/resources/resources.component.css b/src/app/components/resources/resources.component.css
index 7f6df4d..4bb38e5 100644
--- a/src/app/components/resources/resources.component.css
+++ b/src/app/components/resources/resources.component.css
@@ -1,3 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
+}
+
 :host {
   display: block;
   background-color: #f0f4f8;
diff --git a/src/app/components/reviews/reviews.component.css b/src/app/components/reviews/reviews.component.css
index 1f184bc..522866b 100644
--- a/src/app/components/reviews/reviews.component.css
+++ b/src/app/components/reviews/reviews.component.css
@@ -1,3 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
+}
+
 .review-container {
   width: 100vw;
   height: 100vh;
diff --git a/src/app/components/roadmap/roadmap.component.css b/src/app/components/roadmap/roadmap.component.css
index 79fa658..33fb45b 100644
--- a/src/app/components/roadmap/roadmap.component.css
+++ b/src/app/components/roadmap/roadmap.component.css
@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500; /* Medium weight for specific elements */
+  font-style: normal; /* Normal font style */
+}
+body {
+  font-family: "Montserrat", sans-serif; /* Apply Montserrat to the body for all text */
+  font-weight: 400; /* Regular weight for body text */
+}
 .roadmap-container {
   max-width: 100%;
   margin: 56px auto;
diff --git a/src/index.html b/src/index.html
index 7cf9f83..b80ef40 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,9 +6,17 @@
   <title>GraphExplorer Pro</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Montserrat:wght@400;700&family=Lato:wght@400;700&family=Source+Code+Pro:wght@400&family=Poppins:wght@400;700&family=Raleway:wght@400;700&family=Avenir:wght@400;700&display=swap" rel="stylesheet">
+
   <link rel="icon" type="image/png" sizes="32x32"
     href="https://img.freepik.com/free-vector/human-group-connecting-topology-concept-background-design_1017-53324.jpg?w=826&t=st=1729248294~exp=1729248894~hmac=3865b1d5630a5be3b7c74044d086d128aeb23412766f39a882e977845f837603">
   <style>
+.montserrat-unique {
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+}
     .scrollToTop {
       position: fixed;
       bottom: 80px;
diff --git a/src/styles.css b/src/styles.css
index e7da55c..0f6f301 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,12 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: Arial, sans-serif;
+   /* // font-family: 'Roboto', Arial, sans-serif; */
 }
 
 ::-webkit-scrollbar {

From 65066f0a3799e244b1ad4b141b6fc8e3a0ee14d4 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Tue, 29 Oct 2024 01:28:30 +0530
Subject: [PATCH 4/8] done

---
 src/app/components/header/header.component.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index e19a0f3..9c2d32f 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -98,14 +98,14 @@
       </div>
   
       <div class="nav-links" id="nav-links" style="display: flex; gap: 20px;">
-        <a class="nav-item" href="#features" data-i18n="features" style="color: white; text-decoration: none; font-size: 1rem;">Features</a>
-        <a class="nav-item" href="#graph-types" data-i18n="graph-types" style="color: white; text-decoration: none; font-size: 1rem;">Graph Types</a>
-        <a class="nav-item" href="#algorithms" data-i18n="algorithms" style="color: white; text-decoration: none; font-size: 1rem;">Algorithms</a>
-        <a class="nav-item" href="#visualizer" data-i18n="visualizer" style="color: white; text-decoration: none; font-size: 1rem;">Visualizer</a>
-        <a class="nav-item" href="/faq" data-i18n="faq" style="color: white; text-decoration: none; font-size: 1rem;">FAQ</a>
-        <a class="nav-item" href="/quiz" data-i18n="quiz" style="color: white; text-decoration: none; font-size: 1rem;">Quiz</a>
-        <a class="nav-item" href="/questions" data-i18n="questions" style="color: white; text-decoration: none; font-size: 1rem;">Questions</a>
-        <a class="nav-item" href="/review" data-i18n="reviews" style="color: white; text-decoration: none; font-size: 1rem;">Reviews</a>
+        <a class="nav-item" href="#features" data-i18n="features" style="color: white; text-decoration: none; font-size: 1rem;">⚙️Features</a>
+        <a class="nav-item" href="#graph-types" data-i18n="graph-types" style="color: white; text-decoration: none; font-size: 1rem;"> 📈Graph Types</a>
+        <a class="nav-item" href="#algorithms" data-i18n="algorithms" style="color: white; text-decoration: none; font-size: 1rem;">💻Algorithms</a>
+        <a class="nav-item" href="#visualizer" data-i18n="visualizer" style="color: white; text-decoration: none; font-size: 1rem;">📊Visualizer</a>
+        <a class="nav-item" href="/faq" data-i18n="faq" style="color: white; text-decoration: none; font-size: 1rem;"> 🗨️ FAQ</a>
+        <a class="nav-item" href="/quiz" data-i18n="quiz" style="color: white; text-decoration: none; font-size: 1rem;">📝Quiz</a>
+        <a class="nav-item" href="/questions" data-i18n="questions" style="color: white; text-decoration: none; font-size: 1rem;">❓Questions</a>
+        <a class="nav-item" href="/review" data-i18n="reviews" style="color: white; text-decoration: none; font-size: 1rem;">⭐Reviews</a>
         <a class="nav-item github-link" href="https://github.com/sakeel-103/DFS-BFS-Graph-Travers" target="_blank" style="display: flex; align-items: center;">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff">
             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />

From 56c930055b89be6bb675a746e383b0f7e48f50c9 Mon Sep 17 00:00:00 2001
From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:38:05 +0530
Subject: [PATCH 5/8] added acyclic graph

---
 src/app/components/Graphs/acyclicgraph.html | 219 ++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 src/app/components/Graphs/acyclicgraph.html

diff --git a/src/app/components/Graphs/acyclicgraph.html b/src/app/components/Graphs/acyclicgraph.html
new file mode 100644
index 0000000..bc3d6fa
--- /dev/null
+++ b/src/app/components/Graphs/acyclicgraph.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Acyclic Graph Visualization</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
+    <style>
+        /* Professional and Neat Greyish Black and White Theme */
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #2b2b2b;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        h1 {
+            color: #ffffff;
+            font-size: 26px;
+            margin-bottom: 10px;
+        }
+
+        .section {
+            max-width: 800px;
+            text-align: center;
+            margin-bottom: 25px;
+            font-size: 18px;
+            line-height: 1.7;
+        }
+
+        .section h2 {
+            color: #ffffff;
+            font-size: 22px;
+            margin-bottom: 8px;
+        }
+
+        #graphContainer {
+            width: 100%;
+            max-width: 800px;
+            height: 500px;
+            border-radius: 10px;
+            border: 2px solid #ccc;
+            background-color: #444;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+            position: relative;
+            margin-bottom: 30px;
+        }
+
+        .node {
+            fill: #ccc;
+            stroke: #fff;
+            stroke-width: 1.5px;
+            cursor: grab;
+        }
+
+        .link {
+            stroke: #999;
+            stroke-opacity: 0.8;
+        }
+
+        .node:hover {
+            fill: #ff7f50;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin: 10px;
+            background-color: #5a5a5a;
+            color: #e0e0e0;
+            border: none;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #7a7a7a;
+        }
+
+        .highlight {
+            color: #00ffae;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Acyclic Graph Visualization</h1>
+
+    <div class="section">
+        <p>
+            An <span class="highlight">Acyclic Graph</span> is a directed graph with no cycles. It represents a structure where each node points to other nodes, but no path leads back to the starting node.
+        </p>
+    </div>
+
+    <div class="section">
+        <h2>Key Properties of Acyclic Graphs</h2>
+        <ul>
+            <li><strong>Direction:</strong> Each edge has a direction, indicated by arrows from one node to another.</li>
+            <li><strong>Nodes:</strong> The circles represent entities in the graph.</li>
+            <li><strong>Edges:</strong> The arrows represent directed connections between nodes.</li>
+            <li><strong>No Cycles:</strong> Paths in an acyclic graph do not form cycles, meaning no node can loop back to itself.</li>
+            <li><strong>Path:</strong> A sequence of directed edges connecting nodes in a particular direction.</li>
+        </ul>
+    </div>
+
+    <div class="section">
+        <h2>Interactive Acyclic Graph</h2>
+        <p>Hover over nodes to see a highlighted effect. Click and drag nodes to reposition them!</p>
+    </div>
+
+    <!-- Container for the graph -->
+    <div id="graphContainer"></div>
+
+    <div class="section">
+        <button onclick="generateGraph()">Regenerate Graph</button>
+    </div>
+
+    <script>
+        const graphContainer = d3.select('#graphContainer');
+        const width = graphContainer.node().clientWidth;
+        const height = graphContainer.node().clientHeight;
+
+        function generateGraph() {
+            const nodes = [
+                { id: "A" }, { id: "B" }, { id: "C" },
+                { id: "D" }, { id: "E" }, { id: "F" }
+            ];
+            const links = [
+                { source: "A", target: "B" },
+                { source: "A", target: "C" },
+                { source: "B", target: "D" },
+                { source: "C", target: "E" },
+                { source: "D", target: "F" },
+                { source: "E", target: "F" }
+            ];
+
+            graphContainer.select("svg").remove();
+
+            const simulation = d3.forceSimulation(nodes)
+                .force("link", d3.forceLink(links).id(d => d.id).distance(120))
+                .force("charge", d3.forceManyBody().strength(-300))
+                .force("center", d3.forceCenter(width / 2, height / 2));
+
+            const svg = graphContainer.append("svg")
+                .attr("width", width)
+                .attr("height", height);
+
+            svg.append("defs").append("marker")
+                .attr("id", "arrow")
+                .attr("viewBox", [0, 0, 10, 10])
+                .attr("refX", 12)
+                .attr("refY", 5)
+                .attr("markerWidth", 6)
+                .attr("markerHeight", 6)
+                .attr("orient", "auto-start-reverse")
+                .append("path")
+                .attr("d", "M0,0 L10,5 L0,10 Z")
+                .attr("fill", "#999");
+
+            const link = svg.selectAll(".link")
+                .data(links)
+                .enter().append("line")
+                .attr("class", "link")
+                .attr("stroke-width", 2)
+                .attr("marker-end", "url(#arrow)");
+
+            const node = svg.selectAll(".node")
+                .data(nodes)
+                .enter().append("circle")
+                .attr("class", "node")
+                .attr("r", 8)
+                .call(d3.drag()
+                    .on("start", dragstarted)
+                    .on("drag", dragged)
+                    .on("end", dragended));
+
+            simulation.nodes(nodes).on("tick", () => {
+                link
+                    .attr("x1", d => d.source.x)
+                    .attr("y1", d => d.source.y)
+                    .attr("x2", d => d.target.x)
+                    .attr("y2", d => d.target.y);
+
+                node
+                    .attr("cx", d => d.x)
+                    .attr("cy", d => d.y);
+            });
+
+            simulation.force("link").links(links);
+        }
+
+        function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+
+        function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+
+        generateGraph();
+    </script>
+</body>
+
+</html>

From 3a1ef12a66efd1c1e800c7dc7293f23ff2e5d531 Mon Sep 17 00:00:00 2001
From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:41:00 +0530
Subject: [PATCH 6/8] Update header.component.html

---
 src/app/components/header/header.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 91929e2..52bd5f5 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -299,6 +299,7 @@ <h3 data-i18n="trees">Trees</h3>
         </div>
         <div class="graph-item">
           <div class="graph-icon">⇉</div>
+           <a href="../Graphs/acyclicgraph.html">
           <h3 data-i18n="directed-acyclic-graphs">Directed Acyclic Graphs</h3>
         </div>
       </div>

From 231953f2106c2209b3701dc5fb26d7ee0802c078 Mon Sep 17 00:00:00 2001
From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:58:04 +0530
Subject: [PATCH 7/8] Update index.html

---
 src/index.html | 135 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 101 insertions(+), 34 deletions(-)

diff --git a/src/index.html b/src/index.html
index fb23e89..dd2e168 100644
--- a/src/index.html
+++ b/src/index.html
@@ -438,44 +438,111 @@ <h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
             &copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
           </p>
 
-  <div class="footer">
-    <div class="footer-content">
-      <!-- Platform Links Section -->
-      <div class="footer-links">
-        <a href="#about">About DFS-BFS</a>
-        <a href="#courses">Courses</a>
-        <a href="#blogs">Blogs</a>
-        <a href="#contact">Contact Us</a>
-      </div>
-  
-      <!-- Newsletter Section -->
-      <div class="newsletter-container">
-        <h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
-        <p>Subscribe to our newsletter for the latest on algorithms, tips, and coding challenges.</p>
-        <form onsubmit="handleSubmit(event)">
-          <input type="email" placeholder="Enter your email" id="emailInput" required name="email" />
-          <button type="submit">Subscribe</button>
-        </form>
-      </div>
-  
-      <!-- Social Media Section -->
-      <div class="footer-links">
-        <h3>Follow Us</h3>
-        <div class="social-icons">
-          <a href="https://x.com/dfs-bfs" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
-          <a href="https://www.linkedin.com/company/dfs-bfs" target="_blank" title="LinkedIn"><i
-              class="fab fa-linkedin"></i></a>
-          <a href="../contributor/contributor.html" title="Contributors">Our Contributors</a>
+          <!-- FAQ Modal -->
+          <div id="faqModal" class="modal">
+            <div class="modal-content">
+              <span class="close" id="faqClose">&times;</span>
+              <h2>Frequently Asked Questions</h2>
+              <div class="faq-item">
+                <h3>What is DFS-BFS?</h3>
+                <p>DFS-BFS is a learning platform focused on Data Structures and Algorithms, providing interactive courses and real-time collaboration features.</p>
+              </div>
+              <div class="faq-item">
+                <h3>How can I subscribe to the newsletter?</h3>
+                <p>You can subscribe to our newsletter by entering your email address in the subscription form located in the footer.</p>
+              </div>
+              <div class="faq-item">
+                <h3>What types of courses are available?</h3>
+                <p>We offer a variety of courses covering fundamental and advanced topics in algorithms, data structures, and coding challenges.</p>
+              </div>
+              <div class="faq-item">
+                <h3>How can I contact support?</h3>
+                <p>If you have any questions or need assistance, you can contact us using the 'Contact Us' link in the footer.</p>
+              </div>
+              <div class="faq-item">
+                <h3>Can I contribute to the platform?</h3>
+                <p>Yes! We welcome contributions. Please visit the 'Our Contributors' link for more information on how to get involved.</p>
+              </div>
+              <!-- Add more FAQ items as needed -->
+            </div>
+          </div>
 
+          <!-- Add a button to open the FAQ modal -->
+          <button id="faqLink">FAQ</button>
+
+          <script>
+            // FAQ Modal Logic
+            const faqModal = document.getElementById("faqModal");
+            const faqLink = document.getElementById("faqLink");
+            const faqClose = document.getElementById("faqClose");
+
+            // Open the modal
+            faqLink.onclick = function() {
+              faqModal.style.display = "block";
+            }
+
+            // Close the modal when the close button is clicked
+            faqClose.onclick = function() {
+              faqModal.style.display = "none";
+            }
+
+            // Close the modal when clicking outside of the modal content
+            window.onclick = function(event) {
+              if (event.target === faqModal) {
+                faqModal.style.display = "none";
+              }
+            }
+          </script>
+
+          <style>
+            /* FAQ Modal Styles */
+            .modal {
+              display: none; /* Ensure modal is hidden by default */
+              position: fixed;
+              z-index: 1001;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              overflow: auto;
+              background-color: rgba(0, 0, 0, 0.6);
+            }
+
+            .modal-content {
+              background-color: #2a2a2a;
+              margin: 10% auto;
+              padding: 30px;
+              border: 2px solid #FF1493; /* Dark pink border */
+              outline: 1px solid #FF69B4; /* Lighter pink outline */
+              width: 90%;
+              max-width: 500px;
+              color: white;
+              border-radius: 8px;
+              box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3); /* Dark pink shadow */
+            }
+
+            .close {
+              color: #FF1493; /* Dark pink close button */
+              float: right;
+              font-size: 28px;
+              font-weight: bold;
+              transition: color 0.3s ease;
+            }
+
+            .close:hover,
+            .close:focus {
+              color: #FF69B4; /* Lighter pink on hover */
+              text-decoration: none;
+              cursor: pointer;
+            }
+
+            .faq-item {
+              margin-bottom: 15px;
+            }
+          </style>
         </div>
       </div>
     </div>
-  
-    <!-- Copyright Section -->
-    <p class="copyright">
-      &copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
-    </p>
-  </div>
 
     <div id="toast" class="toast"></div>
 

From 883ff8d2cefa78d9f2649cf7000c78966c337722 Mon Sep 17 00:00:00 2001
From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:02:41 +0530
Subject: [PATCH 8/8] Update index.html

---
 src/index.html | 88 +++++++++++++++++++++++++++++++++++---------------
 1 file changed, 62 insertions(+), 26 deletions(-)

diff --git a/src/index.html b/src/index.html
index dd2e168..833d22c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -118,33 +118,33 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      background-color: rgba(0,0,0,0.6);
+      background-color: rgba(0, 0, 0, 0.8);
     }
 
     .modal-content {
       background-color: #2a2a2a;
       margin: 10% auto;
-      padding: 30px;
-      border: 2px solid #FF1493; /* Dark pink border */
-      outline: 1px solid #FF69B4; /* Lighter pink outline */
+      padding: 40px;
+      border: 2px solid #FF1493;
+      outline: 1px solid #FF69B4;
       width: 90%;
-      max-width: 500px;
+      max-width: 600px;
       color: white;
-      border-radius: 8px;
-      box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3); /* Dark pink shadow */
+      border-radius: 12px;
+      box-shadow: 0 4px 30px rgba(255, 20, 147, 0.5);
     }
 
     .close {
-      color: #FF1493; /* Dark pink close button */
+      color: #FF1493;
       float: right;
-      font-size: 28px;
+      font-size: 32px;
       font-weight: bold;
       transition: color 0.3s ease;
     }
 
     .close:hover,
     .close:focus {
-      color: #FF69B4; /* Lighter pink on hover */
+      color: #FF69B4;
       text-decoration: none;
       cursor: pointer;
     }
@@ -154,7 +154,7 @@
       width: 100%;
       padding: 12px;
       margin: 10px 0;
-      border: 1px solid #FF1493; /* Dark pink border */
+      border: 1px solid #FF1493;
       border-radius: 4px;
       box-sizing: border-box;
       background-color: #333;
@@ -164,7 +164,7 @@
 
     .modal-form input:focus,
     .modal-form textarea:focus {
-      border-color: #FF69B4; /* Lighter pink on focus */
+      border-color: #FF69B4;
       box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
       outline: none;
     }
@@ -172,7 +172,7 @@
     .modal-form button {
       width: 100%;
       padding: 12px;
-      background-color: #FF1493; /* Dark pink button */
+      background-color: #FF1493;
       color: white;
       border: none;
       border-radius: 4px;
@@ -182,12 +182,12 @@
     }
 
     .modal-form button:hover {
-      background-color: #FF69B4; /* Lighter pink on hover */
+      background-color: #FF69B4;
       box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
     }
 
     .modal h2 {
-      color: #FF1493; /* Dark pink title */
+      color: #FF1493;
       margin-bottom: 20px;
       text-align: center;
 
@@ -438,6 +438,35 @@ <h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
             &copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
           </p>
 
+          <div class="footer">
+            <div class="footer-content">
+              <!-- Platform Links Section -->
+              <div class="footer-links">
+                <a href="#about">About DFS-BFS</a>
+                <a href="#courses">Courses</a>
+                <a href="#blogs">Blogs</a>
+                <a href="#contact">Contact Us</a>
+              </div>
+        
+              <!-- Newsletter Section -->
+              <div class="newsletter-container">
+                <h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
+                <p>Subscribe to our newsletter for the latest on algorithms, tips, and coding challenges.</p>
+                <form onsubmit="handleSubmit(event)">
+                  <input type="email" placeholder="Enter your email" id="emailInput" required name="email" />
+                  <button type="submit">Subscribe</button>
+                </form>
+              </div>
+        
+              <!-- Social Media Section -->
+              <div class="footer-links">
+                <h3>Follow Us</h3>
+                <div class="social-icons">
+                  <a href="https://x.com/dfs-bfs" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
+                  <a href="https://www.linkedin.com/company/dfs-bfs" target="_blank" title="LinkedIn"><i
+                      class="fab fa-linkedin"></i></a>
+                  <a href="../contributor/contributor.html" title="Contributors">Our Contributors</a>
+
           <!-- FAQ Modal -->
           <div id="faqModal" class="modal">
             <div class="modal-content">
@@ -505,45 +534,52 @@ <h3>Can I contribute to the platform?</h3>
               width: 100%;
               height: 100%;
               overflow: auto;
-              background-color: rgba(0, 0, 0, 0.6);
+              background-color: rgba(0, 0, 0, 0.8);
             }
 
             .modal-content {
               background-color: #2a2a2a;
               margin: 10% auto;
-              padding: 30px;
-              border: 2px solid #FF1493; /* Dark pink border */
-              outline: 1px solid #FF69B4; /* Lighter pink outline */
+              padding: 40px;
+              border: 2px solid #FF1493;
+              outline: 1px solid #FF69B4;
               width: 90%;
-              max-width: 500px;
+              max-width: 600px;
               color: white;
-              border-radius: 8px;
-              box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3); /* Dark pink shadow */
+              border-radius: 12px;
+              box-shadow: 0 4px 30px rgba(255, 20, 147, 0.5);
             }
 
             .close {
-              color: #FF1493; /* Dark pink close button */
+              color: #FF1493;
               float: right;
-              font-size: 28px;
+              font-size: 32px;
               font-weight: bold;
               transition: color 0.3s ease;
             }
 
             .close:hover,
             .close:focus {
-              color: #FF69B4; /* Lighter pink on hover */
+              color: #FF69B4;
               text-decoration: none;
               cursor: pointer;
             }
 
             .faq-item {
-              margin-bottom: 15px;
+              margin-bottom: 20px;
             }
           </style>
         </div>
       </div>
     </div>
 
+
+    <!-- Copyright Section -->
+    <p class="copyright">
+      &copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
+    </p>
+  </div>
+
     <div id="toast" class="toast"></div>
 
     <!-- Contact Us Modal -->
