diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..a743e66a
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+   * text=auto
+   *.json text eol=lf
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 00000000..65c136e1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,47 @@
+name: ​🐞 Bug
+description: Report an issue to help us improve the project.
+title: "[BUG] <write a small description here>"
+labels: ["bug", "goal: fix", "priority: medium"]
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: A brief description of the issue or bug you are facing, also include what you tried and what didn't work.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: Please add screenshots if applicable
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Any additional information?
+      description: Any additional information or Is there anything we should know about this bug?
+    validations:
+      required: false
+  - type: dropdown
+    attributes:
+      label: What browser are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I have checked the existing [issues](https://github.com/swaraj-das/Collect-your-GamingTools/issues)."
+          required: true
+        - label: "I have read the [Code Of Conduct](https://github.com/swaraj-das/Collect-your-GamingToolst/blob/main/CODE_OF_CONDUCT.md)"
+          required: true
+        - label: "The changes don't break the code"
+          required: true
+        - label: "Please attach the screenshots and video of the development work once it is done "
+          required: true
+
+        
diff --git a/.github/ISSUE_TEMPLATE/document.yml b/.github/ISSUE_TEMPLATE/document.yml
new file mode 100644
index 00000000..41c7a700
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/document.yml
@@ -0,0 +1,40 @@
+name: "Documentation 📋"
+description: "Use this form to present your suggestions on how to improve our docs"
+title: "[DOCS] <write your suggestion here>"
+labels: ["documenation", "goal: enhancement"]
+
+body:
+  - type: textarea
+    id: docs_description
+    attributes:
+      label: "Issue Description"
+      description: "Please provide a brief summary of the documentation issue you are experiencing or would like to address."
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots_examples_docs
+    attributes:
+      label: "Screenshots or Examples (if applicable)"
+      description: "Please include relevant screenshots or examples to help illustrate the problem."
+
+  - type: textarea
+    id: proposed_solution_docs
+    attributes:
+      label: "Proposed Solution (optional)"
+      description: "If you have a proposed solution for the documentation issue, please provide it here. This can be helpful for speeding up the resolution process."
+
+  - type: checkboxes
+    id: terms_checklist_docs
+    attributes:
+      label: "Checklist"
+      description: "By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/swaraj-das/Collect-your-GamingTools/blob/main/CODE_OF_CONDUCT.md)"
+      options:
+        - label: "I have checked the existing [issues](https://github.com/swaraj-das/Collect-your-GamingTools/issues)."
+          required: true
+
+        - label: "The changes don't break the code"
+          required: true
+        - label: "Please attach the screenshots and video of the development work once it is done "
+          required: true
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 00000000..f4d15c7a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,34 @@
+name: Feature Request 💡
+description: Have any new idea or new feature for Collect-your-GamingTools? Please suggest!
+title: "[Feature] <write a small description here>"
+labels: ["enhancement", "goal: addition", "priority: high"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A clear and concise description of any alternative solution or features you've considered.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: Please add screenshots if applicable
+    validations:
+      required: false
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I have checked the existing [issues](https://github.com/swaraj-das/Collect-your-GamingTools/issues)."
+          required: true
+
+        - label: "I have read the [Code Of Conduct](https://github.com/swaraj-das/Collect-your-GamingTools/blob/main/CODE_OF_CONDUCT.md)"
+          required: true
+
+        - label: "The changes don't break the code"
+          required: true
+        - label: "Please attach the screenshots and video of the development work once it is done "
+          required: true
diff --git a/.github/ISSUE_TEMPLATE/other.yml b/.github/ISSUE_TEMPLATE/other.yml
new file mode 100644
index 00000000..db8a9cdb
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/other.yml
@@ -0,0 +1,27 @@
+name: Other
+description: Use this for any other question or issue. Please do not create blank issues
+title: "[OTHER]"
+labels: ["status: awaiting triage"]
+body:
+  - type: textarea
+    id: issuedescription
+    attributes:
+      label: What would you like to share or ask?
+      description: Provide a clear and concise explanation of your issue.
+    validations:
+      required: true
+  - type: checkboxes
+    id: no-duplicate-issues
+    attributes:
+      label: "Checklist"
+      options:
+        - label: "I have checked the existing [issues](https://github.com/Collect-your-GamingTools/issues)."
+          required: true
+
+        - label: "I have read the [Code Of Conduct](https://github.com/Collect-your-GamingTools/blob/main/CODE_OF_CONDUCT.md)"
+          required: true
+
+        - label: "The changes don't break the code"
+          required: true
+        - label: "Please attach the screenshots and video of the development work once it is done "
+          required: true
diff --git a/.github/ISSUE_TEMPLATE/refactor_code.yml b/.github/ISSUE_TEMPLATE/refactor_code.yml
new file mode 100644
index 00000000..51d8bf3d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/refactor_code.yml
@@ -0,0 +1,40 @@
+name: Refactor Code 🔧
+description: Use this label for code refactoring tasks.
+title: "[Refactor] <write what you want to add>"
+labels: ["goal: refactor", "priority: medium"]
+body:
+  - type: input
+    attributes:
+      label: File Name
+      description: "Enter the file that you want to refactor in the codebase."
+      placeholder: "For example - component/Cards/Card.tsx"
+    validations:
+      required: true
+  - type: textarea
+    id: refactor_description
+    attributes:
+      label: "Reason for Refactoring the Code"
+      description: "Describe what improvements can be made in the codebase without introducing breaking changes."
+    validations:
+      required: true
+  - type: checkboxes
+    id: no-duplicate-issues
+ 
+
+    attributes:
+      label: "Checklist"
+      options:
+        
+        - label: "I have checked the existing [issues](https://github.com/Collect-your-GamingTools/issues)."
+          required: true
+
+
+        - label: "I have read the [Code Of Conduct](https://github.com/Collect-your-GamingTools/blob/main/CODE_OF_CONDUCT.md)"
+          required: true
+
+        - label: "The changes don't break the code"
+          required: true
+        - label: "Please attach the screenshots and video of the development work once it is done "
+          required: true
+
+       
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/task_request.yml b/.github/ISSUE_TEMPLATE/task_request.yml
new file mode 100644
index 00000000..ae6502c2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/task_request.yml
@@ -0,0 +1,38 @@
+name: ​Task Request
+description: This is Only For Project Admins and Mentors.
+title: " <write a small description here>"
+labels: ["priority: high"]
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: A brief description of the issue or bug you are facing, also include what you tried and what didn't work.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: Please add screenshots if required
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Any additional Details?
+      description: Please Provide Key Details, if required (Goals and objectives,Deliverables,Dependencies)
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Deadline
+      description: Specify the task deadline
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "Stay you can start working on it by taking latest pull from main branch"
+
+
+     
+      
+ 
diff --git a/.github/workflows/PRValidator.yml b/.github/workflows/PRValidator.yml
new file mode 100644
index 00000000..cd771f5f
--- /dev/null
+++ b/.github/workflows/PRValidator.yml
@@ -0,0 +1,26 @@
+name: PR Description Check
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  validate-pr-description:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Validate PR Description
+        id: check_description
+        run: |
+          if [ -z "${{ github.event.pull_request.body }}" ]; then
+            echo "::error::Description is missing!"
+            exit 1
+          fi
+
+      - name: Check for issue number or 'Fixes #NEW'
+        id: check_issue_number
+        run: |
+          description="${{ github.event.pull_request.body }}"
+          if [[ ! "$description" =~ (Fixes #[0-9]+|Fixes #NEW) ]]; then
+            echo "::error::PR description must contain an issue number or 'Fixes #NEW'"
+            exit 1
+          fi
\ No newline at end of file
diff --git a/.github/workflows/auto-assign-action.yml b/.github/workflows/auto-assign-action.yml
index 9cf268bb..3b993150 100644
--- a/.github/workflows/auto-assign-action.yml
+++ b/.github/workflows/auto-assign-action.yml
@@ -1,17 +1,37 @@
-name: Assign to Author
+name: Auto Comment on PR Merge
 
 on:
-  issues:
-    types: [opened]
+  pull_request_target:
+    types: [closed]
+
+permissions:
+  issues: write
+  pull-requests: write
 
 jobs:
-  auto-assign:
+  comment:
+    if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
-    permissions:
-      issues: write
+
     steps:
-      - name: 'Auto-assign issue creator'
-        uses: pozil/auto-assign-issue@v2
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }} # Required token for authentication
-          assignees: ${{ github.event.issue.user.login }} # Auto-assign the issue creator
+    - name: Add Comment to Merged PR
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        COMMENT=$(cat <<EOF
+        {
+          "body": "Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨"
+        }
+        EOF
+        )
+        RESPONSE=$(curl -s -o response.json -w "%{http_code}" \
+          -X POST \
+          -H "Authorization: token $GITHUB_TOKEN" \
+          -H "Accept: application/vnd.github.v3+json" \
+          https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments \
+          -d "$COMMENT")
+        cat response.json
+        if [ "$RESPONSE" -ne 201 ]; then
+          echo "Failed to add comment"
+          exit 1
+        fi
\ No newline at end of file
diff --git a/.github/workflows/auto-assign-label-pr.yml b/.github/workflows/auto-assign-label-pr.yml
new file mode 100644
index 00000000..10382c3a
--- /dev/null
+++ b/.github/workflows/auto-assign-label-pr.yml
@@ -0,0 +1,28 @@
+name: Auto Assign and Label PR
+
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  assign-and-label:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Add Labels to PR
+      uses: actions-ecosystem/action-add-labels@v1.1.1
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        labels:
+          - gssoc-ext
+          - hacktoberfest-accepted
+
+    - name: Assign PR to Creator
+      uses: actions-ecosystem/action-assign@v1
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        assignees: ${{ github.actor }}
diff --git a/.github/workflows/auto-comment-issue.yml b/.github/workflows/auto-comment-issue.yml
new file mode 100644
index 00000000..be028fbd
--- /dev/null
+++ b/.github/workflows/auto-comment-issue.yml
@@ -0,0 +1,24 @@
+name: 'Greetings'
+
+on:
+  fork:
+  push:
+    branches: [main]
+  issues:
+    types: [opened]
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  welcome:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: EddieHubCommunity/gh-action-community/src/welcome@main
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: |
+            Congratulations, @${{ github.actor }}! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!
+          pr-message: |
+            Great job, @${{ github.actor }}! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.
+          footer: 'We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our [contributing guidelines](https://github.com/swaraj-das/Collect-your-GamingTools/blob/main/Contributing.md)'
\ No newline at end of file
diff --git a/.github/workflows/auto-label-action.yml b/.github/workflows/auto-label-action.yml
index 44bfc6c5..3e67b879 100644
--- a/.github/workflows/auto-label-action.yml
+++ b/.github/workflows/auto-label-action.yml
@@ -2,13 +2,11 @@ name: Auto Label New Issues & PRs
 
 on:
   issues:
-    types: [opened]
-  pull_request:
-    types: [opened]    
+    types: [opened]  
 
 permissions:
   issues: write
-  pull-requests: write
+  
 
 jobs:
   label:
@@ -19,11 +17,10 @@ jobs:
       uses: actions/checkout@v3
 
     - name: Add Labels to Issues & PRs
-      if: github.event_name == 'issues' || github.event_name == 'pull_request'
+      if: github.event_name == 'issues'
       uses: actions-ecosystem/action-add-labels@v1.1.1
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         labels: |
-          hacktoberfest
           hacktoberfest-accepted
           gssoc-ext
diff --git a/.github/workflows/issue reminder.yml b/.github/workflows/issue reminder.yml
new file mode 100644
index 00000000..dc312dd9
--- /dev/null
+++ b/.github/workflows/issue reminder.yml	
@@ -0,0 +1,32 @@
+name: 'open-issue reminder'
+
+on:
+  schedule:
+    - cron: '15 4 * * *' 
+jobs:
+  welcome:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Run script
+        uses: actions/github-script@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { data: issues } = await github.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open'
+            });
+            for (const issue of issues) {
+              const issueComment = `Hi there! This issue is still open. We are looking forward to your response.
+              Assignees: ${issue.assignees.map(assignee => '@' + assignee.login).join(', ') || 'None'}`;
+              await github.issues.createComment({
+                issue_number: issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: issueComment
+              });
+            }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6f3a2913..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index c91a75c4..51025c3b 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -38,6 +38,9 @@ If you experience or witness unacceptable behavior, you can report it by submitt
 
 Email a detailed report to admin.
 
+# action against Violation
+If any misconduct or violation of rules is found then strict actions will be taken against you and you may be out of this open source contributrions.
+
 # Information to Include: 
 
 When submitting a report, include your contact information, a detailed account of the incident (including dates, times, and individuals involved), and any relevant supporting materials.
@@ -77,6 +80,10 @@ conduct enforcement ladder](https://github.com/mozilla/diversity).
 
 [homepage]: https://www.contributor-covenant.org
 
+## guide for beginner contribuiter
+If ou are newbie in as acontributor on open source then you can watch our academy videos 
+(gssoc.girlscript.tech/gssoc_academy)
+
 For answers to common questions about this code of conduct, see the
 FAQ at https://www.contributor-covenant.org/faq. Translations are
 available at https://www.contributor-covenant.org/translations.
@@ -84,4 +91,4 @@ available at https://www.contributor-covenant.org/translations.
 
 ## Contact Information
 
-For any questions or further clarification, please contact admin
\ No newline at end of file
+For any questions or further clarification, please contact admin
diff --git a/Contributing.md b/Contributing.md
new file mode 100644
index 00000000..10b29df9
--- /dev/null
+++ b/Contributing.md
@@ -0,0 +1,60 @@
+
+
+# 🎮 Contributing to Collect Your GamingTools Repository
+
+Thank you for your interest in contributing to **Collect Your GamingTools**! We’re excited to see what creative ideas you bring. Follow these simple guidelines below to get started.
+
+---
+
+## 🚀 Getting Started
+
+1. **Fork the Repository**  
+   Click the "Fork" button at the top-right corner to create your own copy of the repo.
+
+2. **Clone Your Fork**  
+   Clone your forked repository to your local machine:
+   ```bash
+   git clone https://github.com/<your-github-username>/Collect-your-GamingTools.git
+   ```
+
+3. **Create a New Branch**  
+   Create a new branch for your changes:
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+---
+
+## 🖌️ Making Changes
+
+1. **Code Changes**  
+   Make your modifications, ensuring they align with the project’s coding standards and code of conduct. Add exciting features, enriching documentation or squash bugs!  
+
+2. **Commit Your Changes**  
+   Write meaningful commit messages:
+   ```bash
+   git commit -m "Add: New navigation bar feature"
+   ```
+
+3. **Push Your Changes**  
+   Push your changes to your forked repository:
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+---
+
+## 🛠️ Creating a Pull Request
+
+1. Once your changes are pushed, create a pull request (PR) on the original repository.
+2. Provide a detailed description of your changes and link any relevant issues. Provide relevant images/videos, if any.
+3. Wait for reviews and engage with feedback!
+
+---
+
+## 🎉 Additional Notes
+
+- Make sure to sync your fork with the latest changes from the original repo before pushing new features.
+- Respect coding conventions and keep your code clean. Comment your changes for ease in review.
+
+Welcome to Open-Source and thank you for contributing! 🙌
\ No newline at end of file
diff --git a/Contributors/contributor.css b/Contributors/contributor.css
new file mode 100644
index 00000000..a9aadd71
--- /dev/null
+++ b/Contributors/contributor.css
@@ -0,0 +1,262 @@
+body {
+  font-family: "Poppins";
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.container {
+  text-align: center;
+}
+
+.title {
+  display: inline-block;
+  font-size: 3em;
+  margin-bottom: 20px;
+  padding: 10px;
+  color: #f6f2f6;
+  text-shadow: 1px 1px 2px rgb(184, 45, 235), 0 0 1em rgba(216, 130, 200, 0.617),
+    0 0 0.2em rgba(99, 1, 124, 0.623);
+  /* border-radius: 20px; */
+  /* background-color: rgba(209, 209, 255, 0.8); */
+}
+
+.contributors-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 20px;
+  gap: 40px;
+}
+
+.contributor-card {
+  width: 300px;
+  position: relative;
+  overflow: hidden;
+  max-width: calc(55% - 16px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f9e2f9;
+  /* border: 1px solid #00ebdf; */
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+  text-decoration: none;
+  color: inherit;
+  /* margin-bottom: 16px;  */
+}
+
+.contributor-card:hover {
+  transform: scale(1.02);
+  box-shadow: 1px 1px 23px rgba(170, 1, 175, 0.915);
+  border: none;
+  cursor: pointer;
+}
+
+.contributor-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(132deg, #5103fa 50%, rgb(218, 46, 146) 51%);
+  /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transform: translate(-100%, -100%);
+  opacity: 0;
+  z-index: -1;
+}
+
+.contributor-card:hover::before {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.contributor-card img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  margin-bottom: 10px;
+  transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
+}
+
+.contributor-card:hover img {
+  border: 2px solid rgb(255, 234, 0);
+  box-shadow: -1px 2px 27px rgb(0, 217, 255);
+}
+
+/* 
+    .contributor-card h2 {
+      margin: 0 0 10px;
+    } */
+/* 
+    .contributor-card p {
+    } */
+
+.contributor-card h2 {
+  font-size: 1.2em;
+  color: #040404;
+  position: relative;
+  z-index: 1;
+  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.contributor-card p {
+  font-size: 1.2em;
+  color: #040404;
+  position: relative;
+  z-index: 1;
+  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+  margin: 0 0 10px;
+}
+
+.contributor-card:hover h2 {
+  text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108),
+    0 0 0.8em rgb(0, 14, 108);
+  color: white;
+}
+
+.contributor-card:hover p {
+  text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168),
+    0 0 0.3em rgb(134, 136, 250);
+  color: white;
+
+  /* font-weight: 400; */
+}
+
+/* dark mode */
+/* Toggle button styles */
+.toggle-container {
+  position: fixed; /* Change this as needed for positioning */
+  top: 25px;
+  right: 40px;
+}
+
+.toggle {
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+  border-radius: 999px;
+  color: hsl(240, 100%, 95%);
+  transition: all 500ms;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.toggle:checked {
+  background-color: #333;
+}
+.toggle:checked:before {
+  transform: translateX(25px);
+}
+
+body {
+  background-color: #f8f9fa;
+  color: #212529;
+}
+
+.nav-container {
+  background-color: #ffffff;
+}
+
+.footer {
+  background-color: #ffffff;
+  color: #212529;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+  background-color: #333;
+  color: #ffffff;
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .footer {
+  background-color: #343a40;
+  color: #ffffff;
+}
+#toggle {
+  display: inline-block;
+  border-radius: 50px;
+  transition: all 0.4s ease-in-out;
+  padding: 10px 10px;
+  background-color: transparent;
+  border: 2px solid #c6c9d8bf;
+  color: #c6c9d8bf;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-decoration: none;
+}
+.toggle-container {
+  --size: 2rem;
+  width: var(--size);
+  height: var(--size);
+}
+
+.toggle {
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+  border-radius: 999px;
+  color: hsl(240, 100%, 95%);
+  transition: all 500ms;
+  position: absolute;
+  top: 25px;
+  right: 0;
+
+  &:checked {
+    --ray-size: calc(var(--size) * -0.4);
+    --offset-orthogonal: calc(var(--size) * 0.65);
+    --offset-diagonal: calc(var(--size) * 0.45);
+    transform: scale(0.75);
+    color: hsl(40, 100%, 50%);
+    box-shadow: inset 0 0 0 var(--size),
+      calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+      var(--offset-orthogonal) 0 0 var(--ray-size),
+      0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+      0 var(--offset-orthogonal) 0 var(--ray-size),
+      calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0
+        var(--ray-size),
+      var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+      calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+      var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+  }
+}
+
+/* Apply fade-down animation to the toggle container */
+.toggle-container[data-aos="fade-down"] {
+  transition: opacity 500ms ease-in-out;
+  opacity: 0;
+}
+
+.toggle-container[data-aos="fade-down"].aos-animate {
+  opacity: 1;
+}
+body.dark-mode .contributor-card {
+  background: #0e1525;
+}
+body.dark-mode .contributor-card p {
+  color: white;
+}
+body.dark-mode .contributor-card h2 {
+  color: white;
+}
diff --git a/Contributors/contributor.html b/Contributors/contributor.html
new file mode 100644
index 00000000..a55f7ac2
--- /dev/null
+++ b/Contributors/contributor.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contributors</title>
+    <link rel="stylesheet" href="contributor.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+
+    <style>
+      html {
+        scroll-behavior: smooth;
+      }
+      body {
+        background: linear-gradient(90deg, #ff459f, #ff9532, #1a0259);
+      }
+      .top-btn {
+        display: none;
+        width: 50px;
+        height: 50px;
+        position: fixed;
+        bottom: 10px;
+        right: 0px;
+        background-color: #59038a;
+        color: #fff;
+        padding: 2px;
+        border: none;
+        margin-right: 36px;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+
+      .top-btn:hover {
+        background-color: #f689f2;
+      }
+
+      .pagination-btns {
+        margin: 50px 0px;
+      }
+
+      .pagination-btns button.btn {
+        border-radius: 5px;
+        outline: none;
+        margin: 5px 10px;
+        border: 1px solid rgb(146, 110, 110);
+      }
+
+      .pagination-btns button.btn,
+      .pagination-btns button.btn i.bi {
+        font-size: 2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
+        <input id="themeToggle" class="toggle" type="checkbox" />
+      </div>
+      <h1 class="title">Our Contributors</h1>
+      <div id="contributors" class="contributors-grid"></div>
+    </div>
+    <button class="top-btn" id="goToTopBtn" onclick="goToTop()">
+      <i class="fa-solid fa-chevron-up" style="color: #ffffff"></i>
+    </button>
+    <script>
+      // Get the button
+      var mybutton = document.getElementById("goToTopBtn");
+
+      // When the user scrolls down 20px from the top of the document, show the button
+      window.onscroll = function () {
+        scrollFunction();
+      };
+
+      function scrollFunction() {
+        if (
+          document.body.scrollTop > 20 ||
+          document.documentElement.scrollTop > 20
+        ) {
+          mybutton.style.display = "block";
+        } else {
+          mybutton.style.display = "none";
+        }
+      }
+
+      // When the user clicks on the button, scroll to the top of the document
+      function goToTop() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+      }
+    </script>
+    <script src="contributor.js"></script>
+    <script>
+      window.addEventListener("scroll", function () {
+        const winScroll =
+          document.body.scrollTop || document.documentElement.scrollTop;
+        const height =
+          document.documentElement.scrollHeight -
+          document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById("progress-bar").style.width = scrolled + "%";
+      });
+    </script>
+  </body>
+</html>
diff --git a/Contributors/contributor.js b/Contributors/contributor.js
new file mode 100644
index 00000000..017e37a7
--- /dev/null
+++ b/Contributors/contributor.js
@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const contributorsContainer = document.getElementById("contributors");
+
+  async function fetchContributors() {
+    try {
+      const response = await fetch(
+        `https://api.github.com/repos/swaraj-das/Collect-your-GamingTools/contributors`
+      );
+      const contributors = await response.json();
+
+      contributorsContainer.innerHTML = "";
+      contributors.forEach((contributor) => {
+        const contributorCard = document.createElement("div");
+        contributorCard.className = "contributor-card";
+
+        contributorCard.innerHTML = `
+            <a href="${contributor.html_url}" target="_blank" rel="noopener noreferrer">
+              <img src="${contributor.avatar_url}" alt="${contributor.login}">
+            </a>
+            <h2>${contributor.login}</h2>
+            <p>Contributions: ${contributor.contributions}</p>
+          `;
+
+        contributorsContainer.appendChild(contributorCard);
+      });
+    } catch (error) {
+      console.error("Error fetching contributors:", error);
+    }
+  }
+
+  fetchContributors();
+});
+
+// Dark mode (remains unchanged)
+document.addEventListener("DOMContentLoaded", () => {
+  const toggleCheckbox = document.getElementById("themeToggle");
+  const body = document.body;
+
+  if (localStorage.getItem("dark-mode") === "enabled") {
+    body.classList.add("dark-mode");
+    toggleCheckbox.checked = true;
+  } else {
+    toggleCheckbox.checked = false;
+  }
+
+  toggleCheckbox.addEventListener("change", () => {
+    if (toggleCheckbox.checked) {
+      body.classList.add("dark-mode");
+      localStorage.setItem("dark-mode", "enabled");
+    } else {
+      body.classList.remove("dark-mode");
+      localStorage.setItem("dark-mode", "disabled");
+    }
+  });
+});
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..ad0a2cb8
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,8 @@
+# Step 1: Use an official Nginx image from Docker Hub
+FROM nginx:alpine
+
+# Step 2: Copy your local files (frontend) to the Nginx html folder
+COPY . /usr/share/nginx/html
+
+# Step 3: Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/PrivacyPolicy/PrivacyPolicy.css b/PrivacyPolicy/PrivacyPolicy.css
new file mode 100644
index 00000000..bff73114
--- /dev/null
+++ b/PrivacyPolicy/PrivacyPolicy.css
@@ -0,0 +1,61 @@
+/* Background container for the privacy policy page */
+.background-container {
+    min-height: 100vh;
+    background-image: linear-gradient(135deg, #d22d72 10%, #e45d27 100%,#e4c827 30%);
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+  
+  /* Policy container styles */
+  .policy-container {
+    padding: 32px; /* Equivalent to theme.spacing(4) */
+    max-width: 800px;
+    margin: auto;
+    background-color: rgba(64, 47, 47, 0.8);
+    backdrop-filter: blur(10px);
+    border-radius: 8px; /* Adjust as needed */
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    color: white;
+  }
+  
+  .policy-container:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+  }
+  
+/* Typography */
+h1 {
+    font-family: 'Montserrat', Arial, sans-serif; 
+    font-size: 2.5rem; /* Larger and more prominent heading */
+    color: #ff6f61;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    font-family: 'Future2', Arial, sans-serif;
+    font-size: 1.75rem; /* Slightly smaller than h1 */
+    color: #ff6f61;
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
+  
+  p {
+    font-family: Arial, sans-serif; /* Clean and easy to read */
+    font-size: 1.125rem; /* Slightly larger for readability */
+    font-weight: 300; /* Light font-weight for modern look */
+    line-height: 1.6; /* Increase line spacing for readability */
+    color: #ffffff;
+    margin-bottom: 15px;
+  }
+  .center-text {
+    text-align: center;
+    font-family: Arial, sans-serif; /* Optional: Choose your preferred font */
+    font-size: 1.125rem; /* Adjust size if needed */
+    margin: 20px 0; /* Adds space above and below the text */
+  }  
\ No newline at end of file
diff --git a/PrivacyPolicy/PrivacyPolicy.html b/PrivacyPolicy/PrivacyPolicy.html
new file mode 100644
index 00000000..370e9e68
--- /dev/null
+++ b/PrivacyPolicy/PrivacyPolicy.html
@@ -0,0 +1,35 @@
+<!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="PrivacyPolicy.css">
+</head>
+<body>
+  <div class="background-container">
+    <div class="policy-container">
+      <h1>Privacy Policy</h1>
+      <p class="center-text">Welcome to our Privacy Policy page. Your privacy is critically important to us.</p>
+
+      <h2>1. Information We Collect</h2>
+      <p>We collect several types of information for various purposes to provide and improve our service to you.</p>
+
+      <h2>2. How We Use Your Information</h2>
+      <p>We use the data we collect to operate, maintain, and improve our services. This includes using your data to understand how users interact with our services and to communicate updates.</p>
+
+      <h2>3. Cookies</h2>
+      <p>We use cookies and similar tracking technologies to track the activity on our website and hold certain information.</p>
+
+      <h2>4. Data Protection Rights</h2>
+      <p>You have the right to access, update, or delete your personal information. If you make a request, we have one month to respond to you.</p>
+
+      <h2>5. Changes to This Privacy Policy</h2>
+      <p>We may update our Privacy Policy from time to time. You are advised to review this page periodically for any changes.</p>
+
+      <h2>6. Contact Us</h2>
+      <p>If you have any questions about this Privacy Policy, please contact us.</p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/README.md b/README.md
index c9d5bb3f..00b2680d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,26 @@
 # 🎮 Collect Your GamingTools 🕹️
 A <b> responsive and dynamic website </b> to showcase the best gaming accessories for every gamer!
 
+<table align="center">
+    <thead align="center">
+        <tr border: 2px;>
+            <td><b>🌟 Stars</b></td>
+            <td><b>🍴 Forks</b></td>
+            <td><b>🐛 Issues</b></td>
+            <td><b>🔔 Open PRs</b></td>
+            <td><b>🔕 Close PRs</b></td>
+        </tr>
+     </thead>
+    <tbody>
+         <tr>
+            <td><img alt="Stars" src="https://img.shields.io/github/stars/swaraj-das/Collect-your-GamingTools?style=flat&logo=github"/></td>
+             <td><img alt="Forks" src="https://img.shields.io/github/forks/swaraj-das/Collect-your-GamingTools?style=flat&logo=github"/></td>
+            <td><img alt="Issues" src="https://img.shields.io/github/issues/swaraj-das/Collect-your-GamingTools?style=flat&logo=github"/></td>
+            <td><img alt="Open Pull Requests" src="https://img.shields.io/github/issues-pr/swaraj-das/Collect-your-GamingTools?style=flat&logo=github"/></td>
+           <td><img alt="Close Pull Requests" src="https://img.shields.io/github/issues-pr-closed/swaraj-das/Collect-your-GamingTools?style=flat&color=green&logo=github"/></td>
+        </tr>
+    </tbody>
+</table>
 
 ## ✨ Features
 🗂️ <b>Dynamic Navigation Menu</b>: Toggle visibility, designed for seamless use across all screen sizes.  
@@ -23,15 +43,29 @@ A <b> responsive and dynamic website </b> to showcase the best gaming accessorie
 
 ## 🚀 Demo
 #### Check out the live demo here ⬇️ : 
-https://swaraj-das.github.io/Collect-your-GamingTools/
+
+https://collect-your-gamingtools.netlify.app/
+
+
 
 
 ## 🛠️ Installation
 #### To get started, simply clone the repository and open it in your browser:
 
-1. git clone `https://github.com/swaraj-das/Collect-your-GamingTools.git`
-   
-2. Then, open the `index.html` file in your browser, and you’re good to go!
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/swaraj-das/Collect-your-GamingTools.git
+    ```
+2. Navigate to the project directory:
+    ```bash
+    cd Collect-your-GamingTools
+    ```
+3. Open the `index.html` file in your browser:
+    ```bash
+    open index.html  # On macOS
+    start index.html # On Windows
+    xdg-open index.html # On Linux
+    ```
 
 
 ## 🤝 Contributing
@@ -47,7 +81,26 @@ Contributions are what make the **open-source** community such an amazing place
 
 🔃 Open a <b>pull request</b>.
 
+We welcome all contributions to improve **Collect Your GamingTools**! If you'd like to contribute, please follow the [Contributing.md](./Contributing.md) to get details on how to get started.
+
+## 👥 Team
+
+| ![Swaraj Das](https://avatars.githubusercontent.com/u/151845349?v=4&s=80) | ![Anit Sarkar](https://avatars.githubusercontent.com/u/135215478?v=4&s=80) |
+|:--:|:--:|
+| **Swaraj Das** <br> <sub>Project Admin</sub> | **Anit Sarkar** <br> <sub>Maintainer</sub> |
+| [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/swarajdas01/) | [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/anit-sarkar-11906a283/) |
+
+## 🙌 Contributors
+
+![GitHub contributors](https://img.shields.io/github/contributors/swaraj-das/Collect-your-GamingTools)
+
+![Contributors](https://contrib.rocks/image?repo=swaraj-das/Collect-your-GamingTools)
+
+
+## 🎉 **Join us!**
+
+Whether you’re contributing code, improving documentation, or suggesting new features, your involvement matters. We value contributions that help you learn and grow, not just for gaining points. 
+
+All the Best! 💫 **Happy Coding!** 🍳
 
 
-## 👨‍💻 Author
-### Created with ❤️ by Swaraj Das
diff --git a/SignUp/signup.css b/SignUp/signup.css
index f2f7510f..d426fd74 100644
--- a/SignUp/signup.css
+++ b/SignUp/signup.css
@@ -1,106 +1,358 @@
 * {
+
     box-sizing: border-box;
     margin: 0;
-    padding: 0;
+    padding:0;
 }
 
 body {
-    background: url('https://www.example.com/path/to/your/gaming-background.jpg') no-repeat center center fixed;
+    background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
     background-size: cover;
     font-family: 'Trebuchet MS', Arial, sans-serif;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
     height: 100vh;
     color: white;
     text-shadow: 1px 1px 2px #000;
 }
 
+
+.error-message {
+  color: red;
+  font-size: 0.85em;
+  margin-top: 5px;
+}
+
 .signup-container {
-    background-color: rgba(0, 0, 0, 0.8);
-    padding: 2rem;
-    border-radius: 15px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+    
+    opacity: 0.75;
+    background-color: rgba(0, 0, 0, 0);
+    padding:3rem 5rem;
+    border-radius: 20px;
+    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
     text-align: center;
-    max-width: 400px;
+    max-width: 500px;
     width: 100%;
-    animation: fadeIn 1.5s ease-in-out;
+    animation: fadeIn 2s ease-in-out;
+    background-color: black;
+    margin: auto;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 0.75;
+    transform: scale(1);
+  }
 }
 
 h1 {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
     font-size: 1.5rem;
     color: #fb5283;
 }
 
 .input-group {
-    margin-bottom: 1.5rem;
-    text-align: left;
+  margin-bottom: 1.5rem;
+  text-align: left;
 }
 
 label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 16px;
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
 }
 
-input[type="text"], input[type="email"], input[type="password"] {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px solid #6a1b9a;
-    border-radius: 5px;
-    background-color: #3a3f44;
-    color: white;
-    font-family: 'Press Start 2P', cursive;
-    font-size: 0.875rem;
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #6a1b9a;
+  border-radius: 5px;
+  background-color: #3a3f44;
+  color: white;
+  font-family: "Press Start 2P", cursive;
+  font-size: 0.875rem;
 }
 
-input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
-    outline: none;
-    border-color: #ba68c8;
-    background-color: #2a2e32;
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus {
+  outline: none;
+  border-color: #ba68c8;
+  background-color: #2a2e32;
 }
 
 .signup-button {
-    background-color: #ba68c8;
-    color: #282c34;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-family: 'Press Start 2P', cursive;
-    font-size: 18px;
-    transition: background-color 0.3s, transform 0.3s;
+  color: white;
+  font-family: Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+  text-align: center;
+  background-color: #ffa12b;
+  display: block;
+  position: relative;
+  padding: 15px 60px;
+  margin: auto;
+
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-shadow: 0px 1px 0px #000;
+  filter: dropshadow(color=#000, offx=0px, offy=1px);
+
+  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+  -moz-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+  box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
 }
 
+.signup-button:active {
+  top: 10px;
+  background-color: #f78900;
+
+  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
+  -moz-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3pxpx 0 #915100;
+  box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
+}
+.signup-button:after {
+  content: "";
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+  position: absolute;
+  bottom: -15px;
+  left: -4px;
+  z-index: -1;
+  background-color: #2b1800;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
 .signup-button:hover {
-    background-color: #ab47bc;
-    transform: scale(1.05);
+  background-color: #ffd198;
+  color: #f78900;
 }
 
 .links {
-    margin-top: 18px;
+  margin-top: 18px;
 }
 
 .links a {
-    color: #fb5283;
+  color: #fb5283;
+  text-decoration: none;
+  transition: color 0.3s;
+  font-size: 18px;
+}
+
+.links a:hover {
+  color: #ff80ab;
+  text-decoration: underline;
+}
+
+.linksHome {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  padding: 10px;
+  font-size: large;
+  text-decoration: none;
+  border-radius: 15px;
+  border: none;
+  background: linear-gradient(
+    0deg,
+    rgba(255, 193, 219, 1) 0%,
+    rgba(245, 131, 202, 1) 100%
+  );
+  color: #fff;
+  overflow: hidden;
+}
+
+.linksHome:hover {
+  text-decoration: none;
+  background: linear-gradient(
+    0deg,
+    rgba(245, 131, 202, 1) 0%,
+    rgba(255, 193, 219, 1) 100%
+  );
+  color: #fff;
+}
+
+.linksHome:before {
+  position: absolute;
+  content: "";
+  display: inline-block;
+  top: -180px;
+  left: 0;
+  width: 30px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  animation: shiny-btn1 3s ease-in-out infinite;
+}
+
+.linksHome:active {
+  box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
+    -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
+    inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
+    inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
+}
+
+@keyframes shiny-btn1 {
+  0% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0;
+  }
+  80% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0.5;
+  }
+  81% {
+    transform: scale(4) rotate(45deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(50) rotate(45deg);
+    opacity: 0;
+  }
+}
+
+.linksHome a {
+  color: #ffe4e9;
+}
+
+a {
+  text-decoration: none;
+}
+
+#link-home{
+    border: 1px solid rgb(255, 255, 255);
+    box-shadow: 0 0 5px white;
+    border-radius: 15px;
+    padding: 8px 15px;
+
+    margin-left: 1rem;
+    margin-top: 1rem;
+    
+}
+
+#link-home:hover{
+    border: 1px solid rgb(202, 202, 202);
+    box-shadow: 0 0 5px #424242;
+    background-color: #42424222;
+    border-radius: 15px;
+    padding: 8px 15px;
+
+    margin-left: 1rem;
+    margin-top: 1rem;
+}
+
+#link-home a{
     text-decoration: none;
-    transition: color 0.3s;
-    font-size: 18px;
+    color: #fff;
+    font-size: 1.4rem;
+    text-shadow: none;
+    font-family: 'Trebuchet MS', Arial, sans-serif;
+    
+}
+
+/* ... existing styles ... */
+
+.signup-button, .google-signup-button {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.signup-button {
+  background-color: #f4a261;
+  color: white;
+}
+
+.signup-button:hover {
+  background-color: #e76f51;
+}
+
+.google-signup-button {
+  background-color: white;
+  color: #757575;
+  border: 1px solid #dadce0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.google-signup-button:hover {
+  background-color: #f8f9fa;
+}
+
+.google-signup-button img {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+.or-divider {
+  text-align: center;
+  margin: 20px 0;
+  color: #757575;
+  position: relative;
+  overflow: hidden;
+}
+
+.or-divider::before,
+.or-divider::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 45%;
+  height: 1px;
+  background-color: #dadce0;
+}
+
+.or-divider::before {
+  left: 0;
+}
+
+.or-divider::after {
+  right: 0;
+}
+
+.or-divider span {
+  display: inline-block;
+  position: relative;
+  padding: 0 10px;
+  background-color: #000; /* Match this with your form background color */
+}
+
+.links {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.links a {
+  color: #e76f51;
+  text-decoration: none;
 }
 
 .links a:hover {
-    color: #ff80ab;
-    text-decoration: underline;
+  text-decoration: underline;
+}
+::placeholder {
+  color: white;
 }
diff --git a/SignUp/signup.html b/SignUp/signup.html
index 5c0f695f..723c3b67 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -5,33 +5,74 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign Up for GamingTools</title>
     <link rel="stylesheet" href="signup.css">
-    <link rel="shortcut icon" href="logo.png" type="image/x-icon">
+    <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
+    <style>
+        .condition {
+            color: gray; /* Default color */
+            font-size: 0.9em;
+        }
+        .condition.met {
+            color: lightgreen; /* Turns green when condition is met */
+        }
+        .error-message {
+            color: red;
+            font-size: 0.85em;
+            margin-top: 5px;
+        }
+    </style>
 </head>
 <body>
+
+    <span id="link-home" class="linksHome">
+        <a href="../index.html">Home</a>
+    </span>
+
     <div class="signup-container">
         <h1>Create Your Account</h1>
         <form action="#" method="post">
             <div class="input-group">
                 <label for="username">Username</label>
-                <input type="text" id="username" name="username" required>
+                <input type="text" id="username" name="username" placeholder="Create a Username" required>
             </div>
             <div class="input-group">
                 <label for="email">Email</label>
-                <input type="email" id="email" name="email" required>
+                <div id="email-error" class="error-message"></div> <!-- Error message container -->
+                <input type="email" id="email" name="email" placeholder="Enter your mail-id" required>
             </div>
             <div class="input-group">
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" required>
+                <input type="password" id="password" name="password" placeholder="Create password" required>
             </div>
+
+            <!-- Password Recommendations Section -->
+            <div class="password-recommendations">
+                <p id="length" class="condition">At least 8 characters</p>
+                <p id="uppercase" class="condition">Contains uppercase letters</p>
+                <p id="lowercase" class="condition">Contains lowercase letters</p>
+                <p id="number" class="condition">Contains numbers</p>
+                <p id="special" class="condition">Contains special characters</p>
+    
+
             <div class="input-group">
                 <label for="confirm-password">Confirm Password</label>
-                <input type="password" id="confirm-password" name="confirm-password" required>
+                <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" required>
             </div>
+            <div id="password-error" class="error-message"></div> <!-- Password error container -->
             <button type="submit" class="signup-button">Sign Up</button>
         </form>
+        <div class="or-divider">
+            <span>OR</span>
+        </div>
+        <button id="google-signup" class="google-signup-button">
+            <img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
+            Sign up with Google
+        </button>
         <div class="links">
-            <a href="../login/login.html">Already have an account? Login</a>
+            <a href="../login/login.html"><u>Already have an account? Login</u></a>
         </div>
     </div>
+
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <script src="signup.js"></script> <!-- Link to the signup.js file -->
 </body>
 </html>
diff --git a/SignUp/signup.js b/SignUp/signup.js
new file mode 100644
index 00000000..bd139f02
--- /dev/null
+++ b/SignUp/signup.js
@@ -0,0 +1,96 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const signupButton = document.querySelector(".signup-button");
+
+    // List of trusted email domains
+    const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com" , "protonmail.com" , "icloud.com" , "tutanota.com"];
+
+    signupButton.addEventListener("click", (e) => {
+        e.preventDefault();
+
+        const name = document.querySelector("#username").value;
+        const email = document.querySelector("#email").value;
+        const password = document.querySelector("#password").value;
+        const confirmPassword = document.querySelector("#confirm-password").value;
+        const emailError = document.querySelector("#email-error"); // Reference to email error div
+        const passwordError = document.querySelector("#password-error"); // Reference to password error div
+
+        // Clear any previous error messages
+        emailError.textContent = "";
+        emailError.style.display = "none"; // Hide the error message by default
+        passwordError.textContent = "";
+        passwordError.style.display = "none"; // Hide the error message by default
+
+        if (!name || !email || !password || !confirmPassword) {
+            emailError.textContent = "Every field is required.";
+            emailError.style.display = "block";
+            return;
+        }
+
+        // Email domain validation
+        const emailDomain = email.split("@")[1]; // Get the domain from the email
+        if (!trustedDomains.includes(emailDomain)) {
+            emailError.textContent = "Please use an email address from a trusted provider (e.g., Gmail, Outlook, Yahoo) etc.";
+            emailError.style.display = "block";
+            return;
+        }
+
+        // Password matching validation
+        if (password !== confirmPassword) {
+            passwordError.textContent = "Passwords do not match.";
+            passwordError.style.display = "block";
+            return;
+        }
+        
+        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        if (!emailPattern.test(email)) {
+            alert("Please enter a valid email address.");
+            return; // Stop the function if the email is not in the right format
+        }
+
+        const userdata = {
+            name,
+            email,
+            password,
+            confirmPassword
+        };
+
+        registerUser(userdata);
+    });
+
+    const registerUser = async (user) => {
+        try {
+            const res = await fetch("http://localhost:5000/auth/signup", {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(user)
+            });
+
+            const data = await res.json();
+            console.log(data);
+            window.location.href = "http://127.0.0.1:5500/Collect-your-GamingTools/login/login.html";
+        } catch (err) {
+            console.log(err.message);
+        }
+    };
+
+    // Password Strength Check
+    const passwordInput = document.querySelector("#password");
+    const conditions = {
+        length: document.getElementById("length"),
+        uppercase: document.getElementById("uppercase"),
+        lowercase: document.getElementById("lowercase"),
+        number: document.getElementById("number"),
+        special: document.getElementById("special")
+    };
+
+    passwordInput.addEventListener("input", () => {
+        const password = passwordInput.value;
+
+        // Check each condition and toggle the "met" class
+        conditions.length.classList.toggle("met", password.length >= 8);
+        conditions.uppercase.classList.toggle("met", /[A-Z]/.test(password));
+        conditions.lowercase.classList.toggle("met", /[a-z]/.test(password));
+        conditions.number.classList.toggle("met", /\d/.test(password));
+        conditions.special.classList.toggle("met", /[!@#$%^&*(),.?":{}|<>]/.test(password));
+    });
+});
diff --git a/aboutus.html b/aboutus.html
new file mode 100644
index 00000000..b68c19aa
--- /dev/null
+++ b/aboutus.html
@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us - GamingTools</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+    <style>
+        body {
+
+            font-family: 'Poppins', sans-serif;
+            line-height: 1.6;
+            background-image: url(https://github.com/shriyadindi/comingsoonpage/blob/main/background.png?raw=true);
+            margin: 0;
+            padding: 0;
+            background-color: white;
+
+        }
+
+        .container {
+
+            width: 90%;
+            max-width: 1200px;
+            margin: auto;
+            overflow: hidden;
+            padding: 20px;
+
+        }
+
+        .main-content {
+            padding: 40px 0;
+        }
+
+        h1,h2
+         {
+            color: #c7becf;
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        h1 span{
+            color: #f4be0c;
+        }
+
+        /* h2{
+            color: #f4be0c;
+            text-align: center;
+            margin-bottom: 40px;
+        } */
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 30px;
+        }
+
+        .feature {
+            background: #fff;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            text-align: center;
+        }
+
+        .feature:hover {
+            transform: translateX(-5px);
+            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        .feature h3 {
+            color: #e8491d;
+            margin-top: 20px;
+        }
+
+        .feature p{
+            color:#8058ad;
+            font-weight: 600;
+        }
+
+        .feature-icon {
+            font-size: 48px;
+            color: #e8491d;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+        }
+
+        .feature:hover .feature-icon {
+            transform: scale(1.1);
+        }
+
+        .intro {
+            text-align: center;
+            max-width: 800px;
+            margin: 0 auto 40px;
+            font-size: 18px;
+            color: #d0c3df;
+            font-weight: 600;
+        }
+
+        .rocket {
+            width: 250px;
+            position: absolute;
+            right: 10%;
+            bottom: 0;
+            animation: rocket 4s linear infinite;
+        }
+
+        @keyframes rocket {
+            0% {
+                bottom: 0;
+                opacity: 0;
+            }
+
+            100% {
+                bottom: 120%;
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="navbar">
+        <div class="logo-outer">
+            <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
+            <a href="/"><span class="website-name">Collect your GamingTools</span></a>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="./aboutus.html">About Us</a></li>
+                <li><a href="index.html">Game Controllers</a></li>
+                <li><a href="index.html">VR Accessories</a></li>
+                <li><a href="index.html">Gaming Keyboard</a></li>
+                <li><a href="index.html">Others</a></li>
+                <li class="login"><a href="login/login.html">Login</a></li>
+
+                <!-- Inside the navbar ul -->
+                <li class="cart-nav">
+
+                    <a href="#"><img height="25px " width="25px" src="images/cart.png" alt="Cart Icon"> <span
+                            id="cart-count">0</span></a>
+
+                </li>
+
+            </ul>
+
+            <!-- Hamburger Menu Icon -->
+            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+        </nav>
+    </div>
+
+
+    <nav>
+        <ul id="menuList">
+            <li><a href="index.html">Game Controllers</a></li>
+            <li><a href="index.html">VR Accessories</a></li>
+            <li><a href="index.html">Gaming Keyboard</a></li>
+            <li><a href="index.html">Others</a></li>
+            <li class="login"><a href="login/login.html">Login</a></li>
+            <!-- Theme Toggle -->
+        </ul>
+        <!-- Hamburger Menu Icon -->
+        <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+    </nav>
+
+
+    <div class="container main-content">
+        <h1>About <span> Gaming </span>Tools</h1>
+        <p class="intro">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
+            passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
+
+        <h2>Why Choose Us?</h2>
+        
+        <div class="features-grid">
+            <div class="feature">
+                <i class="fas fa-gamepad feature-icon"></i>
+                <h3>Wide Range of Accessories</h3>
+                <p>From controllers to VR headsets, we offer a comprehensive selection for all gaming platforms.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-tags feature-icon"></i>
+                <h3>Competitive Pricing</h3>
+                <p>Get the best gaming gear at unbeatable prices, with regular discounts and promotions.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-truck feature-icon"></i>
+                <h3>Free Shipping</h3>
+                <p>Enjoy free courier services on all orders, making it easy to get your hands on the latest gear.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-user-shield feature-icon"></i>
+                <h3>Secure Shopping</h3>
+                <p>Shop with confidence using our secure checkout process to protect your information.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-exchange-alt feature-icon"></i>
+                <h3>Easy Returns</h3>
+                <p>Hassle-free returns and exchanges to ensure your complete satisfaction with every purchase.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-headset feature-icon"></i>
+                <h3>Customer Support</h3>
+                <p>Our dedicated team is always ready to assist you with any questions or concerns.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-star feature-icon"></i>
+                <h3>Product Reviews</h3>
+                <p>Make informed decisions with help from our customer reviews and ratings.</p>
+            </div>
+
+            <div class="feature">
+                <i class="fas fa-question-circle feature-icon"></i>
+                <h3>FAQs Section</h3>
+                <p>Find quick answers to common questions in our comprehensive FAQ section.</p>
+            </div>
+
+        </div>
+        <img src="https://github.com/shriyadindi/comingsoonpage/blob/main/rocket.png?raw=true" class="rocket">
+    </div>
+
+    <script src="darkMode.js"></script>
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section about">
+                <div class="logo-container">
+                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
+                    <h2 class="logo-text">Collect your GamingTools</h2>
+                </div>
+                <p class="about-text">
+                    Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated
+                    selection of controllers, VR gear, and more.
+                </p>
+                <div class="contact">
+                    <span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
+                    <span><i class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</span>
+                </div>
+                <div class="socials">
+                    <!-- Added classes to the <a> tags to add the Hover animations -->
+                    <a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
+                    <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
+                    <a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a>
+                    <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
+
+                </div>
+            </div>
+            <div class="footer-section links">
+                <h2>Quick Links</h2>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Products</a></li>
+                    <li><a href="#">About Us</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                    <li><a href="#faq">FAQ</a></li>
+                    <li><a href="Contributors/contributor.html">Contributors</a></li>
+                </ul>
+            </div>
+            <div class="footer-section contact-form">
+                <h2>Feedback Form</h2>
+                <form action="#" method="post">
+                    <input type="email" name="email" class="text-input contact-input"
+                        placeholder="Your email address...">
+                    <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
+                    <button type="submit" class="btn btn-big contact-btn">
+                        <i class="fas fa-envelope"></i>
+                        Send
+                    </button>
+                </form>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            &copy; 2024 GamingTools | Designed by Swaraj
+        </div>
+
+    </footer>
+
+    <!-- SIDEBAR -->
+
+    <div class="social-sidebar">
+        <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
+        <ul id="sidebar-content">
+            <li><a class="facebook" href="#"><i class="fa-brands fa-meta"></i></a></li>
+            <li><a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
+            <li><a class="facebook" href="#"><i class="fa-brands fa-instagram"></i></a></li>
+            <li><a class="facebook" href="#"><i class="fa-brands fa-youtube"></i></a></li>
+        </ul>
+    </div>
+        
+    <!-- SIDEBAR -->
+    <div class="social-sidebar">
+        <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
+            <ul id="sidebar-content">
+                <li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
+                <li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter">‌</i></a></li>
+                <li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
+                <li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
+            </ul>
+        </div>
+    <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
+    <i class="fas fa-arrow-left"></i>
+    </div>
+
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+        <div class="scroll-top-icon">
+            <ion-icon name="arrow-up-outline"></ion-icon>
+        </div>
+        <svg class="progress-ring" width="60" height="60">
+            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+                cy="30"></circle>
+        </svg>
+    </button>
+
+    <script>
+        let cartItemCount = 0;
+
+        // Function to handle Add to Cart button click
+        document.getElementById('cart-btn').addEventListener('click', function () {
+            cartItemCount++; // Increment cart count
+            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
+            alert('Item added to cart'); // Show alert
+        });
+
+    </script>
+
+    <!-- this script is for twitter icon  starts -->
+    <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+    <!-- this script is for twitter icon  ends -->
+
+    <!-- Scripts -->
+    <script src="script.js"></script>
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+
+    <script>
+        window.embeddedChatbotConfig = {
+            chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
+            domain: "www.chatbase.co"
+        }
+    </script>
+    <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
+    </script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+
+
+    <div class="gtranslate_wrapper"></div>
+    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+
+</body>
+
+
+</html>
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 00000000..dbeb8a57
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,18 @@
+# Step 1: Use an official Node.js image from Docker Hub
+FROM node:14-alpine
+
+# Step 2: Set working directory in container
+WORKDIR /usr/src/app
+
+# Step 3: Copy package.json and install dependencies
+COPY backend/package*.json ./
+RUN npm install
+
+# Step 4: Copy the backend code to the container
+COPY backend/ .
+
+# Step 5: Expose the backend's port (if your backend runs on port 3000, adjust as needed)
+EXPOSE 3000
+
+# Step 6: Start the backend server
+CMD ["npm", "start"]
diff --git a/backend/app.js b/backend/app.js
index 2240a583..84d8ceb0 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -1,6 +1,6 @@
 const express = require('express');
 const app = express();
-
+const emailRouter = require("./router/EmailRoute.js");
 const authRouter = require('./router/authRoute.js');
 const databaseconnect = require('./config/databaseConfig.js');
 const cookieParser = require('cookie-parser');
@@ -16,7 +16,7 @@ app.use(cors({ origin: [process.env.CLIENT_URL], credentials: true })); //Third-
 
 // Auth router
 app.use('/auth', authRouter);
-
+app.use("/email", emailRouter);
 app.use('/', (req, res) => {
   res.status(200).json({ data: 'JWTauth server ;)' });
 });
diff --git a/backend/controller/EmailController.js b/backend/controller/EmailController.js
new file mode 100644
index 00000000..3b6dd152
--- /dev/null
+++ b/backend/controller/EmailController.js
@@ -0,0 +1,33 @@
+const nodemailer = require("nodemailer");
+
+async function SendEmailController(req, resp) {
+  const transporter = nodemailer.createTransport({
+    service: "gmail",
+    auth: {
+      user: "yourEmail@gmail.com", // youe email
+      pass: "password", // your password
+    },
+  });
+
+  const mailOptions = {
+    from: "yourEmail@gmail.com",
+    to: "yourEmail@gmail.com", // email where you want to receive the message
+    subject: "New From Collect your GamingTools",
+    text: `
+            Name: ${req.body.Name}
+            Email: ${req.body.Email}
+            Message: ${req.body.Message}`,
+  };
+
+  transporter.sendMail(mailOptions, (error, info) => {
+    if (error) {
+      console.log("Error sending email: " + error);
+      resp.status(500).send("Error sending email");
+    } else {
+      console.log("Email sent: " + info.response);
+      resp.status(200).send("Form data sent successfully");
+    }
+  });
+}
+
+module.exports = { SendEmailController };
diff --git a/backend/controller/authController.js b/backend/controller/authController.js
index e971b057..842e5561 100644
--- a/backend/controller/authController.js
+++ b/backend/controller/authController.js
@@ -14,7 +14,7 @@ const emailValidator = require("email-validator");
 
 const signUp = async (req, res, next) => {
   const { name, email, password, confirmPassword } = req.body;
-
+console.log(name , email,password,confirmPassword)
   /// every field is required
   if (!name || !email || !password || !confirmPassword) {
     return res.status(400).json({
@@ -137,7 +137,7 @@ const signIn = async (req, res, next) => {
 const logout = async (req, res, next) => {
   try {
     const cookieOption = {
-      expires: new Date(), // current expiry date
+      expires: new Date(Date.now()), // current expiry date
       httpOnly: true //  not able to modify  the cookie in client side
     };
 
diff --git a/backend/middleware/jwtAuth.js b/backend/middleware/jwtAuth.js
index 9cdd99ec..aeec6509 100644
--- a/backend/middleware/jwtAuth.js
+++ b/backend/middleware/jwtAuth.js
@@ -2,7 +2,7 @@ const JWT = require("jsonwebtoken");
 
 // router level middleware function
 const jwtAuth = (req, res, next) => {
-  console.log(req.cookies?.token);
+  
   // get cookie token(jwt token generated using json.sign()) form the request
   const token = ( req.cookies?.token) || null;
 
diff --git a/backend/package-lock.json b/backend/package-lock.json
index ec65e660..8be6ff87 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -12,11 +12,12 @@
         "bcrypt": "^5.1.1",
         "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
+        "crypto": "^1.0.1",
         "dotenv": "^16.4.5",
         "email-validator": "^2.0.4",
         "express": "^4.21.0",
         "jsonwebtoken": "^9.0.2",
-        "mongoose": "^8.6.3",
+        "mongoose": "^8.7.0",
         "nodemon": "^3.1.5"
       }
     },
@@ -368,6 +369,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/crypto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz",
+      "integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==",
+      "deprecated": "This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in."
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1133,9 +1140,9 @@
       }
     },
     "node_modules/mongodb": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.8.0.tgz",
-      "integrity": "sha512-HGQ9NWDle5WvwMnrvUxsFYPd3JEbqD3RgABHBQRuoCEND0qzhsd0iH5ypHsf1eJ+sXmvmyKpP+FLOKY8Il7jMw==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.9.0.tgz",
+      "integrity": "sha512-UMopBVx1LmEUbW/QE0Hw18u583PEDVQmUmVzzBRH0o/xtE9DBRA5ZYLOjpLIa03i8FXjzvQECJcqoMvCXftTUA==",
       "dependencies": {
         "@mongodb-js/saslprep": "^1.1.5",
         "bson": "^6.7.0",
@@ -1187,13 +1194,13 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "8.6.3",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.6.3.tgz",
-      "integrity": "sha512-++yRmm7hjMbqVA/8WeiygTnEfrFbiy+OBjQi49GFJIvCQuSYE56myyQWo4j5hbpcHjhHQU8NukMNGTwAWFWjIw==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.7.0.tgz",
+      "integrity": "sha512-rUCSF1mMYQXjXYdqEQLLlMD3xbcj2j1/hRn+9VnVj7ipzru/UoUZxlj/hWmteKMAh4EFnDZ+BIrmma9l/0Hi1g==",
       "dependencies": {
         "bson": "^6.7.0",
         "kareem": "2.6.3",
-        "mongodb": "6.8.0",
+        "mongodb": "6.9.0",
         "mpath": "0.9.0",
         "mquery": "5.0.0",
         "ms": "2.1.3",
diff --git a/backend/package.json b/backend/package.json
index 7380d996..2d1344de 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start":"nodemon ./index.js",
+    "start": "nodemon ./index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -14,11 +14,13 @@
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
+    "crypto": "^1.0.1",
     "dotenv": "^16.4.5",
     "email-validator": "^2.0.4",
+    "nodemailer": "^6.9.15",
     "express": "^4.21.0",
     "jsonwebtoken": "^9.0.2",
-    "mongoose": "^8.6.3",
+    "mongoose": "^8.7.0",
     "nodemon": "^3.1.5"
   }
 }
diff --git a/backend/router/EmailRoute.js b/backend/router/EmailRoute.js
new file mode 100644
index 00000000..332afd30
--- /dev/null
+++ b/backend/router/EmailRoute.js
@@ -0,0 +1,8 @@
+const express = require("express");
+const emailRouter = express.Router();
+
+const { SendEmailController } = require("../controller/EmailController");
+
+emailRouter.post("/SendEmail", SendEmailController);
+
+module.exports = emailRouter;
\ No newline at end of file
diff --git a/backend/router/authRoute.js b/backend/router/authRoute.js
index 48f66e0e..b87a24c5 100644
--- a/backend/router/authRoute.js
+++ b/backend/router/authRoute.js
@@ -1,6 +1,7 @@
 const express = require("express");
 const authRouter = express.Router();
 const jwtAuth = require("../middleware/jwtAuth.js");
+const rateLimit = require("express-rate-limit");
 
 const {
   signUp,
@@ -8,12 +9,22 @@ const {
   forgotPassword,
   resetPassword,
   getUser,
-  logout
+  logout,
 } = require("../controller/authController.js");
 
+// Create a rate limiter for the /signin route
+const signinLimiter = rateLimit({
+  windowMs: 5 * 60 * 1000, // 5 minutes
+  max: 5, // Limit each IP to 5 requests per windowMs
+  message:
+    "Too many login attempts from this IP, please try again after 5 minutes",
+});
+
+// Apply routes
 authRouter.post("/signup", signUp);
-authRouter.post("/signin", signIn);
 
+// Apply the rate limiter to the signin route
+authRouter.post("/signin", signinLimiter, signIn);
 
 authRouter.get("/user", jwtAuth, getUser);
 authRouter.get("/logout", jwtAuth, logout);
diff --git a/darkMode.js b/darkMode.js
new file mode 100644
index 00000000..5da2cc64
--- /dev/null
+++ b/darkMode.js
@@ -0,0 +1,22 @@
+const checkbox = document.getElementById('checkbox')
+const modeLabel = document.getElementById('mode-label')
+
+// Check if dark mode is already enabled
+if (localStorage.getItem('theme') === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark')
+    checkbox.checked = true
+    modeLabel.textContent = 'Dark Mode'
+}
+
+// Add event listener for toggle switch
+checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+        document.documentElement.setAttribute('data-theme', 'dark')
+        localStorage.setItem('theme', 'dark')
+        modeLabel.textContent = 'Dark Mode'
+    } else {
+        document.documentElement.setAttribute('data-theme', 'light')
+        localStorage.setItem('theme', 'light')
+        modeLabel.textContent = 'Light Mode'
+    }
+})
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..e569ce17
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,41 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile  
+    ports:
+      - "80:80"  
+    depends_on:
+      - backend  
+    networks:
+      - app-network
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile 
+    ports:
+      - "3000:3000"  
+    networks:
+      - app-network
+    environment:
+      - NODE_ENV=production  
+      - MONGODB_URI=mongodb://mongo:27017/mydatabase  
+    depends_on:
+      - mongo  
+
+  mongo:
+    image: mongo:latest  
+    ports:
+      - "27017:27017" 
+    volumes:
+      - mongo_data:/data/db  
+    networks:
+      - app-network
+
+networks:
+  app-network:
+    driver: bridge
+
+volumes:
+  mongo_data:  
\ No newline at end of file
diff --git a/images/7725176.jpg b/images/7725176.jpg
new file mode 100644
index 00000000..96b49306
Binary files /dev/null and b/images/7725176.jpg differ
diff --git a/images/X[Twitter Logo].png b/images/X[Twitter Logo].png
new file mode 100644
index 00000000..6857de6e
Binary files /dev/null and b/images/X[Twitter Logo].png differ
diff --git a/images/boy1.png b/images/boy1.png
new file mode 100644
index 00000000..26e8384c
Binary files /dev/null and b/images/boy1.png differ
diff --git a/images/boy2.png b/images/boy2.png
new file mode 100644
index 00000000..027166c0
Binary files /dev/null and b/images/boy2.png differ
diff --git a/images/cart.png b/images/cart.png
new file mode 100644
index 00000000..93046e4e
Binary files /dev/null and b/images/cart.png differ
diff --git a/images/chair.png b/images/chair.png
deleted file mode 100644
index b5b6d61a..00000000
Binary files a/images/chair.png and /dev/null differ
diff --git a/images/controller3.png b/images/controller3.png
deleted file mode 100644
index 4842236c..00000000
Binary files a/images/controller3.png and /dev/null differ
diff --git a/images/girl1.png b/images/girl1.png
new file mode 100644
index 00000000..c9d04411
Binary files /dev/null and b/images/girl1.png differ
diff --git a/images/girl2.png b/images/girl2.png
new file mode 100644
index 00000000..6444a4f4
Binary files /dev/null and b/images/girl2.png differ
diff --git a/images/google-icon.png b/images/google-icon.png
new file mode 100644
index 00000000..35dc31de
Binary files /dev/null and b/images/google-icon.png differ
diff --git a/images/metaquest.jpg b/images/metaquest.jpg
new file mode 100644
index 00000000..7505ca3e
Binary files /dev/null and b/images/metaquest.jpg differ
diff --git a/images/newchair.png b/images/newchair.png
new file mode 100644
index 00000000..0b5857ca
Binary files /dev/null and b/images/newchair.png differ
diff --git a/images/newcontroller3.png b/images/newcontroller3.png
new file mode 100644
index 00000000..faf512c9
Binary files /dev/null and b/images/newcontroller3.png differ
diff --git a/images/popup.png b/images/popup.png
new file mode 100644
index 00000000..c16e43a7
Binary files /dev/null and b/images/popup.png differ
diff --git a/images/visionpro.png b/images/visionpro.png
new file mode 100644
index 00000000..5a2fbb84
Binary files /dev/null and b/images/visionpro.png differ
diff --git a/index.html b/index.html
index 67bb775d..f90b9ead 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,23 @@
 <html lang="en">
 
 <head>
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Collect your GamingTools</title>
+
+    <!--adding meta keywords and description -->
+    <meta name="keywords"
+        content="gaming tools, game accessories, gaming gear, gaming equipment, gaming setup, game controller, gaming mouse, gaming keyboard, gaming headset, gaming software, eSports tools, gaming community, gaming chair, VR gaming tools, game streaming equipment, console gaming, PC gaming, mobile gaming, gaming tips, game reviews, gaming news">
+    <meta name="description"
+        content="Collect and discover the ultimate gaming tools and accessories to enhance your gaming experience. From high-performance controllers and mice to immersive headsets and VR gaming equipment, we have everything you need for console, PC, and mobile gaming. Join our gaming community for tips and reviews to stay ahead in the game!">
+
     <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
     <style>
         .scroll-button {
@@ -43,11 +56,120 @@
             </nav>
             <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
         </div>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+        integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMhZj7z9qvhs8kcJ6D6t3h7jsKK4Gk16+/D57g" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="./popup/popup.css" />
+
+</head>
+
+<body>
+    <div id="progressBarContainer">
+        <div id="progressBar"></div>
+    </div>
+
+    <div class="container">
+
+        <div class="navbar">
+            <div class="logo-outer">
+                <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
+                <a href="/"><span class="website-name">Collect your GamingTools</span></a>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="./index.html">Home</a></li>
+                    <li><a href="./aboutus.html">About Us</a></li>
+                    <li><a href="#controller">Game Controllers</a></li>
+                    <li><a href="#vrsection">VR Accessories</a></li>
+                    <li><a href="#keyboard">Gaming Keyboard</a></li>
+                    <li><a href="#others">Others</a></li>
+
+                    <li class="login"><a href="login/login.html">Login</a></li>
+                    <li><label class="switch">
+                            <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                            <span class="slider"></span>
+                        </label></li>
+                    <!-- Inside the navbar ul -->
+                    <a href="#" class="cart-button">
+                        <img src="images/cart.png" alt="Cart Icon">
+                        <span id="cart-count">0</span>
+                        </a>
+                </ul>
+
+                <!-- Hamburger Menu Icon -->
+                <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+            </nav>
+        </div>
+        </nav>
+
+        <nav>
+            <ul id="menuList">
+                <li><a href="#controller">Game Controllers</a></li>
+                <li><a href="#vrsection">VR Accessories</a></li>
+                <li><a href="#keyboard">Gaming Keyboard</a></li>
+                <li><a href="#others">Others</a></li>
+                <li class="login"><a href="login/login.html">Login</a></li>
+                <!-- Theme Toggle -->
+        <li><label class="switch">
+            <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+            <span class="slider"></span>
+        </label></li>
+            </ul>
+            <!-- Hamburger Menu Icon -->
+            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+        </nav>
+
+        <section class="hero">
+            <div class="overlay"></div>
+            <div class="hero-content">
+                <!-- Search Bar (initially hidden) -->
+
+                <div class="searchbar-outer">
+                    <div class="search-bar hidden" id="searchBar">
+                        <input type="text" id="search-input" placeholder="Search..." />
+                        <button type="button" onclick="performSearch()"><i class="fas fa-search"></i></button>
+                    </div>
+                </div>
+                <h1 data-aos="fade-down">Welcome to GamingTools</h1>
+                <p data-aos="fade-down">Your one-stop shop for all gaming accessories.</p>
+                <a href="#controller" class="cta-btn" data-aos="fade-down">Explore Products</a>
+            </div>
+        </section>
+
+        <!-- Pop-up for email registration  HTML Goes Here -->
+
+
+        <div id="popup" class="popup">
+            <div class="popup-content">
+                <div class="popup-left">
+                    <img src="images/popup.png" alt="Gaming Tools Image">
+                </div>
+
+                <div class="popup-right">
+                    <a href="# " class="close1-btn"> <img src="images/logo.png" class="logo1" alt="Logo"></a>
+                    <h1>Unlock the Ultimate Gaming Experience!</h1>
+                    <h2 class="h2">Sign up for exclusive offers & updates</h2>
+                    <p>Join our community and get upto <strong>30% off</strong> on your first deal</p>
+                    <form id="emailForm">
+                        <input type="email" id="email" placeholder="Enter your email" required>
+                        <button type="submit" class="signup-btn1">Get 30% Off Now</button>
+                    </form>
+                    <a href="#" class="no-thanks close1-btn">No thanks</a>
+                    <p class="terms">By signing up, you agree to our <a href="#">Terms of Service</a> and <a
+                            href="#">Privacy Policy</a>.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pop up HTML Ends here -->
 
         <!-- PS4 Controller Section -->
-        <div class="row">
-            <div class="col-1">
-                <h2>PS4 V2 Dualshock 4</h2>
+
+        <div class="row" id="controller">
+
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">PS4 V2 Dualshock 4</h2>
                 <h3>Wireless Controllers for PlayStation 4</h3>
                 <p>(Compatible/Generic)</p>
                 <div class="price">
@@ -63,22 +185,21 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.1★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
+            <div class="col-2" data-aos="fade-left">
                 <img src="images/controller1.png" class="controller" alt="Controller">
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
-                </div>
             </div>
         </div>
 
         <!-- Xbox Controller Section -->
         <div class="row">
-            <div class="col-1">
-                <h2>Xbox Wireless Controller</h2>
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Xbox Wireless Controller</h2>
                 <h3>Controllers for Xbox One and Series X</h3>
                 <p>(Official)</p>
                 <div class="price">
@@ -94,22 +215,23 @@ <h3>Controllers for Xbox One and Series X</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.8★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
-                <img src="images/controller2.png" class="controller" alt="Controller">
+            <div class="col-2" data-aos="fade-left">
+                <img src="images/newcontroller3.png" class="controller" alt="Controller">
+                <!-- replaced old blurry image with enhanced image -->
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
-                </div>
+
             </div>
         </div>
 
         <!-- Nintendo Switch Controller Section -->
         <div class="row">
-            <div class="col-1">
-                <h2>Nintendo Switch Pro Controller</h2>
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Nintendo Switch Pro Controller</h2>
                 <h3>Wireless Controllers for Nintendo Switch</h3>
                 <p>(Official)</p>
                 <div class="price">
@@ -125,22 +247,87 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.2★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
-                <img src="images/controller3.png" class="controller" alt="Controller">
+            <div class="col-2" data-aos="fade-left">
+                <img src="images/controller2.png" class="controller"
+                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
+
+            </div>
+        </div>
+
+        <!-- VR Headset Section -->
+        <div class="row" id="vrsection">
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Meta Quest Pro</h2>
+                <h3>VR Headset from Meta</h3>
+                <p>(Official)</p>
+                <div class="price">
+                    <span class="original-price">&#8377;40000</span>
+                    <span class="discounted-price">&#8377;35200</span>
+                    <span class="discount">12% off</span>
+                </div>
+                <div class="rating">
+                    <span>★★★★☆</span>
+                    <p>(871 reviews)</p>
+                </div>
+                <div class="overall-rating">
+                    <span>Overall Rating:</span>
+                    <p class="star">4.2★</p>
+                </div>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
+            <div class="col-2" data-aos="fade-left">
+                <img src="images/metaquest.jpg" class="controller"
+                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
+                <div class="color-box"></div>
+
+            </div>
         </div>
 
-        <!-- Gaming Mouse Section -->
+        <!-- VR Headset Section 2 -->
         <div class="row">
-            <div class="col-1">
-                <h2>Logitech G502 Hero</h2>
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Apple Vision Pro</h2>
+                <h3>VR Headset from Apple</h3>
+                <p>(Official)</p>
+                <div class="price">
+                    <span class="original-price">&#8377;293999</span>
+                    <span class="discounted-price">&#8377;264599</span>
+                    <span class="discount">10% off</span>
+                </div>
+                <div class="rating">
+                    <span>★★★★★</span>
+                    <p>(235 reviews)</p>
+                </div>
+                <div class="overall-rating">
+                    <span>Overall Rating:</span>
+                    <p class="star">4.8★</p>
+                </div>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
+            </div>
+            <div class="col-2" data-aos="fade-left">
+                <img src="images/visionpro.png" class="controller"
+                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
+                <div class="color-box"></div>
+
+            </div>
+        </div>
+
+        <!-- Gaming Mouse Section -->
+        <div class="row" id="others">
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Logitech G502 Hero</h2>
                 <h3>High Performance Gaming Mouse</h3>
                 <p>(Wired)</p>
                 <div class="price">
@@ -156,22 +343,22 @@ <h3>High Performance Gaming Mouse</h3>
                     <span>Overall Rating:</span>
                     <p class="star">5.0★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
+            <div class="col-2" data-aos="fade-left">
                 <img src="images/mouse.png" class="controller" alt="Gaming Mouse">
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
-                </div>
+
             </div>
         </div>
 
         <!-- Gaming Keyboard Section -->
-        <div class="row">
-            <div class="col-1">
-                <h2>Razer BlackWidow</h2>
+        <div class="row" id="keyboard">
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Razer BlackWidow</h2>
                 <h3>Mechanical Gaming Keyboard</h3>
                 <p>(Wired)</p>
                 <div class="price">
@@ -187,22 +374,22 @@ <h3>Mechanical Gaming Keyboard</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.5★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
+            <div class="col-2" data-aos="fade-left">
                 <img src="images/keyboard.png" class="controller" alt="Gaming Keyboard">
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
-                </div>
+
             </div>
         </div>
 
         <!-- Gaming Headset Section -->
         <div class="row">
-            <div class="col-1">
-                <h2>SteelSeries Arctis 7</h2>
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">SteelSeries Arctis 7</h2>
                 <h3>Wireless Gaming Headset</h3>
                 <p>(Surround Sound)</p>
                 <div class="price">
@@ -218,22 +405,22 @@ <h3>Wireless Gaming Headset</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.7★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
+            <div class="col-2" data-aos="fade-left">
                 <img src="images/headset.png" class="controller" alt="Gaming Headset">
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
-                </div>
+
             </div>
         </div>
 
         <!-- Gaming Chair Section -->
         <div class="row">
-            <div class="col-1">
-                <h2>Secretlab Omega</h2>
+            <div class="col-1" data-aos="fade-right">
+                <h2 class="card-heading">Secretlab Omega</h2>
                 <h3>Ergonomic Gaming Chair</h3>
                 <p>(Adjustable)</p>
                 <div class="price">
@@ -249,69 +436,362 @@ <h3>Ergonomic Gaming Chair</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.8★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <div class="btn-section">
+                    <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                </div>
             </div>
-            <div class="col-2">
-                <img src="images/chair.png" class="controller" alt="Gaming Chair">
+            <div class="col-2" data-aos="fade-left">
+                <img src="images/newchair.png" class="controller" alt="Gaming Chair">
                 <div class="color-box"></div>
-                <div class="add-btn">
-                    <img src="images/add.png" alt="Add">
-                    <p><small>Add to cart</small></p>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- FAQ Section -->
+    <section id="faq">
+        <div class="faq-container">
+            <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
+
+            <div class="faq" data-aos="fade-right">
+                <input type="checkbox" id="faq1">
+                <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span
+                        class="arrow"></span></label>
+                <div class="faq-answer">
+                    We have tried our best to make all the tools available for enthusiastic gamers.
+                </div>
+            </div>
+
+            <div class="faq" data-aos="fade-right">
+                <input type="checkbox" id="faq2">
+                <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the
+                    product be replaced as per my need? <span class="arrow"></span></label>
+                <div class="faq-answer">
+                    By considering our terms and conditions, further actions will be taken.
+                </div>
+            </div>
+
+            <div class="faq" data-aos="fade-right">
+                <input type="checkbox" id="faq3">
+                <label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span
+                        class="arrow"></span></label>
+                <div class="faq-answer">
+                    Yes, you are welcome to buy multiple products at one time.
+                </div>
+            </div>
+
+            <div class="faq" data-aos="fade-right">
+                <input type="checkbox" id="faq4">
+                <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span
+                        class="arrow"></span></label>
+                <div class="faq-answer">
+                    We have courier services for our customers and it's absolutely free.
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- testimonial -->
+
+    <div id="page" class="site">
+        <div class="container-swipe">
+            <div class="testi">
+                <div class="head">
+                    <h3>Testimonials</h3>
+                    <p>What Our Customers Say</p>
+                </div>
+                <div class="body swiper">
+                    <ul class="swiper-wrapper">
+                        <li class="swiper-slide">
+                            <div class="wrapper">
+                                <div class="thumbnail">
+                                    <img src="images/girl1.png" alt="">
+                                </div>
+                                <div class="aside">
+                                    <p>I’ve been searching for the perfect gaming accessories for ages, and I finally
+                                        found them on this website! The variety available is truly impressive; I was
+                                        able to find exactly what I needed to enhance my gaming experience. The quality
+                                        of the products exceeded my expectations.</p>
+                                    <div class="name">
+                                        <h4>Sarah malik</h4>
+                                        <p>★★★★★</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="swiper-slide">
+                            <div class="wrapper">
+                                <div class="thumbnail">
+                                    <img src="images/boy2.png" alt="">
+                                </div>
+                                <div class="aside">
+                                    <p>Shopping on this website was a breeze! I love how user-friendly the interface is;
+                                        it made navigating through the different categories so easy. I was able to find
+                                        exactly what I needed without any hassle. The checkout process was smooth, and I
+                                        received my items promptly</p>
+                                    <div class="name">
+                                        <h4>John Doe</h4>
+                                        <p>★★★★☆</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="swiper-slide">
+                            <div class="wrapper">
+                                <div class="thumbnail">
+                                    <img src="images/boy1.png" alt="">
+                                </div>
+                                <div class="aside">
+                                    <p>My order arrived much faster than I anticipated, which was a huge plus. The
+                                        customer support team was incredibly helpful when I had a question about my
+                                        order. I purchased a gaming headset, and it works perfectly! It has made a
+                                        significant difference in my gaming sessions.</p>
+                                    <div class="name">
+                                        <h4>Alex Johnson</h4>
+                                        <p>★★★★★</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="swiper-slide">
+                            <div class="wrapper">
+                                <div class="thumbnail">
+                                    <img src="images/girl2.png" alt="">
+                                </div>
+                                <div class="aside">
+                                    <p>As a serious gamer, I always look for high-quality gear that can enhance my
+                                        performance. I stumbled upon this website and was blown away by the selection! I
+                                        purchased a gaming mouse and a mechanical keyboard, and both have drastically
+                                        improved my gameplay. .</p>
+                                    <div class="name">
+                                        <h4>Emily Davismore</h4>
+                                        <p>★★★★☆</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <!-- pagination -->
+                    <div class="swiper-pagination"></div>
+
+                    <!--  navigation buttons -->
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
+
                 </div>
             </div>
         </div>
     </div>
 
-    <footer>
-        <div class="footer-container">
-            <div class="footer-content">
-                <div class="footer-section">
-                    <div class="logo-name">
-                        <img src="images/logo.png" alt="Logo" />
-                        <h4>Collect your GamingTools</h4>
-                    </div>
-                    <p>
-                        Collect your GamingTools is your one-stop shop for the best gaming
-                        accessories. We provide a wide range of controllers, VR
-                        accessories, media remotes, and more.
-                    </p>
-                </div>
-                <div class="footer-section">
-                    <h4>Contact Us</h4>
-                    <p class="contact">Email: support@gamingtools.com</p>
-                    <p class="contact">Phone: +123 456 7890</p>
-                    <h4>Our Address</h4>
-                    <p>Park Street, Kolkata - 700001</p>
-                    <p>West Bengal, India</p>
-                </div>
-                <div class="footer-section">
-                    <h4 class="follow">Follow Us on</h4>
-                    <div class="social-links">
-                        <a href="https://www.facebook.com/" target="_blank">
-                            <ion-icon name="logo-facebook"></ion-icon>
-                        </a>
-                        <a href="https://www.twitter.com/" target="_blank">
-                            <ion-icon name="logo-twitter"></ion-icon>
-                        </a>
-                        <a href="https://www.instagram.com/" target="_blank" class="instagram-link">
-                            <ion-icon name="logo-instagram" class="instagram-icon"></ion-icon>
-                        </a>
-                        <a href="https://pk.linkedin.com/" target="_blank">
-                            <ion-icon name="logo-linkedin"></ion-icon>
-                        </a>
-                    </div>
+
+    <!-- testimonial end -->
+
+
+
+    <section id="contact" data-aos="fade-right">
+        <div class="card pb-5 pt-1">
+            <div class="card-header">
+                <h2>Contact Our Customer Support Team</h2>
+                <p class="contact-message">
+                    We're here to assist you with any questions or concerns you may have.
+                </p>
+
+
+            </div>
+            <div class="card-body">
+                <div class="image-section">
+                    <img src="images/7725176.jpg" alt="Contact Image"
+                        style="max-width: 80%; height: auto; max-height: 500px;">
+                </div>
+                <div class="form-section">
+                    <form id="contactForm">
+                        <div class="form-group">
+                            <label for="name"><i class="fas fa-user"></i> Name</label>
+                            <input type="text" id="name" name="name" placeholder="Your name">
+                        </div>
+                        <div class="form-group">
+                            <label for="email"><i class="fas fa-envelope"></i> Email</label>
+                            <input type="email" id="email" name="email" placeholder="Your email">
+                        </div>
+                        <div class="form-group">
+                            <label for="message"><i class="fas fa-comment"></i> Message</label>
+                            <textarea id="message" name="message" placeholder="Your message"></textarea>
+                        </div>
+                        <button type="submit">Send</button>
+                    </form>
+
+                    <script>
+                        // Function to load form data from local storage
+                        function loadFormData() {
+                            const data = JSON.parse(localStorage.getItem('formData')) || [];
+                            if (data.length > 0) {
+                                console.log('Saved Form Data:', data);
+                            }
+                        }
+
+                        // Function to save form data to local storage
+                        function saveFormData() {
+                            const name = document.getElementById('name').value;
+                            const email = document.getElementById('email').value;
+                            const message = document.getElementById('message').value;
+
+                            const newEntry = { name, email, message };
+                            const existingData = JSON.parse(localStorage.getItem('formData')) || [];
+                            existingData.push(newEntry);
+                            localStorage.setItem('formData', JSON.stringify(existingData));
+                        }
+
+                        // Event listener for form submission
+                        document.getElementById('contactForm').addEventListener('submit', function (event) {
+                            event.preventDefault();
+                            saveFormData();
+                            clearForm();
+                            alert('Message sent!');
+                        });
+
+                        // Function to clear input fields
+                        function clearForm() {
+                            document.getElementById('name').value = '';
+                            document.getElementById('email').value = '';
+                            document.getElementById('message').value = '';
+                        }
+
+                        // Load the form data when the page is loaded
+                        window.onload = loadFormData;
+                    </script>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section about">
+                <div class="logo-container">
+                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
+                    <h2 class="logo-text">Collect your GamingTools</h2>
+                </div>
+                <p class="about-text">
+                    Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated
+                    selection of controllers, VR gear, and more.
+                </p>
+                <div class="contact">
+                    <span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
+                    <span><i class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</span>
                 </div>
+                <div class="socials">
+                    <!-- Added classes to the <a> tags to add the Hover animations -->
+                    <a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
+                    <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
+                    <a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a>
+                    <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
+                </div>
+            </div>
+            <div class="footer-section quick-links">
+                <!-- Quick Links Content -->
+            </div>
+            <div class="footer-section links">
+                <h2>Quick Links</h2>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Products</a></li>
+                    <li><a href="#">About Us</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                    <li><a href="#faq">FAQ</a></li>
+                    <li><a href="Contributors/contributor.html">Contributors</a></li>
+                    <li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
+                </ul>
             </div>
-            <div class="footer-bottom">
-                <p>&copy; 2024 Collect your GamingTools - All rights reserved.</p>
-                <p>Made by Swaraj &#128512;</p>
+            <div class="footer-section contact-form">
+                <h2>Feedback Form</h2>
+                <form action="#" method="post">
+                    <input type="email" name="email" class="text-input contact-input"
+                        placeholder="Your email address...">
+                    <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
+                    <button type="submit" class="btn btn-big contact-btn">
+                        <i class="fas fa-envelope"></i>
+                        Send
+                    </button>
+                </form>
             </div>
         </div>
-    </footer>
+        <div class="footer-bottom">
+            <p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
+            <p>Developed by <span><a href="https://my-portfolio-git-main-swaraj-das-projects.vercel.app/"
+                        target="_blank">Swaraj</a></span></p>
+        </div>
 
+    </footer>
     <button id="scrollToTop" class="scroll-button">Scroll to Top</button>
+    <!-- SIDEBAR -->
+
+    <div class="social-sidebar">
+        <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
+        <ul id="sidebar-content">
+            <li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
+            <li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a></li>
+            <li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
+            <li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
+        </ul>
+    </div>
+    <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
+        <i class="fas fa-arrow-left"></i>
+    </div>
+
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+        <div class="scroll-top-icon">
+            <ion-icon name="arrow-up-outline"></ion-icon>
+        </div>
+        <svg class="progress-ring" width="60" height="60">
+            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+                cy="30"></circle>
+        </svg>
+    </button>
+
+    <script>
+        let cartItemCount = 0;
+
+        // Function to handle Add to Cart button click
+        document.getElementById('cart-btn').addEventListener('click', function () {
+            cartItemCount++; // Increment cart count
+            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
+            alert('Item added to cart'); // Show alert
+        });
+
+    </script>
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script>
+        var swiper = new Swiper('.swiper-container', {
+            slidesPerView: 1,
+            spaceBetween: 30,
+            loop: true,
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true,
+            },
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+        });
+
+    </script>
+
+    <!-- this script is for twitter icon  starts -->
+    <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+    <!-- this script is for twitter icon  ends -->
+
+    <!-- Scripts -->
+    <!-- testimonial script -->
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
     <script src="script.js"></script>
+    <script src="popup/popup.js"></script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
     <script>
@@ -322,6 +802,24 @@ <h4 class="follow">Follow Us on</h4>
             });
         };
     </script>
+    <script>
+        window.embeddedChatbotConfig = {
+            chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
+            domain: "www.chatbase.co"
+        }
+    </script>
+    <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
+    </script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+
+    <div class="gtranslate_wrapper"></div>
+    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
 </body>
 
-</html>
+
+</html>
\ No newline at end of file
diff --git a/login/1.jpg b/login/1.jpg
new file mode 100644
index 00000000..88690af6
Binary files /dev/null and b/login/1.jpg differ
diff --git a/login/forgot.css b/login/forgot.css
new file mode 100644
index 00000000..c6f485dd
--- /dev/null
+++ b/login/forgot.css
@@ -0,0 +1,351 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+/*to change bg image use here*/
+body {
+  background: url("https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2")
+    no-repeat center center fixed;
+  background-size: cover;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  color: white;
+  text-shadow: 1px 1px 2px #000;
+}
+.login-container {
+  backdrop-filter: blur(10px);
+  opacity: 0.85;
+  background-color: rgba(0, 0, 0, 0);
+  padding: 2rem;
+  border-radius: 20px;
+  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  max-width: 40px;
+  width: 100%;
+  animation: fadeIn 2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 0.75;
+    transform: scale(10);
+  }
+}
+
+h1 {
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  color: #fb5283;
+}
+
+.input-group {
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+}
+
+input[type="text"],
+input[type="password"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #6a1b9a;
+  border-radius: 5px;
+  background-color: #3a3f44;
+  color: white;
+  font-family: "Press Start 2P", cursive;
+  font-size: 0.875rem;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+  outline: none;
+  border-color: #ba68c8;
+  background-color: #2a2e32;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+/* and here for bg image*/
+body {
+  background: url("https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2")
+    no-repeat center center fixed;
+  background-size: cover;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  color: white;
+  text-shadow: 1px 1px 2px #000;
+}
+
+.login-container {
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 5rem;
+  border-radius: 20px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+  animation: fadeIn 1.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 0.75;
+    transform: scale(1);
+  }
+}
+
+h1 {
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  color: #fb5283;
+}
+
+.input-group {
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+}
+
+input[type="email"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #6a1b9a;
+  border-radius: 5px;
+  background-color: #3a3f44;
+  color: white;
+  font-family: "Press Start 2P", cursive;
+  font-size: 0.875rem;
+}
+
+input[type="email"]:focus {
+  outline: none;
+  border-color: #ba68c8;
+  background-color: #2a2e32;
+}
+
+body {
+  text-align: center;
+  background-color: #ffcc8e;
+}
+
+.button {
+  position: relative;
+  display: inline-block;
+  margin: 15px;
+}
+
+/*reset button*/
+.button a {
+  color: white;
+  font-family: Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+  text-align: center;
+  text-decoration: none;
+  background-color: #ffa12b;
+  display: block;
+  position: relative;
+  padding: 15px 50px;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-shadow: 0px 1px 0px #000;
+  filter: dropshadow(color=#000, offx=0px, offy=1px);
+
+  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+  -moz-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+  box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.button a:active {
+  top: 10px;
+  background-color: #f78900;
+
+  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
+  -moz-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3pxpx 0 #915100;
+  box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
+}
+
+.button:after {
+  content: "";
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+  position: absolute;
+  bottom: -15px;
+  left: -4px;
+  z-index: -1;
+  background-color: #2b1800;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.links {
+  margin-top: 18px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.links a {
+  color: #fb5283;
+  text-decoration: none;
+  transition: color 0.3s;
+  font-size: 18px;
+  flex: 1;
+  text-align: center;
+}
+
+.links a:first-child {
+  font-size: 15px;
+}
+
+.links a:first-child:hover {
+  text-decoration: underline;
+}
+
+.links a:not(:last-child) {
+  margin-right: 20px;
+}
+
+.links a:hover {
+  color: #ff80ab;
+}
+
+.links {
+  margin-top: 18px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.links a {
+  color: #fb5283;
+  text-decoration: none;
+  transition: color 0.3s;
+  font-size: 18px;
+  flex: 1;
+  text-align: center;
+}
+
+.links a:first-child {
+  font-size: 15px;
+}
+
+.links a:first-child:hover {
+  text-decoration: underline;
+}
+
+.links a:not(:last-child) {
+  margin-right: 20px;
+}
+
+.links a:hover {
+  color: #ff80ab;
+}
+
+.linksHome {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  padding: 10px;
+  font-size: large;
+  text-decoration: none;
+  border-radius: 15px;
+  border: none;
+  background: linear-gradient(
+    0deg,
+    rgba(255, 193, 219, 1) 0%,
+    rgba(245, 131, 202, 1) 100%
+  );
+  color: #fff;
+  overflow: hidden;
+}
+
+.linksHome:hover {
+  text-decoration: none;
+  background: linear-gradient(
+    0deg,
+    rgba(245, 131, 202, 1) 0%,
+    rgba(255, 193, 219, 1) 100%
+  );
+  color: #fff;
+}
+
+.linksHome:before {
+  position: absolute;
+  content: "";
+  display: inline-block;
+  top: -180px;
+  left: 0;
+  width: 30px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  animation: shiny-btn1 3s ease-in-out infinite;
+}
+
+.linksHome:active {
+  box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
+    -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
+    inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
+    inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
+}
+
+@keyframes shiny-btn1 {
+  0% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0;
+  }
+  80% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0.5;
+  }
+  81% {
+    transform: scale(4) rotate(45deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(50) rotate(45deg);
+    opacity: 0;
+  }
+}
+
+.linksHome a {
+  color: #ffe4e9;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/login/forgot.html b/login/forgot.html
new file mode 100644
index 00000000..6c2645d3
--- /dev/null
+++ b/login/forgot.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Collect your GamingTools</title>
+    <link rel="stylesheet" href="forgot.css">
+    <link rel="shortcut icon" href="logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <div class="linksHome">
+        <a href="../index.html">←Back</a>
+    </div>
+    <div class="login-container">
+        <h1>Forgot Password</h1>
+        <form action="#" method="post">
+            <div class="input-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <span id="error-message"></span>
+            <div ontouchstart="">
+                <div class="button">
+                    <a href="#">Reset Password</a>
+                </div>
+            </div>
+        </form>
+        <div class="links">
+            <a href="login.html">Back to Login</a>
+        </div>
+    </div>
+
+    <script>
+        let btn = document.querySelector(".button");
+        const errorMessage = document.getElementById('error-message');
+        const emailInput = document.getElementById('email');
+
+        function isValidEmail(email) {
+            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            return emailRegex.test(email);
+        }
+
+        btn.addEventListener("click", (e) => {
+            e.preventDefault(); // prevent form submission
+            const emailValue = emailInput.value.trim();
+
+            if (emailValue === '') {
+                errorMessage.textContent = 'First write your email';
+                errorMessage.style.color = 'red';
+            } else if (!isValidEmail(emailValue)) {
+                errorMessage.textContent = 'Invalid email address';
+                errorMessage.style.color = 'red';
+            } else {
+                // submit the form or perform the password reset logic here
+                errorMessage.textContent = '';
+                setTimeout(() => {
+                    alert("Please check your Email to reset your password.")
+                }, 300)
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/login/login.css b/login/login.css
index eb472524..80c74ff1 100644
--- a/login/login.css
+++ b/login/login.css
@@ -1,270 +1,350 @@
+/* Import Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@400&display=swap');
+
+/* General Reset */
 * {
-    box-sizing: border-box;
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
-/*to change bg image use here*/
+
 body {
-    background: url("https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center center fixed;
-    background-size: cover;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-family: 'Roboto', sans-serif;
+    background: url('1.jpg') no-repeat center center/cover;
+    color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    color: white;
-    text-shadow: 1px 1px 2px #000;
+    background-size: cover;
+}
+
+.button-container {
+    position: relative; /* Allows child elements to be positioned relative to this container */
+    height: 100vh; /* Example height to fill the viewport */
+}
+
+.back-button {
+    position: absolute; /* Positioning the button absolutely */
+    top: 3%; /* Move the button higher (adjust as needed) */
+    margin-left: 20px;
+    display: flex;
+    align-items: center; /* Align items vertically in the center */
+    padding: 10px 15px; /* Add padding for spacing */
+    font-size: 16px; /* Adjust font size */
+    color: white; /* Text color */
+    background-color: #0077b6; /* New custom blue shade */
+    border-radius: 5px; /* Rounded corners */
+    text-decoration: none; /* Remove underline */
+    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
 }
+
+.back-button:hover {
+    background-color: #005f8b; /* Darker blue on hover */
+    transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+.back-button:focus {
+    outline: none; /* Remove outline on focus */
+}
+
+.back-button .arrow {
+    margin-right: 8px; /* Adjust spacing between the arrow and text */
+}
+
+/* Container */
 .login-container {
-    backdrop-filter: blur(10px);
-    opacity: 0.85;
-    background-color: rgba(0, 0, 0, 0);
-    padding: 2rem;
-    border-radius: 20px;
-    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+/* Login Box */
+.login-box {
+    background: rgba(42, 18, 75, 0.85);
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
     text-align: center;
-    max-width: 40px;
     width: 100%;
-    animation: fadeIn 2s ease-in-out;
+    max-width: 400px;
+    border: 1px solid #0077b6;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 0.75;
-        transform: scale(10);
-    }
+/* Title */
+.login-title {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 32px;
+    color: #00b4d8;
+    margin-bottom: 10px;
+    text-transform: uppercase;
 }
 
-h1 {
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
-    color: #fb5283;
+.subtitle {
+    font-size: 16px;
+    color: #fff;
+    margin-bottom: 30px;
 }
 
+/* Input Group */
 .input-group {
-    margin-bottom: 1.5rem;
     text-align: left;
+    margin-bottom: 20px;
 }
 
-label {
+.input-group label {
+    font-size: 14px;
+    margin-bottom: 15px;
     display: block;
-    margin-bottom: 0.5rem;
-    font-size: 16px;
+    text-align: left;
 }
 
-input[type="text"], input[type="password"] {
+.input-group input {
     width: 100%;
-    padding: 0.75rem;
-    border: 2px solid #6a1b9a;
+    padding: 12px;
+    border: none;
     border-radius: 5px;
-    background-color: #3a3f44;
-    color: white;
-    font-family: 'Press Start 2P', cursive;
-    font-size: 0.875rem;
+    background: #1c1c1c;
+    color: #fff;
+    font-size: 16px;
+    outline: none;
+    transition: all 0.3s ease-in-out;
 }
 
-input[type="text"]:focus, input[type="password"]:focus {
-    outline: none;
-    border-color: #ba68c8;
-    background-color: #2a2e32;
+.input-group input:focus {
+    box-shadow: 0 0 10px 2px #00b4d8;
 }
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+.password-container {
+    position: relative; /* Enables absolute positioning of child elements */
 }
-/* and here for bg image*/
-body {
-    background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
-    background-size: cover;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    color: white;
-    text-shadow: 1px 1px 2px #000;
+
+.password-container input {
+    padding-right: 40px; /* Add padding to make space for the icon */
+    width: 100%; /* Ensure input takes full width */
+    box-sizing: border-box; /* Include padding in total width */
+    height: 40px; /* Set a fixed height for consistent sizing (adjust as needed) */
+    font-size: 16px; /* Font size for input */
 }
 
-.login-container {
-    background-color: rgba(0, 0, 0, 0.8);
-    padding: 5rem;
-    border-radius: 20px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
-    text-align: center;
-    max-width: 500px;
-    width: 100%;
-    animation: fadeIn 1.5s ease-in-out;
+/* Center the icon vertically within the input field */
+.password-container i {
+    position: absolute;
+    right: 15px; /* Space from right edge (adjust as needed) */
+    top: 70%; /* Center the icon vertically */
+    transform: translateY(-50%); /* Adjust for exact vertical centering */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    color: #ff69b4; /* Icon color (optional) */
+    font-size: 1.2em; /* Adjust icon size */
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 0.75;
-        transform: scale(1);
-    }
+/* Login Button */
+.login-button {
+    width: 100%;
+    padding: 15px;
+    font-size: 16px;
+    font-family: 'Orbitron', sans-serif;
+    background: linear-gradient(45deg, #00b4d8, #0077b6);
+    border: none;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    transition: 0.3s;
+    margin-bottom: 20px;
 }
 
-h1 {
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
-    color: #fb5283;
+.login-button:hover {
+    background: linear-gradient(45deg, #0077b6, #00b4d8);
+    transform: scale(1.05);
 }
 
-.input-group {
-    margin-bottom: 1.5rem;
-    text-align: left;
+/* Social Login */
+.social-login p {
+    margin-bottom: 10px;
+    color: #fff;
+    font-size: 14px;
 }
 
-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 16px;
+.social-login {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-input[type="text"], input[type="password"] {
+.social-button {
     width: 100%;
-    padding: 0.75rem;
-    border: 2px solid #6a1b9a;
+    padding: 10px;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    border: none;
     border-radius: 5px;
-    background-color: #3a3f44;
-    color: white;
-    font-family: 'Press Start 2P', cursive;
-    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
-input[type="text"]:focus, input[type="password"]:focus {
-    outline: none;
-    border-color: #ba68c8;
-    background-color: #2a2e32;
-}
-
-body{
-  text-align:center;
-  background-color:#ffcc8e;
-}
-
-.button{
-  position:relative;
-  display:inline-block;
-  margin:15px;
-}
-/*login button*/
-.button a{
-  color:white;
-  font-family:Helvetica, sans-serif;
-  font-weight:bold;
-  font-size:20px;
-  text-align: center;
-  text-decoration:none;
-  background-color:#FFA12B;
-  display:block;
-  position:relative;
-  padding:15px 50px;
-  
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-shadow: 0px 1px 0px #000;
-  filter: dropshadow(color=#000, offx=0px, offy=1px);
-  
-  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
-  
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+.google {
+    background-color: #171a21;
+    color: #fff;
 }
 
-.button a:active{
-  top:10px;
-  background-color:#F78900;
+.google:hover {
+    background-color: #cccccc;
+    color: black;
+}
+.footer {
+    position: absolute;
+    top:100%;
+    width: 100%;
+    background: #000000;
+    min-height: 100px;
+    padding: 20px 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
   
-  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
-  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-}
-
-.button:after{
-  content:"";
-  height:100%;
-  width:100%;
-  padding:4px;
-  position: absolute;
-  bottom:-15px;
-  left:-4px;
-  z-index:-1;
-  background-color:#2B1800;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-.links {
-    margin-top: 18px;
+.social-icon,
+  .menu {
+    position: relative;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 0;
+    flex-wrap: wrap;
+  }
+  
+  .social-icon__item,
+  .menu__item {
+    list-style: none;
+  }
+  
+  .social-icon__link {
+    font-size: 2rem;
+    color: #fff;
+    margin: 0 10px;
+    display: inline-block;
+    transition: 0.5s;
+  }
+  .social-icon__link:hover {
+    transform: translateY(-10px);
+  }
+  
+  .menu__link {
+    font-size: 1.2rem;
+    color: #fff;
+    margin: 0 10px;
+    display: inline-block;
+    transition: 0.5s;
+    text-decoration: none;
+    opacity: 0.75;
+    font-weight: 300;
+  }
+  
+  .menu__link:hover {
+    opacity: 1;
+  }
+  
+  .footer p {
+    color: #fff;
+    margin: 15px 0 10px 0;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
+  .links {
+    position: relative;             /* Position relative for absolute positioning of links */
+    margin-top: 5px;              /* Space above the links */
+    margin-bottom: 10px;           /* Space below the links */
+    height: 50px;                  /* Height for the container (adjust as needed) */
 }
 
 .links a {
-    color: #fb5283;
-    text-decoration: none;
-    transition: color 0.3s;
-    font-size: 18px;
-    flex: 1; 
-    text-align: center;
+    color: #fb5283;                /* Default link color */
+    text-decoration: none;          /* No underline */
+    transition: color 0.3s;        /* Smooth color transition */
+    font-size: 18px;               /* Font size */
+    padding: 20px 20px;            /* Padding for better button-like appearance */
+    border-radius: 5px;            /* Rounded corners */
+    position: absolute;             /* Position absolutely within the container */
 }
 
-.links a:first-child {
-    font-size: 15px; 
+/* Position the Forgot Password link to the bottom left */
+.hal {
+    bottom: 0;                     /* Align to the bottom */
+    left: 0;                       /* Align to the left */
 }
 
-.links a:first-child: hover{
-    text-decoration: underline;
+/* Position the Sign Up link to the bottom right */
+.hal2 {
+    bottom: 0;                     /* Align to the bottom */
+    right: 0;                      /* Align to the right */
 }
 
-.links a:not(:last-child) {
-    margin-right: 20px; 
+/* Add hover effects */
+.hal:hover, .hal2:hover {
+    color: #ff80ab;               /* Change color on hover */
 }
 
-.links a: hover {
-    color: #ff80ab;
-}
+.hal::after, .hal2::after {
+    content: "";                   /* For decorative underline */
+    position: absolute;            /* Position absolutely */
+    width: 100%;                   /* Full width */
+    height: 2px;                  /* Height of underline */
+    bottom: 0;                     /* Position at bottom */
+    left: 0;                       /* Align to left */
+    background-color: white;       /* Color of underline */
+    transform-origin: center;      /* Transform origin for scaling */
+    transition: transform 0.25s ease-out; /* Smooth transition */
+    transform: scaleX(0);          /* Initial scale */
 }
 
-.links {
-    margin-top: 18px;
-    display: flex;
-    justify-content: space-between;
+/* Scale the underline on hover */
+.hal:hover::after {
+    transform: scaleX(1.5);          /* Scale to full width */
 }
 
-.links a {
-    color: #fb5283;
-    text-decoration: none;
-    transition: color 0.3s;
-    font-size: 18px;
-    flex: 1; 
-    text-align: center;
+.hal2:hover::after {
+    transform: scaleX(1.3);          /* Scale to full width */
 }
 
-.links a:first-child {
-    font-size: 15px; 
+.password-container {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Ensure full width */
+}
+.toggle-password {
+    position: absolute;
+    right: 8px;
+    top: 55%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    width: 20px; /* Adjust as needed */
+    height: 20px; /* Adjust as needed */
+    margin-top: 13px;
+    color: white;
 }
-
-.links a:first-child: hover{
-    text-decoration: underline;
+/* Optional: Ensure the input takes full width */
+.password-container input {
+    width: calc(100% - 0px); /* Adjust for icon size */
 }
 
-.links a:not(:last-child) {
-    margin-right: 20px; 
-}
+::placeholder {
+    color: grey;
+  }
 
-.links a: hover {
-    color: #ff80ab;
+  
+/* Make the input and icon responsive */
+@media (max-width: 600px) { /* Adjust for smaller screens */
+    .password-container input {
+        height: 35px; /* Slightly reduce height */
+        font-size: 14px; /* Adjust font size */
+    }
+    
+    .password-container i {
+        font-size: 1em; /* Adjust icon size */
+        right: 10px; /* Reduce right spacing for smaller screens */
+    }
 }
diff --git a/login/login.html b/login/login.html
index 95248fa3..937f4e32 100644
--- a/login/login.html
+++ b/login/login.html
@@ -3,32 +3,121 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Collect your GamingTools</title>
-    <link rel="stylesheet" href="login.css">
+    <title>Collect Your Gaming Tools - Login</title>
     <link rel="shortcut icon" href="logo.png" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@400&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
+    <link rel="stylesheet" href="login.css">
 </head>
 <body>
+    <div class="button-container">
+        <a href="../index.html" class="back-button">
+            <span class="arrow">←</span> <!-- Arrow icon -->
+            Back
+        </a>
+    </div>    
     <div class="login-container">
-        <h1>Login to Your Account</h1>
-        <form action="#" method="post">
-            <div class="input-group">
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username" required>
+        <div class="login-box">
+            <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
+            <p class="subtitle">Enter your credentials to continue shopping for the best gaming gear.</p>
+            <form action="#" method="post">
+                <div class="input-group">
+                    <label for="gmail">Gmail</label>
+                    <input type="text" id="gmail" name="username" placeholder="Enter your mail-id" required>
+                </div>
+                <div class="input-group password-container">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" placeholder="Enter your password" required>
+                    <i class="far fa-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
+                </div>
+                <button type="submit" class="login-button">Login</button>
+            </form>
+            <div class="links">
+                <a href="forgot.html" class="hal2">Forgot Password?</a>
+                <a href="../SignUp/signup.html" class="hal">Sign Up</a>
             </div>
-            <div class="input-group">
-                <label for="password">Password</label>
-                <input type="password" id="password" name="password" required>
+            <div class="social-login">
+                <p>Or Login With</p>
+                <button type="button" class="social-button google">Login with Google</button>
             </div>
-            <div ontouchstart="">
-  <div class="button">
-    <a href="#">Login</a>
-  </div>
-</div>
-        </form>
-        <div class="links">
-            <a href="#">Forgot Password?</a>
-            <a href="../SignUp/signup.html">Sign Up</a>
         </div>
     </div>
+    <footer class="footer">
+        <ul class="social-icon">
+            <li class="social-icon__item"><a class="social-icon__link" href="#">
+                <ion-icon name="logo-facebook"></ion-icon>
+            </a></li>
+            <li class="social-icon__item"><a class="social-icon__link" href="#">
+                <ion-icon name="logo-twitter"></ion-icon>
+            </a></li>
+            <li class="social-icon__item"><a class="social-icon__link" href="#">
+                <ion-icon name="logo-linkedin"></ion-icon>
+            </a></li>
+            <li class="social-icon__item"><a class="social-icon__link" href="#">
+                <ion-icon name="logo-instagram"></ion-icon>
+            </a></li>
+        </ul>
+        <ul class="menu">
+            <li class="menu__item"><a class="menu__link" href="../index.html">Home</a></li>
+            <li class="menu__item"><a class="menu__link" href="">About</a></li>
+            <li class="menu__item"><a class="menu__link" href="../index.html#controller">Services</a></li>
+            <li class="menu__item"><a class="menu__link" href="../Contributors/contributor.html">Team</a></li>
+            <li class="menu__item"><a class="menu__link" href="../index.html#contact">Contact</a></li>
+        </ul>
+        <p>&copy;2024 Collect your Gaming Tools | All Rights Reserved</p>
+    </footer>
+
+    <script>
+        const loginButton = document.querySelector(".login-button");
+        const togglePassword = document.getElementById('togglePassword');
+        const passwordInput = document.getElementById('password');
+
+        togglePassword.addEventListener('click', function () {
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+            this.classList.toggle('fa-eye-slash');
+        });
+
+        loginButton.addEventListener("click", (e) => {
+            e.preventDefault();
+
+            const email = document.querySelector("#gmail").value;
+            const password = document.querySelector("#password").value;
+
+            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            if (!emailPattern.test(email)) {
+                alert("Please enter a valid email address.");
+                return; // Stop the function if email is not in the right format
+            }
+            
+            const userData = {
+                email,
+                password
+            };
+            console.log(userData);
+            loginUser(userData);
+        });
+
+        const loginUser = async (user) => {
+            try {
+                const res = await fetch("http://localhost:5000/auth/signin", {
+                    method: "POST",
+                    credentials: "include",
+                    redirect: "follow",
+                    headers: { "content-type": "application/json" },
+                    body: JSON.stringify(user)
+                });
+                if (!res.ok) {
+                    throw new Error(`HTTP error! status: ${res.status}`);
+                }
+                const data = await res.json();
+                window.location.href = "http://127.0.0.1:5500/Collect-your-GamingTools/index.html";
+            } catch (e) {
+                console.log(e.message);
+            }
+        };
+    </script>
+    <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/popup/popup.css b/popup/popup.css
new file mode 100644
index 00000000..d1412f36
--- /dev/null
+++ b/popup/popup.css
@@ -0,0 +1,138 @@
+/* Styling for the pop-up */
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .popup-content {
+    display: flex;
+    background-color: white;
+    border-radius: 10px;
+    max-width: 800px;
+    height: 450px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  }
+
+  /* .popuplogo{
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 50px;
+    width: 38.6px;
+  } */
+
+  .logo1 {
+    width: 50px;
+    cursor: pointer;
+    margin: 18px 10px;
+    position: absolute;
+    top: -4px;
+    left: 722px;
+}
+
+  #logo-pop{
+    left: 20px;
+  }
+
+  .popup-left img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .popup-right {
+    padding: 20px;
+    width: 50%;
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    justify-content: center;
+  }
+
+  .popup h1 {
+    font-size: 28px;
+    font-family: Arial, Helvetica, sans-serif; 
+    background: linear-gradient(to right, #ff3527, #fb5283, #ffd700); 
+    -webkit-text-fill-color: transparent; 
+    -webkit-background-clip: text; 
+    text-align: center;
+    margin-bottom: 15px;
+    margin-top: 45px;
+  }
+
+  .h2{
+    font-size: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #333;
+  }
+
+  p {
+    margin-bottom: 26px;
+    color: #d7d7d7;
+    font-size: 13px;
+  }
+
+  input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    border: 1px solid #000000;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+
+  .signup-btn1 {
+    width: 100%;
+    padding: 10px 0;
+    background-color: linear-gradient(to right, #ff3527, #fb5283, #ffd700);;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  .signup-btn1:hover {
+    background-color: #4682B4;
+  }
+
+  .no-thanks {
+    display: block;
+    margin-top: 15px;
+    color: #888;
+    text-decoration: none;
+    margin-bottom: 20px;
+  }
+
+  .no-thanks:hover {
+    color: #000000;
+    font-size: 15px;
+  }
+
+  .terms {
+    margin-top: 15px;
+    font-size: 10px;
+    color: #888;
+  }
+
+  .terms a {
+    background: linear-gradient(to right, #ff3527, #fb5283, #ffd700); 
+    -webkit-text-fill-color: transparent; 
+    -webkit-background-clip: text; 
+  }
\ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
new file mode 100644
index 00000000..bd0dbfee
--- /dev/null
+++ b/popup/popup.js
@@ -0,0 +1,34 @@
+// Show the pop-up automatically when the page loads
+window.onload = function() {
+  document.getElementById('popup').style.display = 'flex';
+};
+
+// Close the pop-up when the user clicks the close button
+document.querySelector('.close1-btn').addEventListener('click', function() {
+  document.getElementById('popup').style.display = 'none';
+});
+
+// Close the pop-up when clicking outside the pop-up content
+window.addEventListener('click', function(event) {
+  const popupContent = document.querySelector('.popup-content'); // Select the popup content
+  if (event.target === document.getElementById('popup')) {
+      document.getElementById('popup').style.display = 'none';
+  }
+});
+
+// Handle form submission
+document.getElementById('emailForm').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const email = document.getElementById('email').value;
+  if (email) {
+    alert(`Thank you! A 20% discount code has been sent to ${email}`);
+    document.getElementById('popup').style.display = 'none';
+  }
+});
+
+// Handle "No thanks" link
+document.querySelector('.no-thanks').addEventListener('click', function(event) {
+  event.preventDefault();
+  document.getElementById('popup').style.display = 'none';
+});
diff --git a/pull_request_template.md b/pull_request_template.md
index d1925a13..eada97dd 100644
--- a/pull_request_template.md
+++ b/pull_request_template.md
@@ -1,33 +1,33 @@
-# Pull Request Format
-## PR Title
-### Issue #0 : **ISSUE NAME** solved
-
-## Type of PR
-- **Add X in the box to specify the improvement type.**
-- [X] Bug fix
-- [ ] Feature enhancement
-- [ ] Documentation update
-- [ ] Other (specify): ___________  
-
-
-## Description
-This pull request aims to [briefly describe what the pull request does, e.g., "add a new feature," "fix a bug," "improve documentation," etc.]. 
-
-## Screenshots / Videos (if applicable)
-**Before:**
-- [Describe the state before the changes, e.g., "The section headings in the footer were misaligned, leading to an inconsistent and cluttered appearance."]
-
-**After:**
-- [Describe the state after the changes, e.g., "The section headings in the footer are now properly aligned, providing a clean and professional look."]
-
-## Checklist
-- **Add X in the box to specify.**
-- [X] I have performed a self-review of my code.
-- [ ] I have tested the changes thoroughly before submitting this pull request.
-- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
-- [ ] I have commented my code, particularly in hard-to-understand areas.
-
-### Additional Context
-[Provide any additional context about the changes, such as specific challenges you faced or decisions you made. This can help reviewers understand the rationale behind your changes.]
-
-Thank you for reviewing my pull request!
+# Pull Request Format
+## PR Title
+### Issue #0 : **ISSUE NAME** solved
+
+## Type of PR
+- **Add X in the box to specify the improvement type.**
+- [X] Bug fix
+- [ ] Feature enhancement
+- [ ] Documentation update
+- [ ] Other (specify): ___________  
+
+
+## Description
+This pull request aims to [briefly describe what the pull request does, e.g., "add a new feature," "fix a bug," "improve documentation," etc.]. 
+
+## Screenshots / Videos (if applicable)
+**Before:**
+- [Describe the state before the changes, e.g., "The section headings in the footer were misaligned, leading to an inconsistent and cluttered appearance."]
+
+**After:**
+- [Describe the state after the changes, e.g., "The section headings in the footer are now properly aligned, providing a clean and professional look."]
+
+## Checklist
+- **Add X in the box to specify.**
+- [X] I have performed a self-review of my code.
+- [ ] I have tested the changes thoroughly before submitting this pull request.
+- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
+- [ ] I have commented my code, particularly in hard-to-understand areas.
+
+### Additional Context
+[Provide any additional context about the changes, such as specific challenges you faced or decisions you made. This can help reviewers understand the rationale behind your changes.]
+
+Thank you for reviewing my pull request!
diff --git a/script.js b/script.js
index b197ef4d..1787e9e1 100644
--- a/script.js
+++ b/script.js
@@ -1,10 +1,207 @@
 var menuList = document.getElementById("menuList");
-menuList.style.maxHeight = "0px";
+menuList.style.height = "0px";
+menuList.style.paddingTop = "0px";
+menuList.style.display = "block";
+menuList.style.position = "fixed";
+menuList.style.borderRadius = "20px";
 
 function toggleMenu() {
-    if (menuList.style.maxHeight == "0px") {
-        menuList.style.maxHeight = "160px";
+    if (menuList.style.height == "0px") {
+        menuList.style.height = "auto";
+        menuList.style.paddingTop = "20px";
     } else {
-        menuList.style.maxHeight = "0px";
+        menuList.style.height = "0px";
+        menuList.style.paddingTop = "0px";
     }
 }
+
+window.onscroll = function() {
+    updateProgressBar();
+  };
+function updateProgressBar() {
+  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  var scrollHeight =
+    document.documentElement.scrollHeight -
+    document.documentElement.clientHeight;
+  var scrollPercent = (scrollTop / scrollHeight) * 100;
+  document.getElementById("progressBar").style.width = scrollPercent + "%";
+}
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("Website loaded successfully!");
+});
+
+// Show or hide the scroll-top button based on scroll position
+window.addEventListener('scroll', function() {
+  const scrollTopButton = document.querySelector('.scroll-top');
+  if (window.pageYOffset > 300) {
+      scrollTopButton.style.display = 'block';
+  } else {
+      scrollTopButton.style.display = 'none';
+  }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+  const progressRing = scrollToTopBtn.querySelector('circle');
+  const rootElement = document.documentElement;
+
+  const radius = progressRing.r.baseVal.value;
+  const circumference = radius * 2 * Math.PI;
+
+  progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
+  progressRing.style.strokeDashoffset = circumference;
+
+  function setProgress(percent) {
+      const offset = circumference - percent / 100 * circumference;
+      progressRing.style.strokeDashoffset = offset;
+  }
+
+  function handleScroll() {
+      const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
+      const scrolled = (rootElement.scrollTop / scrollTotal) * 100;
+
+      // Show or hide the scroll-to-top button based on scroll position
+      if (window.pageYOffset > 300) {
+          scrollToTopBtn.classList.add('show');
+      } else {
+          scrollToTopBtn.classList.remove('show');
+      }
+
+      // Update progress circle
+      requestAnimationFrame(() => {
+          setProgress(scrolled);
+      });
+  }
+
+  function scrollToTop() {
+      rootElement.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+      });
+  }
+
+  scrollToTopBtn.addEventListener('click', scrollToTop);
+  window.addEventListener('scroll', handleScroll);
+
+  // Initial check in case the page is already scrolled on load
+  handleScroll();
+});
+
+function toggleTheme() {
+  const body = document.body;
+  const themeToggle = document.getElementById("theme-toggle");
+  body.classList.toggle("dark-mode", themeToggle.checked);
+
+  // Save the user's preference in localStorage
+  if (themeToggle.checked) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+// Load theme from localStorage on page load
+window.onload = () => {
+  const savedTheme = localStorage.getItem("theme");
+  const themeToggle = document.getElementById("theme-toggle");
+  if (savedTheme === "dark") {
+    document.body.classList.add("dark-mode");
+    themeToggle.checked = true;
+  }
+};
+
+//function to remove sidebar upon clicking close button
+function toggleSidebar() {
+  const sidebar = document.querySelector('.social-sidebar');
+  const toggleArrow = document.querySelector('.toggle-arrow');
+  
+  // Check if the sidebar is currently visible
+  if (sidebar.style.display === "none") {
+      // If hidden, show the sidebar and hide the toggle arrow
+      sidebar.style.display = "block";
+      toggleArrow.style.display = "none";
+  } else {
+      // If visible, hide the sidebar and show the toggle arrow
+      sidebar.style.display = "none";
+      toggleArrow.style.display = "block";
+  }
+}
+
+function performSearch() {
+  let searchTerm = document.getElementById("search-input").value.toLowerCase();
+  console.log(searchTerm);
+  let cards = document.querySelectorAll(".row");
+
+  cards.forEach(function (card) {
+    let cardHeading = card
+      .querySelector(".card-heading")
+      .innerText.toLowerCase();
+
+    // Check if the search term is in the card heading or description
+    if (cardHeading.includes(searchTerm)) {
+      card.style.display = "block"; // Show the card
+    } else {
+      card.style.display = "none"; // Hide the card
+    }
+  });
+}
+
+async function SendEmail(e) {
+  e.preventDefault();
+  const Name = document.getElementById("name").value;
+  const Email = document.getElementById("email").value;
+  const Message = document.getElementById("message").value;
+
+  try {
+    const response = await fetch("http://localhost:5000/email/SendEmail", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ Name, Email, Message }),
+    });
+
+    if (response.ok) {
+      alert("Email sent successfully!");
+    } else {
+      alert("Error sending email");
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    alert("An error occurred while sending the email.");
+  }
+}
+
+// faq
+document.querySelectorAll('.faq input[type="checkbox"]').forEach((checkbox) => {
+  checkbox.addEventListener('change', function () {
+    const answer = this.nextElementSibling.nextElementSibling; // FAQ answer div
+    if (this.checked) {
+      answer.style.maxHeight = answer.scrollHeight + 'px';
+    } else {
+      answer.style.maxHeight = '0px';
+    }
+  });
+});
+
+
+function testimonialJs() {
+  const swiper = new Swiper('.swiper', {
+    autoHeight: true,
+    loop: true,
+
+    // If we need pagination
+    pagination: {
+        el: '.swiper-pagination',
+    },
+
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+
+});
+}
+testimonialJs();
\ No newline at end of file
diff --git a/style.css b/style.css
index 8d59ccaf..83f7ea5e 100644
--- a/style.css
+++ b/style.css
@@ -1,588 +1,1926 @@
 * {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+html {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+html::-webkit-scrollbar {
+  width: 12px; /* Increased the scrollbar width */
+  transition: width 0.3s ease;
+}
+
+html::-webkit-scrollbar-track {
+  background-color: #f0f0f0; /* Light background color for the track */
+  border-radius: 4px;
+}
+
+html::-webkit-scrollbar-thumb {
+  border-radius: 4px; /* More rounded corners */
+  background: linear-gradient(
+    90deg,
+    #ff459f,
+    #ff9532,
+    #ff459f
+  ); /* Gradient for the thumb */
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); /* Stronger shadow for a more pronounced effect */
+  min-height: 100px; /* Increased the minimum height of the thumb */
+}
+
+html::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(
+    90deg,
+    #ff9532,
+    #ff459f,
+    #ff9532
+  ); /* Hover effect with reverse gradient */
+  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); /* More shadow on hover */
+}
+
+html::-webkit-scrollbar-thumb:window-inactive {
+  background: rgb(156, 156, 156);
+}
+
+.card {
+  width: 50%; /* Set a specific width */
+  margin: 10px auto; /* Center horizontally with automatic margins */
+  padding: 20px; /* Add padding */
+  margin-bottom: 70px;
+  border: 1px solid #ccc; /* Optional: Add a border */
+  border-radius: 8px; /* Optional: Add rounded corners */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
+}
+.card-header {
+  color: #fff;
+  padding: 10px;
+  margin-bottom: 15px;
+  text-align: center;
+  border-radius: 6px;
+  align-items: center;
+}
+.contact-message {
+  font-size: 1.2rem;
+  color: #b4abab;
+  text-align: center;
+  margin-top: 5px;
+  line-height: 1.2;
+  padding: 5px;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+}
+.card-body {
+  display: flex;
+  width: 90%;
+  margin: 20px auto;
+  padding: 20px;
+  justify-content: space-between; /* Form on the right and image on the left */
+  align-items: flex-start; /* Align content to the top */
+}
+.card-header h2 {
+  font-size: 2.1rem;
+  /* Large font size */
+  color: #333;
+  /* Dark gray color for text */
+  font-weight: bold;
+  /* Bold font weight */
+  text-align: center;
+  /* Center align the text */
+  margin: 0;
+  /* Remove default margin */
+  padding: 15px 0;
+  /* Add vertical padding */
+  position: relative;
+  /* Relative positioning for pseudo-element */
+}
+
+.card-header h2::after {
+  content: "";
+  /* Pseudo-element for the underline */
+  display: block;
+  /* Make it a block element */
+  width: 50%;
+  /* Width of the underline */
+  height: 4px;
+  /* Height of the underline */
+  background: #007bff;
+  /* Color for the underline */
+  margin: 8px auto 0;
+  /* Center align the underline */
+  border-radius: 2px;
+  /* Slightly rounded corners */
+}
+.form-section {
+  width: 50%; /* Width for the form section */
+}
+
+.image-section {
+  width: 80%; /* Width for the image section */
+  display: flex;
+  justify-content: center; /* Center the image */
+  align-items: center;
+  height: 70%;
+}
+
+.image-section img {
+  max-width: 100%; /* Make sure image does not exceed its container width */
+  height: auto;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+input,
+textarea {
+  width: 100%; /* Adjust width for better alignment */
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+textarea {
+  height: 100px; /* Adjust height for textarea */
+}
+
+button[type="submit"] {
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: #444;
+  transform: scale(1.1);
+}
+
+#progressBarContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 7px;
+  background-color: whitesmoke;
+  z-index: 9999;
+}
+
+#progressBar {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(to right, #fb5283, #ff3527);
+  transition: width 0.2s ease;
+}
+
+*.dark-mode {
+  background-color: #1b1b1b;
+  color: #f1f1f1;
 }
 
 .container {
-    width: 100%;
-    min-height: 100vh;
-    padding-left: 5%;
-    padding-right: 5%;
-    box-sizing: border-box;
-    overflow: hidden;
+  width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 .navbar {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    overflow: hidden;
-    background-color: #fff;
-    z-index: 1000;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  overflow: hidden;
+  background-color: #fff;
+  z-index: 1000;
+  box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.38);
+}
+
+.cart-button {
+  display: flex;
+  align-items: center;
+  background-color: #f0c14b; /* Light golden button color */
+  padding: 6px 8px;
+  border-radius: 10px; /* Rounded button */
+  border: 1px solid #a88734; /* Border matching the button color */
+  text-decoration: none;
+  color: #111; /* Text color */
+  font-weight: bold;
+  font-size: 16px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  margin-right: 10px;
+}
+
+.cart-button img {
+  height: 30px;
+  width: 30px;
+  margin-right: 10px; /* Spacing between icon and cart count */
+}
+
+.cart-button #cart-count {
+  background-color: #ff6347; /* Red background for the cart count */
+  color: white;
+  padding: 5px 10px;
+  border-radius: 50%; /* Round cart count badge */
+  font-size: 14px;
+}
+
+.cart-button:hover {
+  background-color: #e2a732; /* Darker gold on hover */
+  transform: scale(1.05); /* Slight zoom effect */
+}
+
+.cart-button:active {
+  transform: scale(0.95); /* Button press effect */
+}
+
+#cart-count {
+  font-size: 16px; /* Adjust font size to match */
+  vertical-align: middle;
+}
+
+.dark-mode .navbar {
+  background-color: #111111;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 55px !important;
+  height: 23px !important;
+  margin-right: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: -5px;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 6px;
+  bottom: 2px;
+  top: 1px;
+  background-color: black;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background: linear-gradient(to right, #fb5283, #ff3527) !important;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
 }
 
 .logo {
-    width: 50px;
-    cursor: pointer;
-    margin: 18px 0;
+  width: 36px;
+  cursor: pointer;
+  margin: 18px 10px;
 }
 
 @keyframes rainbow {
-    0% {
-        background-position: 0% 50%;
-    }
+  0% {
+    background-position: 0% 50%;
+  }
 
-    50% {
-        background-position: 100% 50%;
-    }
+  50% {
+    background-position: 100% 50%;
+  }
 
-    100% {
-        background-position: 0% 50%;
-    }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 .website-name {
-    margin-left: 16px;
-    font-size: 20px;
-    font-weight: bold;
-    color: transparent;
-    background: linear-gradient(90deg, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff, #8a2be2, #ff459f);
-    background-size: 400% 400%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    display: inline-block;
-    animation: rainbow 5s linear infinite;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    font-weight: bolder;
-    cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    #ff459f,
+    #ff9532,
+    #ffd700,
+    #32cd32,
+    #1e90ff,
+    #8a2be2,
+    #ff459f
+  );
+  background-size: 400% 400%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: rainbow 5s linear infinite;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  font-weight: bolder;
+  cursor: pointer;
 }
 
 .menu-icon {
-    width: 25px;
-    cursor: pointer;
-    display: none;
+  width: 25px;
+  cursor: pointer;
+  display: none;
 }
 
 nav {
-    flex: 1;
-    text-align: right;
-    margin-right: 100px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+nav ul {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  align-items: center;
 }
-
 nav ul li {
-    list-style: none;
-    display: inline-block;
-    margin-right: 30px;
+  list-style: none;
+  display: inline;
+  margin-right: 30px;
+  text-wrap: nowrap;
 }
 
 nav ul li a {
-    text-decoration: none;
-    color: #000;
-    font-size: 14px;
-    font-weight: bold;
-    display: inline-block;
-    transition: color 0.5s, transform 0.5s;
+  text-decoration: none;
+  color: #000;
+  font-size: 13px;
+  font-weight: bold;
+  display: inline-block;
+  transition: color 0.5s, transform 0.5s;
 }
 
+.dark-mode nav ul li a {
+  color: #ccc;
+}
 nav ul li a:hover {
-    color: #e00999;
-    transform: scale(1.18);
+  color: #e00999;
+  transform: scale(1.18);
+}
+nav ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav ul li {
+  display: inline-block;
+  position: relative;
+  margin: 0 15px;
+  align-content: center;
+}
+
+nav ul li a {
+  text-decoration: none;
+  position: relative;
+  color: #000;
+}
+
+nav ul li:not(.login) a::after {
+  content: "";
+  display: block;
+  height: 0.5px;
+  width: 0;
+  background: #ff3527;
+  transition: width 0.3s ease;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+}
+
+nav ul li:not(.login) a:hover::after {
+  width: 100%;
 }
 
 nav ul li.login {
-    background: linear-gradient(to right, #fb5283, #ff3527);
-    height: 24px;
-    border-radius: 20px;
-    padding: 4px 18px;
-    cursor: pointer;
+  background: linear-gradient(to right, #fb5283, #ff3527);
+  height: 24px;
+  border-radius: 20px;
+  padding: 4px 18px;
+  cursor: pointer;
+  transition: all 0.5s ease;
+}
+.underline li :hover {
+  text-decoration: underline;
 }
 
 nav ul li.login a {
-    color: #fff;
+  color: #fff;
 }
 
 nav ul li.login:hover {
-    color: #fff;
+  color: #fff;
+  transform: scale(1.08);
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 120px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 120px 0;
 }
 
 .col-1 {
-    flex-basis: 40%;
-    position: relative;
-    margin-left: 50px;
+  flex-basis: 40%;
+  position: relative;
+  margin-left: 50px;
 }
 
 .col-1 h2 {
-    font-size: 54px;
-    color: #000;
-    cursor: pointer;
+  font-size: 54px;
+  color: var(--text-color);
+  cursor: pointer;
+  letter-spacing: 1px;
+}
+
+.dark-mode h2, .dark-mode h1{
+    color: #c3c3f0;
+}
+.dark-mode .intro{
+    color: #ccc;
+}
+.dark-mode h2 {
+  color: #ccc;
+}
+.dark-mode .feature p {
+    color: #000; /* Set paragraph color to black */
 }
 
 .col-1 h3 {
-    font-size: 30px;
-    color: #707070;
-    font-weight: 100;
-    margin: 20px 0 10px;
-    cursor: pointer;
+  font-size: 30px;
+  color: var(--text-color);
+  font-weight: 100;
+  margin: 20px 0 10px;
+  cursor: pointer;
 }
 
 .col-1 p {
-    font-size: 16px;
-    color: #a1a1a1;
-    font-weight: 500;
-    cursor: pointer;
+  font-size: 16px;
+  color: var(--text-color);
+  font-weight: 500;
+  cursor: pointer;
 }
 
 button {
-    width: 140px;
-    border: 0;
-    padding: 14px 12px;
-    outline: none;
-    color: #fff;
-    font-size: 16px;
-    font-weight: bolder;
-    background: linear-gradient(to right, #fb5283, #ff3527);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: width 0.5s;
+  width: 140px;
+  border: 0;
+  outline: none;
+  color: var(--text-color);
+  font-size: 16px;
+  font-weight: bolder;
+  background: linear-gradient(to right, #fb5283, #ff3527);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: width 0.5s;
+  background: linear-gradient(to right, #ff3527, #fb5283, #ffd700);
+  transition: background 0.3s ease-in-out;
+}
+#buy-btn {
+  display: flex; /* Use flexbox for alignment */
+  align-items: center; /* Center align items vertically */
+  justify-content: center; /* Center align items horizontally */
+  width: 140px; /* Initial width */
+  padding: 10px; /* Initial padding */
+  background-color: #4caf50; /* Button background color */
+  color: white; /* Text color */
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out,
+    background-color 0.3s ease-in-out; /* Transition for background color */
 }
 
-button img {
-    width: 30px;
-    display: none;
+#buy-btn:hover {
+  width: 160px; /* Increased width on hover */
+  padding: 12px; /* Increased padding on hover */
+  background-color: #45a049; /* Darker green on hover */
 }
 
-button:hover img {
-    display: block;
+#buy-btn img {
+  width: 30px; /* Icon size */
+  opacity: 0; /* Initially hidden */
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
 }
 
-button:hover {
-    width: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+#buy-btn:hover img {
+  opacity: 1; /* Fully visible on hover */
+  transform: translateX(5px); /* Slightly move the icon to the right on hover */
+}
+
+#cart-btn {
+  padding: 12px 14px; /* Padding for the cart button */
+  display: flex; /* Use flexbox for alignment */
+  align-items: center; /* Center align items vertically */
+  justify-content: center; /* Center align items horizontally */
+  width: 140px; /* Set initial width */
+  background-color: #f44336; /* Button background color */
+  color: white; /* Text color */
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for background color */
+}
+
+#cart-btn:hover {
+  width: 160px; /* Increased width on hover */
+  background-color: #e53935; /* Darker red on hover */
+}
+
+#cart-btn img {
+  width: 18px; /* Icon size */
+  opacity: 0; /* Initially hidden */
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
+}
+
+#cart-btn:hover img {
+  opacity: 1; /* Fully visible on hover */
+  transform: translateX(5px); /* Slightly move the icon to the right on hover */
+}
+
+.btn-section {
+  display: inline-flex;
+  gap: 15px; /* Space between buttons */
+}
+#buy-btn {
+  display: flex; /* Use flexbox for alignment */
+  align-items: center; /* Center align items vertically */
+  justify-content: center; /* Center align items horizontally */
+  width: 140px; /* Initial width */
+  padding: 10px; /* Initial padding */
+  background-color: #4caf50; /* Button background color */
+  color: white; /* Text color */
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out,
+    background-color 0.3s ease-in-out; /* Transition for background color */
+}
+
+#buy-btn:hover {
+  width: 160px; /* Increased width on hover */
+  padding: 12px; /* Increased padding on hover */
+  background-color: #45a049;
+  gap: 5px;
+  /* Darker green on hover */
+}
+
+.button-text {
+  margin-right: 5px; /* Space between text and icon */
+}
+
+.button-icon {
+  transition: transform 0.3s ease-in-out; /* Smooth transition for the icon */
+}
+
+#buy-btn:hover .button-icon {
+  transform: translateX(5px); /* Move the icon to the right on hover */
+}
+
+.btn-section {
+  display: inline-flex;
+  gap: 15px; /* Space between buttons */
 }
 
 .col-1::after {
-    content: '';
-    width: 10px;
-    height: 63%;
-    background: linear-gradient(#ff459f, #ff6062);
-    position: absolute;
-    left: -40px;
-    top: 8px;
+  content: "";
+  width: 10px;
+  height: 63%;
+  background: linear-gradient(#ff459f, #ff6062);
+  position: absolute;
+  left: -40px;
+  top: 8px;
 }
 
 .col-2 {
-    position: relative;
-    flex-basis: 60%;
-    display: flex;
-    align-items: center;
+  position: relative;
+  flex-basis: 60%;
+  display: flex;
+  align-items: center;
 }
 
 .col-2 .controller {
-    width: 90%;
+  width: 90%;
 }
 
 .color-box {
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: linear-gradient(#ff459f, #ff9532);
-    border-radius: 20px 0 0 20px;
-    height: 100%;
-    width: 80%;
-    z-index: -1;
-    transform: translateX(150px);
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: linear-gradient(#ff459f, #ff9532);
+  border-radius: 20px 0 0 20px;
+  height: 100%;
+  width: 80%;
+  z-index: -1;
+  transform: translateX(150px);
 }
 
 .price {
-    margin: 20px 0;
-    display: flex;
+  margin: 20px 0;
+  display: flex;
 }
 
 .original-price {
-    font-size: 20px;
-    color: #a1a1a1;
-    text-decoration: line-through;
-    margin-right: 15px;
+  font-size: 20px;
+  color: var(--text-color);
+  text-decoration: line-through;
+  margin-right: 15px;
 }
 
 .discounted-price {
-    font-size: 24px;
-    color: #000;
-    font-weight: bold;
+  font-size: 24px;
+  color: var(--text-color);
+  font-weight: bold;
 }
 
 .discount {
-    background-color: #ff3c6d;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: bold;
-    margin-left: 15px;
+  background-color: #ff3c6d;
+  color: var(--text-color);
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 15px;
 }
 
 .add-btn img {
-    width: 40px;
-    margin-bottom: 5px;
+  width: 40px;
+  margin-bottom: 5px;
 }
 
 .add-btn {
-    text-align: center;
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-    cursor: pointer;
-    border: 1.5px solid #fff;
-    padding: 10px;
-    border-radius: 5px;
-    display: inline-block;
-    transition: transform 0.5s;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--text-color);
+  cursor: pointer;
+  border: 1.5px solid #fff;
+  padding: 10px;
+  border-radius: 5px;
+  display: inline-block;
+  transition: transform 0.5s;
 }
 
 .add-btn p {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .add-btn:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 .rating {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
 }
 
 .rating span {
-    font-size: 26px;
-    margin-right: 10px;
-    background: linear-gradient(to right, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff);
-    /* Example gradient colors */
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
+  font-size: 26px;
+  margin-right: 10px;
+  background: linear-gradient(
+    to right,
+    #ff459f,
+    #ff9532,
+    #ffd700,
+    #32cd32,
+    #1e90ff
+  );
+  /* Example gradient colors */
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .rating p {
-    font-size: 14px;
-    color: #707070;
-    margin: 0;
+  font-size: 14px;
+  color: #707070;
+  margin: 0;
 }
 
 .overall-rating {
-    margin: 14px 0;
-    font-size: 16px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
+  margin: 14px 0;
+  font-size: 16px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 
 .overall-rating .star {
-    margin-left: 5px;
-    color: #ff3c6d;
-    font-weight: 600;
+  margin-left: 5px;
+  color: #ff3c6d;
+  font-weight: 600;
 }
 
-.footer-container {
-    background-color: #444444;
-    color: #fff;
-    padding: 40px 20px;
-    text-align: center;
-    position: relative;
+.footer {
+  background: #303036;
+  color: #d3d3d3;
+  width: 100%;
+  padding: 50px 0 0;
+  font-family: "Arial", sans-serif;
 }
 
 .footer-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
 .footer-section {
-    flex: 1 1 200px;
-    margin: 10px 20px;
-    max-width: 300px;
-    text-align: left;
+  flex: 1;
+  margin-bottom: 40px;
+  min-width: 300px;
+  padding: 0 20px;
 }
 
-.footer-section .logo-name {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
+.quick-links {
+  margin-left: -180px;
 }
 
-.footer-section .logo-name img {
-    height: 50px;
-    margin-right: 10px;
+.footer h2 {
+  color: white;
+  font-size: 1.3em;
+  margin-bottom: 20px;
 }
 
-.footer-section .logo-name h4 {
-    font-size: 18px;
-    margin: 20px 0;
+.logo-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
-.footer-section .contact {
-    font-size: 14px;
-    line-height: 28px;
-    color: #d3d3d3;
-    font-weight: 600;
-    cursor: pointer;
+.footer-logo {
+  width: 60px;
+  height: auto;
+  margin-right: 15px;
 }
 
-.footer-section .follow {
-    margin-left: 20px;
+.logo-outer {
+  display: flex;
+  align-items: center;
+}
+.logo-text {
+  font-size: 1.5em;
+  margin: 0;
 }
 
-.footer-section .contact:hover {
-    color: #ffee05;
+.about-text {
+  line-height: 1.5;
+  margin-bottom: 20px;
 }
 
-.footer-section h4 {
-    margin-bottom: 20px;
-    margin-top: 16px;
+.contact span {
+  display: block;
+  font-size: 1.1em;
+  margin-bottom: 8px;
+}
+
+.socials {
+  margin-top: 20px;
 }
 
-.footer-section p {
-    line-height: 22px;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: justify;
+.socials a {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  margin-right: 10px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  color: #d3d3d3;
+  position :relative;
+  z-index: 1;
+  transition: all 0.3s ease, transform 0.3s ease, background 0.3s ease;
+}
+
+.socials a:hover {
+  transform: scale(1.2) rotate(10deg); /* Zoom and rotate effect */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
+}
+
+/* Hover zoom and color change effect for social icons */
+.socials .facebook:hover {
+  background: linear-gradient(to right, #3b5998, #192f6a); /* Gradient background */
+  color: white;
+}
+
+.socials .instagram:hover {
+  background: linear-gradient(to right, #e1306c, #f77737); /* Instagram gradient */
+  color: white;
+}
+
+.socials .twitter:hover {
+  background: linear-gradient(to right, #1da1f2, #14171a); /* Gradient for X (Twitter) */
+  color: white;
+}
+
+.socials .youtube:hover {
+  background: linear-gradient(to right, #ff0000, #cc0000); /* YouTube gradient */
+  color: white;
+}
+
+/* Links hover effect */
+.links ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.links ul a {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1.1em;
+  color: #d3d3d3;
+  text-decoration: none;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.links ul a::before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 100%;
+  background-color: white;
+  left: 0;
+  top: 0;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+  transform-origin: top;
+}
+
+.links ul a:hover {
+  color: white;
+  padding-left: 10px;
+}
+
+.links ul a:hover::before {
+  transform: scaleY(1); /* Add a vertical line effect on hover */
+}
+
+
+.contact-form .text-input {
+  background: #272727;
+  color: #bebdbd;
+  margin-bottom: 20px;
+  line-height: 1.5rem;
+  padding: 10px 15px;
+  border: none;
+  width: 100%;
+  border-radius: 5px;
+}
+
+.contact-form textarea.text-input {
+  height: 120px;
+  resize: none;
+}
+
+.contact-form .contact-btn {
+  float: right;
+  font-size: 1.1em;
+  font-family: "Arial", sans-serif;
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.contact-form .contact-btn:hover {
+  background: #45a049;
+}
+
+#contact {
+  padding-top: 100px;
 }
 
 .footer-bottom {
-    border-top: 0.7px dashed #e4e4e4;
-    padding-top: 20px;
-    max-width: 30%;
-    margin: 0 auto;
-    text-align: center;
+  background-color: #1c1917; /* Dark background color */
+  padding: 12px 0; /* Spacing at the top and bottom */
+  text-align: center; /* Center the text */
+  color: #ffffff; /* White text color */
+  font-family: "Arial", sans-serif; /* Font family */
+  font-size: 14px; /* Font size */
+  border-top: 1px solid #ff71aa; /* Dull pink border on top */
+}
+
+.footer-bottom a {
+  color: #ff71aa; /* Dull pink for links */
+  text-decoration: none; /* Remove underline */
+  font-weight: bold; /* Make links bold */
+  transition: color 0.3s ease; /* Smooth color change on hover */
+}
+
+.footer-bottom a:hover {
+  color: #ffd700; /* Change link color to gold on hover */
 }
 
 .footer-bottom p {
-    margin: 5px 0;
-    font-size: 12px;
+  margin: 5px 0; /* Space between paragraphs */
 }
 
-.social-links a {
-    text-decoration: none;
+.footer-bottom span {
+  font-style: italic; /* Italicize the developer name */
 }
 
-.social-links a:first-child {
-    color: #3b5998;
+@media screen and (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+  }
+
+  .footer-section {
+    margin-bottom: 30px;
+  }
+
+  .contact-form .contact-btn {
+    width: 100%;
+    float: none;
+  }
 }
 
-.social-links a:nth-child(2) {
-    color: #1DA1F2;
+.close-btn {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  width: 25px;
+  height: 25px;
+  font-size: 20px;
+  color: white;
+  cursor: pointer;
+  background-color: #1f2937;
+  border: 2px solid white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 }
 
-.social-links a:last-child {
-    color: #0077b5;
+.toggle-arrow {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  transition: transform 0.3s ease-in-out;
+  background-color: #333;
+  border-radius: 10px 0 0 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 25px;
+  padding: 12px;
+  z-index: 1;
 }
 
-.instagram-link {
-    display: inline-block;
+.social-sidebar {
+  position: fixed;
+  top: 55%;
+  right: 0;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  background-color: #333;
+  padding: 3px;
+  border-radius: 15px 0 0 15px;
+  border: none;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  z-index: 1;
+  border: 1px solid rgb(147, 143, 143);
 }
 
-.instagram-icon {
-    font-size: 64px;
-    background: radial-gradient(circle at 30% 30%, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-    mask-image: url('https://unpkg.com/ionicons@5.5.2/dist/svg/logo-instagram.svg');
-    mask-size: cover;
-    color: transparent;
+.social-sidebar ul {
+  list-style: none;
+  margin: 0;
 }
 
-.social-links ion-icon {
-    font-size: 30px;
-    margin: 14px;
-    cursor: pointer;
-    transition: transform 0.3s;
+.social-sidebar li {
+  display: block;
+  margin: 12px 0;
+  position: relative;
 }
 
-.social-links ion-icon:hover {
-    transform: scale(1.2);
+.social-sidebar a {
+  text-decoration: none;
+  color: white;
+  font-size: 20px;
+  padding: 10px;
+  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+  border: none;
+  border-bottom: none;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  margin: 0 10px;
 }
 
+.social-sidebar a:hover i {
+  transform: scale(1.5);
+}
 
+.social-sidebar li a:hover {
+  background-color: #ffffff;
+  border-radius: 50%;
+  color: #1f2937;
+  transform: scale(1.1);
+}
 
+.social-sidebar i {
+  display: inline-block;
+  transition: transform 0.3s ease-in-out;
+}
 
+.social-sidebar a:hover i {
+  transform: scale(1.1);
+}
 
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */
 
-
 /* ----------------------------for mobiles--------------------------------------- */
 
 @media only screen and (max-width: 700px) {
+  .menu-icon {
+    margin-right: 40px;
+  }
 
-    .menu-icon {
-        margin-right: 40px;
-    }
-
-    nav ul {
-        width: 100%;
-        background: linear-gradient(to right, #fb5283, #ff3527);
-        position: absolute;
-        top: 73px;
-        right: 0;
-        z-index: 2;
-        margin-right: 20px;
-    }
-
-    nav ul li {
-        display: block;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        text-align: center;
-        margin-left: 50px;
-    }
-
-    nav ul li a {
-        color: #fff;
-    }
-
-    nav ul li a:hover {
-        color: #ffee00;
-        transform: scale(1.18);
-    }
-
-    .login a {
-        background-color: (#ff459f, #ff9532);
-        color: white;
-        padding: 4px 20px;
-        text-decoration: none;
-        border-radius: 5px;
-        display: inline-block;
-    }
-
-    .login a:hover {
-        background-color: #e05599;
-    }
-
-    .menu-icon {
-        display: block;
-    }
-
-    #menuList {
-        overflow: hidden;
-        transition: 0.5s;
-    }
-
-    .row {
-        flex-direction: column-reverse;
-        margin: 100px 0;
-    }
-
-    .col-2 {
-        flex-basis: 100%;
-        margin-bottom: 50px;
-    }
-
-    .col-2 .controller {
-        width: 77%;
-    }
-
-    .color-box {
-        transform: translateX(75px);
-    }
-
-    .col-1 {
-        flex-basis: 100%;
-    }
-
-    .col-1 h2 {
-        font-size: 35px;
-    }
-
-    .col-1 h3 {
-        font-size: 20px;
-    }
-
-    .footer-content {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .footer-section {
-        max-width: 100%;
-        text-align: center;
-    }
-
-    .footer-section .logo-name {
-        justify-content: center;
-    }
-
-    .footer-bottom {
-        max-width: fit-content;
-    }
+  nav ul {
+    width: 100%;
+    background: linear-gradient(to right, #fb5283, #ff3527);
+    position: absolute;
+    /* top: 73px; */
+    right: 0;
+    z-index: 2;
+    margin-right: 20px;
+    position: fixed;
+  }
 
-}
+  nav ul li {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    margin-left: 50px;
+  }
 
+  nav ul li a {
+    color: #fff;
+  }
 
-/* --------------------------for tabs------------------------------------ */
+  nav ul li a:hover {
+    color: #ffee00;
+    transform: scale(1.18);
+  }
 
+  .login a {
+    background-color: (#ff459f, #ff9532);
+    color: white;
+    padding: 4px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: inline-block;
+  }
+
+  .login a:hover {
+    background-color: #e05599;
+  }
+
+  .menu-icon {
+    display: block;
+  }
+
+  #menuList {
+    overflow: hidden;
+    transition: 0.5s;
+  }
+
+  .row {
+    flex-direction: column-reverse;
+    margin: 100px 0;
+  }
+
+  .col-2 {
+    flex-basis: 100%;
+    margin-bottom: 50px;
+  }
+
+  .col-2 .controller {
+    width: 77%;
+  }
+
+  .color-box {
+    transform: translateX(75px);
+  }
+
+  .col-1 {
+    flex-basis: 100%;
+  }
+
+  .col-1 h2 {
+    font-size: 35px;
+  }
+
+  .col-1 h3 {
+    font-size: 20px;
+  }
+
+  input,
+  textarea {
+    width: 160%; /* Adjust width for better alignment */
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .card-body {
+    display: flex;
+    width: 90%;
+    overflow-x: hidden;
+    margin: 20px auto;
+    padding: 20px;
+    justify-content: space-between; /* Form on the right and image on the left */
+    align-items: flex-start; /* Align content to the top */
+    flex-direction: column;
+  }
+
+  .image-section {
+    width: 90%; /* Width for the image section */
+    display: flex;
+    justify-content: center; /* Center the image */
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .form-section {
+    width: 50%; /* Width for the form section */
+  }
+
+  .image-section img {
+    max-width: 120%; /* Make sure image does not exceed its container width */
+    height: auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .form-group {
+    margin-bottom: 20px;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .footer-section {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .footer-section .logo-name {
+    justify-content: center;
+  }
+
+  .footer-bottom {
+    max-width: 100vw;
+  }
+}
+
+/* --------------------------for tabs------------------------------------ */
 
 @media only screen and (max-width: 1180px) {
+  .menu-icon {
+    margin-right: 60px;
+  }
+
+  nav ul {
+    width: 100%;
+    background: linear-gradient(to right, #fb5283, #ff3527);
+    position: absolute;
+    top: 73px;
+    right: 0;
+    z-index: 2;
+    margin-right: 21px;
+  }
+
+  nav ul li {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    margin-left: 50px;
+  }
+
+  nav ul li a {
+    color: #fff;
+    font-size: 1rem;
+    padding: 2rem;
+  }
+
+  nav ul li a:hover {
+    color: #ffee00;
+    transform: scale(1.18);
+  }
+  .switch {
+    margin: 50px;
+  }
+
+  .login a {
+    background-color: #752280;
+    color: white;
+    padding: 4px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: inline-block;
+  }
+
+  .login a:hover {
+    background-color: (#f267ff, #ff9532);
+  }
+
+  .menu-icon {
+    display: block;
+  }
+
+  #menuList {
+    overflow: hidden;
+    transition: 0.5s;
+  }
+  .header .navbar {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.scroll-top {
+  position: fixed;
+  bottom: 1.4%;
+  right: 5%;
+  background: linear-gradient(100deg, #ff393d, #ff3c76, #fffb05);
+  color: white;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  overflow: visible;
+  z-index: 10; /* Ensure button is on top */
+}
+
+.scroll-top.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-top:hover {
+  transform: scale(1.1); /* Subtle scaling instead of expanding */
+  box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6); /* Slightly larger shadow */
+}
+
+.scroll-top:active {
+  transform: scale(1.05); /* Minor scale reduction on click */
+}
+
+.scroll-top-icon {
+  position: relative;
+  z-index: 2;
+  transition: transform 0.3s ease;
+}
+
+.scroll-top:hover .scroll-top-icon {
+  transform: translateY(-3px);
+}
+
+/* Progress Ring Styling */
+.progress-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* To start from the top */
+}
+
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.35s;
+  transform-origin: 50% 50%;
+}
+
+/* Pulse Animation */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  }
+  50% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
+  }
+  100% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  }
+}
+
+.scroll-top:hover {
+  animation: pulse 1.5s infinite;
+}
+
+.scroll-top.show {
+  animation: none; /* No animation when showing the button */
+}
+
+.scroll-top.show:hover {
+  animation: pulse 1.5s infinite; /* Pulse on hover */
+}
+
+.searchbar-outer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-bar {
+  text-align: center;
+  margin: 15px 0;
+  display: flex;
+  justify-content: flex-end; /* Align to right */
+  align-items: center;
+  gap: 8px; /* Space between input and button */
+  background-color: #f0f0f0;
+  padding: 8px 15px;
+  border-radius: 50px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 50%;
+  left: 27rem;
+}
+
+#search-input {
+  width: 100%; /* Smaller input size */
+  padding: 8px 10px;
+  font-size: 14px;
+  border: none;
+  border-radius: 50px;
+  background-color: #fff;
+  outline: none;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+#search-input:focus {
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.search-bar button {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  font-size: 16px;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.search-bar button:hover {
+  background-color: #555;
+}
+
+.hero {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("https://img.freepik.com/free-photo/view-illuminated-neon-gaming-keyboard-setup-controller_23-2149529354.jpg?size=626&ext=jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  color: white;
+  text-align: center;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */
+  z-index: 1;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+.hero-content h1 {
+  font-size: 48px;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.hero-content p {
+  font-size: 18px;
+  margin-bottom: 30px;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.cta-btn {
+  background-color: white;
+  color: #ce0606;
+  padding: 15px 30px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-size: 16px;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.cta-btn:hover {
+  background-color: #c9565a;
+  color: white;
+}
+
+#faq {
+  padding-top: 100px;
+}
+
+.faq-container {
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 20px;
+  background-color: rgb(71, 61, 61);
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
+}
 
-    .menu-icon {
-        margin-right: 60px;
-    }
-
-    nav ul {
-        width: 100%;
-        background: linear-gradient(to right, #fb5283, #ff3527);
-        position: absolute;
-        top: 73px;
-        right: 0;
-        z-index: 2;
-        margin-right: 21px;
-    }
-
-    nav ul li {
-        display: block;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        text-align: center;
-        margin-left: 50px;
-    }
-
-    nav ul li a {
-        color: #fff;
-    }
-
-    nav ul li a:hover {
-        color: #ffee00;
-        transform: scale(1.18);
-    }
-
-    .login a {
-        background-color: #752280;
-        color: white;
-        padding: 4px 20px;
-        text-decoration: none;
-        border-radius: 5px;
-        display: inline-block;
-    }
-
-    .login a:hover {
-        background-color: (#f267ff, #ff9532);
-    }
-
-    .menu-icon {
-        display: block;
-    }
-
-    #menuList {
-        overflow: hidden;
-        transition: 0.5s;
-    }
-}
\ No newline at end of file
+.faq-title {
+  text-align: center;
+  font-size: 1.8em;
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+.faq {
+  margin-bottom: 15px;
+}
+
+.faq input[type="checkbox"] {
+  display: none;
+}
+
+.faq-question {
+  padding: 15px;
+  font-size: 1.2em;
+  background-color: #f6763f;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  /* display: block; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.faq-question:hover {
+  background-color: #ff6b6b;
+}
+
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  padding: 0 15px;
+  background-color: #ffe0b5;
+  color: #333;
+  border-left: 4px solid #ff8552;
+  transition: all 0.6s ease;
+}
+
+.faq input[type="checkbox"]:checked ~ .faq-answer {
+  max-height: 150px;
+  padding: 15px;
+}
+.arrow {
+  margin-top: -3px;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-right: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+  transition: transform 0.3s ease;
+}
+/* Rotate arrow on FAQ open */
+.faq input[type="checkbox"]:checked + label .arrow {
+  transform: rotate(225deg);
+}
+
+/* Body styles for consistency */
+#review-body {
+  text-align: center;
+  background-color: #eaf6fd;
+  padding: 40px 20px;
+}
+
+.reviewer-img {
+  border-radius: 50%;
+  margin-bottom: 10px;
+  width: 120px;
+  height: 120px;
+}
+
+.reviewer-name {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.review-card {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 350px;
+  margin: 0 auto;
+}
+
+.review-rating {
+  color: #ffd700;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.swiper-pagination {
+  position: relative;
+  bottom: 1px !important;
+  text-align: center;
+}
+
+.swiper-pagination-bullet {
+  width: 12px;
+  height: 12px;
+  opacity: 1;
+}
+
+.swiper-container {
+  position: relative;
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+  color: #2d3945 !important;
+  background-color: #9d8a3c;
+  padding: 10px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.swiper-button-next {
+  right: 25rem !important;
+}
+
+.swiper-button-prev {
+  left: 25rem !important;
+}
+
+/* Responsive behavior for smaller screens */
+@media screen and (max-width: 1110px) {
+  .swiper-button-next,
+  .swiper-button-prev {
+    width: 30px;
+    height: 30px;
+    padding: 5px;
+  }
+
+  .swiper-button-next {
+    right: 10rem !important;
+  }
+
+  .swiper-button-prev {
+    left: 10rem !important;
+  }
+}
+
+.swiper-button-next:hover,
+.swiper-button-prev:hover {
+  background-color: #dfc458;
+  transition: background-color 0.3s ease;
+}
+
+#review-body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgb(71, 61, 61);
+}
+
+/* Section Title */
+.reviews-title {
+  text-align: center;
+  font-size: 1.8em;
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+/* Individual Review Card */
+.review-card {
+  margin-bottom: 15px; /* Reduced margin to shorten height */
+  padding: 15px; /* Reduced padding */
+  background-color: #ffe0b5;
+  border-left: 3px solid #ff8552; /* Thinner border */
+  border-radius: 8px; /* Slightly smaller border radius */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+/* Hover Effect for Review Cards */
+.review-card:hover {
+  transform: translateY(-3px); /* Slightly less lift on hover */
+}
+
+/* Reviewer Name */
+.reviewer-name {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px; /* Slightly smaller gap */
+}
+
+/* Review Rating */
+.review-rating {
+  font-size: 1.2em;
+  color: #ff8552;
+  margin-bottom: 8px; /* Slightly smaller gap */
+}
+
+/* Review Text */
+.review-text {
+  font-size: 1em;
+  color: #555;
+  line-height: 1.5; /* Slightly tighter line height */
+}
+
+/* testimonial */
+.site {
+  font-family: "Poppins", sans-serif;
+  font-weight: 200;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  color: #000;
+}
+.container-swipe {
+  max-width: 1100px;
+  width: 100%;
+  padding: 0 30px;
+  margin: 0 auto;
+}
+.testi {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.testi .head {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.testi .head p {
+  font-weight: 600;
+  font-size: 25px;
+}
+
+.testi .head h3 {
+  font-size: 34px;
+  font-weight: 800;
+  color: #ff8552;
+}
+
+.testi .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 60px;
+  padding: 30px 0;
+}
+
+/*thumbnail*/
+.testi .thumbnail {
+  width: 150px;
+  height: 150px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.testi .thumbnail img {
+  object-fit: cover;
+  width: 70%;
+  height: 70%;
+  border-radius: 50%;
+  transform: scale(1.5);
+  transition: transform 0.5s;
+}
+.testi .swiper-slide-active .thumbnailimg {
+  transform: scale(1);
+}
+
+.testi .thumbnail::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  background-color: #ff8552;
+  border-radius: 50%;
+  z-index: -1;
+  box-shadow: rgb(0, 0, 2/ 35%) 0px 20px 30px -10px;
+  transition: border-radius 0.5s 0.3s;
+}
+
+.testi .swiper-slide-active .thumbnail::before {
+  border-radius: 33% 67% 50% 50% / 50% 14% 86% 50%;
+}
+.testi .aside {
+  position: relative;
+  padding-top: 15px;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+}
+
+.testi .aside > p {
+  position: relative;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 550;
+  margin-bottom: 30px;
+  opacity: 0;
+  transform: translateX(10%);
+  transition: transform 1s, opacity 1s;
+}
+
+.testi .swiper-slide-active .aside > p {
+  transform: translateX(0);
+  opacity: 1;
+}
+.testi .aside > p::before,
+.testi .aside > p::after {
+  font-family: serif;
+  font-size: 80px;
+  font-weight: 800;
+  line-height: 1;
+  position: absolute;
+  color: #ffe0b5;
+  height: 40px;
+  z-index: -1;
+}
+.testi .aside > p::before {
+  content: open-quote;
+  top: -40px;
+  left: 10px;
+}
+.testi .aside > p::after {
+  content: close-quote;
+  right: 0;
+}
+
+.testi .aside .name {
+  position: relative;
+  width: fit-content;
+  line-height: 1;
+  opacity: 0;
+  transform: translateX(30px);
+  transition: transform 1s 0.2s, opacity 1s 0.3s;
+}
+.testi .swiper-slide-active .name {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.testi .aside .name h4 {
+  font-size: 24px;
+  font-weight: 800;
+  color: #ff8552;
+  opacity: 0.8;
+}
+
+.testi .aside .name p {
+  font-size: 15px;
+  text-align: right;
+}
+/*slider*/
+.testi :is(.swiper-button-next, .swiper-button-prev) {
+  background-color: #ffe0b5;
+
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+  box-shadow: rgb(0, 0, 2/ 35%) 0px 20px 30px -10px;
+}
+.swiper-button-next {
+  margin-right: -400px;
+}
+.swiper-button-prev {
+  margin-left: -400px;
+  margin-top: 100px;
+}
+
+.testi :is(.swiper-button-next, .swiper-button-prev):hover {
+  background-color: #ff8552;
+}
+
+.testi :is(.swiper-button-next, .swiper-button-prev)::after {
+  font-size: 16px;
+  font-weight: 800;
+  color: white;
+}
+.testi.swiper-pagination {
+  position: relative;
+}
+
+.testi.swiper-pagination span {
+  background-color: #ffe0b5;
+  transition: width 0.3s;
+  opacity: 1;
+}
+
+.testi .swiper-pagination .swiper-pagination-bullet-active {
+  width: 26px;
+  border-radius: 4px;
+  background-color: #ff8552;
+}
+
+@media screen and (min-width: 768px) {
+  .testi .wrapper {
+    flex-direction: row;
+    padding: 30px 100px;
+  }
+  .testi .thumbnail {
+    width: 200px;
+    height: 200px;
+  }
+  .testi :is(swiper-button-next, .swiper-button-prev) {
+    top: 50%;
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  .footer-bottom {
+    width: 1000vw !important;
+  }
+}