From 00b8b2d3a6666a5305ed9ce5549270f6e6c85e11 Mon Sep 17 00:00:00 2001
From: Rohit <48400770+rohitdasu@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:11:34 +0530
Subject: [PATCH 1/7] Update _document.tsx

---
 pages/_document.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index 960e4831..97c43778 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -45,7 +45,7 @@ export default class MyDocument extends Document {
 
           <script
             src="https://survei-feedback.vercel.app/scripts/popup.min.js"
-            data-popup-id="661d54a06635b504822c38e0"
+            data-survei-id="661d54a06635b504822c38e0"
             data-theme="sun"
             data-position="left"
             data-button-color="#000000"

From d1bee209020c714122abe1159033079c1845c426 Mon Sep 17 00:00:00 2001
From: Rohit <48400770+rohitdasu@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:14:46 +0530
Subject: [PATCH 2/7] Update _document.tsx

---
 pages/_document.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index 97c43778..c87e418f 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -44,7 +44,7 @@ export default class MyDocument extends Document {
           <meta property="twitter:image" content="/og.png" />
 
           <script
-            src="https://survei-feedback.vercel.app/scripts/popup.min.js"
+            src="https://survei-feedback.vercel.app/scripts/survei.js"
             data-survei-id="661d54a06635b504822c38e0"
             data-theme="sun"
             data-position="left"

From c2f4cf26b3edd3392f809ae977b110cad69df452 Mon Sep 17 00:00:00 2001
From: Rohit <48400770+rohitdasu@users.noreply.github.com>
Date: Wed, 24 Apr 2024 11:00:31 +0530
Subject: [PATCH 3/7] Update _document.tsx

---
 pages/_document.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index c87e418f..d2881b31 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -45,6 +45,7 @@ export default class MyDocument extends Document {
 
           <script
             src="https://survei-feedback.vercel.app/scripts/survei.js"
+            data-widget="feedbackform1"
             data-survei-id="661d54a06635b504822c38e0"
             data-theme="sun"
             data-position="left"

From 7dacd38cbfc61665e5e5f37c06c9640e94df370c Mon Sep 17 00:00:00 2001
From: rohitdasu <dasurohit123@gmail.com>
Date: Sat, 11 May 2024 20:51:49 +0530
Subject: [PATCH 4/7] chore: hide right sidebar

---
 README.md                                     |  2 +-
 .../Layouts/SharedLayout/SharedLayout.tsx     |  6 +-
 package-lock.json                             | 60 +++++++++++++++++++
 yarn.lock                                     | 54 ++++++-----------
 4 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 56e0b55b..a6dfcc25 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 Discover open-source projects, connect with experienced maintainers, and collaborate with a community of passionate contributors. Join over 200+ registered users who are already making a difference
 
 ## Demo
-  
+
 Check out the web app 🌏 : https://projectmate.net/
 <br>
 <br>
diff --git a/components/Layouts/SharedLayout/SharedLayout.tsx b/components/Layouts/SharedLayout/SharedLayout.tsx
index 55724a41..d18eac8a 100644
--- a/components/Layouts/SharedLayout/SharedLayout.tsx
+++ b/components/Layouts/SharedLayout/SharedLayout.tsx
@@ -6,7 +6,7 @@ import { BottomBar } from '../BottomBar';
 import { TopNavbar } from '../TopNavbar';
 import { favicons } from '@/data';
 import BackToTopButton from '@/components/Common/BackToTop';
-import RightBar from '../RightBar';
+// import RightBar from '../RightBar';
 
 export const SharedLayout: FC<SharedLayoutProps> = ({
   title = '',
@@ -67,9 +67,7 @@ export const SharedLayout: FC<SharedLayoutProps> = ({
           {children}
         </main>
         {rightSidebar && (
-          <div className="grid min-h-dvh grid-cols-4">
-            <RightBar />
-          </div>
+          <div className="grid min-h-dvh grid-cols-4">{/* <RightBar /> */}</div>
         )}
       </div>
       {bottomBar && (
diff --git a/package-lock.json b/package-lock.json
index 421bddca..25120e5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8142,6 +8142,66 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.1.tgz",
+      "integrity": "sha512-Yua7mUpEd1wzIT6Jjl3dpRizIfGp9NR4F2xeRuQv+ae+SDI1Em2WyM9m46UL+oeW5GpMiEHoaBagr47RScZFmQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.1.tgz",
+      "integrity": "sha512-Bifcr2f6VwInOdq1uH/9lp8fH7Nf7XGkIx4XceVd32LPJqG2c6FZU8ZRBvTdhxzXVpt5TPtuXhOP4Ij9UPqsVw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.1.tgz",
+      "integrity": "sha512-N/a4JarAq+E+g+9K2ywJUmDIgU2xs2nA+BBldH0oq4zYJMRiUhL0iaN9G4e72VmGOJ61L/3W6VN8RIUOwTLoqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.1.tgz",
+      "integrity": "sha512-WaFoerF/eRbhbE57TaIGJXbQAERADZ/RZ45u6qox9beb5xnWsyYgzX+WuN7Tkhyvga0/aMuVYFzS9CEay7D+bw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 501ded4b..d681e1d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,10 +19,10 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.24.0":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+"@babel/runtime@^7.24.1":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1332,10 +1332,10 @@ clsx@2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
-clsx@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
-  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 color-convert@^2.0.1:
   version "2.0.1"
@@ -2712,10 +2712,10 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
-lucide-react@^0.363.0:
-  version "0.363.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.363.0.tgz#2bb1f9d09b830dda86f5118fcd097f87247fe0e3"
-  integrity sha512-AlsfPCsXQyQx7wwsIgzcKOL9LwC498LIMAo+c0Es5PkHJa33xwmYAkkSoKoJWWWSYQEStqu58/jT4tL2gi32uQ==
+lucide-react@^0.292.0:
+  version "0.292.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.292.0.tgz#c8a06b2ccd8a348a88669def3c0291c035de2884"
+  integrity sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==
 
 make-error@^1.1.1:
   version "1.3.6"
@@ -3594,16 +3594,7 @@ string-argv@0.3.2:
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3663,14 +3654,7 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -3739,12 +3723,12 @@ swr@^2.2.5:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
 
-tailwind-merge@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.2.tgz#87341e7604f0e20499939e152cd2841f41f7a3df"
-  integrity sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==
+tailwind-merge@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
   dependencies:
-    "@babel/runtime" "^7.24.0"
+    "@babel/runtime" "^7.24.1"
 
 tailwindcss-animate@^1.0.7:
   version "1.0.7"

From 572d800a5b10f4eea23c5a44fc2972ee3c8f0cf8 Mon Sep 17 00:00:00 2001
From: Shushant Awasthi <sushantawasthi000@gmail.com>
Date: Thu, 1 May 2025 23:17:31 +0530
Subject: [PATCH 5/7] Add mouse tracker dot component

---
 components/Common/MouseTracker.tsx | 42 ++++++++++++++++++++++++++++++
 pages/_app.tsx                     |  2 ++
 2 files changed, 44 insertions(+)
 create mode 100644 components/Common/MouseTracker.tsx

diff --git a/components/Common/MouseTracker.tsx b/components/Common/MouseTracker.tsx
new file mode 100644
index 00000000..22a3148c
--- /dev/null
+++ b/components/Common/MouseTracker.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+export const MouseTracker = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const updateMousePosition = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+
+    window.addEventListener('mousemove', updateMousePosition);
+
+    return () => {
+      window.removeEventListener('mousemove', updateMousePosition);
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        transition: 'transform 0.1s ease-out',
+      }}
+    >
+      <div
+        style={{
+          width: '8px',
+          height: '8px',
+          backgroundColor: 'rgba(var(--foreground-rgb), 0.5)',
+          borderRadius: '50%',
+          marginLeft: '-4px',
+          marginTop: '-4px',
+        }}
+      />
+    </div>
+  );
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3261acb1..a9bdc938 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,6 +12,7 @@ import { AppDataContext } from '@/context/Common/CommonContext';
 import { Loader } from 'lucide-react';
 import { useState } from 'react';
 import { ProgressBar } from '@/components/Common/ProgressBar';
+import { MouseTracker } from '@/components/Common/MouseTracker';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const userDetailsUrl = `/api/user/details`;
@@ -37,6 +38,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
             <Toaster />
             <AuthModal />
             <ShareModal />
+            <MouseTracker />
             {!isDetailsLoading ? (
               <>
                 <ProgressBar />

From b96668c27a0d4845887bfa632fd9f8018b0e92db Mon Sep 17 00:00:00 2001
From: Shushant Awasthi <sushantawasthi000@gmail.com>
Date: Thu, 1 May 2025 23:26:07 +0530
Subject: [PATCH 6/7] feat: add mouse tracker dot component This commit adds a
 minimal, non-intrusive mouse tracker dot that follows the cursor across all
 pages. The component: - Is globally available across all pages - Uses theme
 colors and respects dark/light modes - Doesn't interfere with user
 interactions - Cleans up event listeners properly - Is accessible and
 performance-optimized

---
 components/Common/MouseTracker.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/Common/MouseTracker.tsx b/components/Common/MouseTracker.tsx
index 22a3148c..338c9fc7 100644
--- a/components/Common/MouseTracker.tsx
+++ b/components/Common/MouseTracker.tsx
@@ -28,13 +28,9 @@ export const MouseTracker = () => {
       }}
     >
       <div
+        className="h-2 w-2 -translate-x-1 -translate-y-1 rounded-full bg-foreground/50"
         style={{
-          width: '8px',
-          height: '8px',
-          backgroundColor: 'rgba(var(--foreground-rgb), 0.5)',
-          borderRadius: '50%',
-          marginLeft: '-4px',
-          marginTop: '-4px',
+          mixBlendMode: 'difference',
         }}
       />
     </div>

From e412fd1097d4bbe70285cd748ed7cbc0877d03ec Mon Sep 17 00:00:00 2001
From: Shushant Awasthi <sushantawasthi000@gmail.com>
Date: Thu, 1 May 2025 23:58:05 +0530
Subject: [PATCH 7/7] feat: add spotlight effect to video demo section

This commit adds an immersive spotlight effect to the video demo section:
- Dims the surrounding content when video is in view
- Smooth transitions for better user experience
- Maintains accessibility and performance
- No interference with user interactions
- Proper cleanup on unmount

The feature enhances the demo video viewing experience by:
- Drawing focus to the video content
- Creating a theater-like experience
- Using non-intrusive animations
- Preserving all existing functionality
---
 .../views/LandingPage/VideoDemo/index.tsx     | 85 +++++++++++++------
 styles/globals.css                            | 10 +++
 2 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/components/views/LandingPage/VideoDemo/index.tsx b/components/views/LandingPage/VideoDemo/index.tsx
index e8c656c8..b8db3d7b 100644
--- a/components/views/LandingPage/VideoDemo/index.tsx
+++ b/components/views/LandingPage/VideoDemo/index.tsx
@@ -1,45 +1,76 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'react-intersection-observer';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 const videoVariants = {
   hidden: { opacity: 0, y: 50 },
   visible: { opacity: 1, y: 0, transition: { duration: 1 } },
 };
 
+const overlayVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.5 } },
+};
+
 export const VideoDemo = () => {
   const [ref, inView] = useInView({
-    triggerOnce: true,
+    triggerOnce: false,
+    threshold: 0.5,
   });
 
+  useEffect(() => {
+    // Add/remove a class to the body when video is in view
+    if (inView) {
+      document.body.classList.add('video-in-view');
+    } else {
+      document.body.classList.remove('video-in-view');
+    }
+
+    return () => {
+      document.body.classList.remove('video-in-view');
+    };
+  }, [inView]);
+
   return (
-    <section className="px-4 md:px-8 xl:px-0" id="demo">
+    <>
+      {/* Overlay that dims the rest of the page */}
       <motion.div
-        ref={ref}
-        variants={videoVariants}
+        variants={overlayVariants}
         initial="hidden"
         animate={inView ? 'visible' : 'hidden'}
-        exit="hidden"
-        className="mx-auto flex max-w-screen-lg flex-col gap-8"
-      >
-        <section>
-          <div style={{ padding: '56.04% 0 0 0', position: 'relative' }}>
-            <iframe
-              src="https://player.vimeo.com/video/893011089?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;title=0&amp;byline=0&amp;portrait=0"
-              frameBorder="0"
-              allow="autoplay; fullscreen; picture-in-picture"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-              }}
-              title="projectmate-demo"
-            ></iframe>
-          </div>
-        </section>
-      </motion.div>
-    </section>
+        className="pointer-events-none fixed inset-0 bg-black/50 transition-opacity duration-500"
+        style={{ opacity: inView ? 1 : 0 }}
+      />
+
+      <section className="relative z-10 px-4 md:px-8 xl:px-0" id="demo">
+        <motion.div
+          ref={ref}
+          variants={videoVariants}
+          initial="hidden"
+          animate={inView ? 'visible' : 'hidden'}
+          exit="hidden"
+          className="mx-auto flex max-w-screen-lg flex-col gap-8"
+        >
+          <section className="relative">
+            <div style={{ padding: '56.04% 0 0 0', position: 'relative' }}>
+              <iframe
+                src="https://player.vimeo.com/video/893011089?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;loop=1&amp;background=1&amp;muted=1"
+                frameBorder="0"
+                allow="autoplay; fullscreen; picture-in-picture"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                }}
+                title="projectmate-demo"
+                className="rounded-lg shadow-lg"
+              />
+            </div>
+          </section>
+        </motion.div>
+      </section>
+    </>
   );
 };
diff --git a/styles/globals.css b/styles/globals.css
index 4954c2c7..6c78cc99 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -72,6 +72,16 @@
   }
   body {
     @apply bg-background text-foreground;
+    transition: background-color 0.5s ease;
+  }
+
+  body.video-in-view {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+
+  body.video-in-view .bg-background {
+    position: relative;
+    z-index: 1;
   }
 }