From 503d935fc6db152225f86e77478255891df9646c Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Sun, 27 Jul 2025 12:54:12 +0530
Subject: [PATCH] Fixed Carousal 2

---
 src/components/banner/Banner.css | 18 ++++++++----------
 src/components/banner/Banner.jsx |  6 +++---
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/banner/Banner.css b/src/components/banner/Banner.css
index f507cc8..0734e35 100644
--- a/src/components/banner/Banner.css
+++ b/src/components/banner/Banner.css
@@ -1,15 +1,11 @@
 .spotlight {
   overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .spotlight-overlay {
-  width: 100.1%;
-  height: 100.1%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom:0;
   background: radial-gradient(
       circle at 130% center,
       rgba(10, 10, 10, 0) 50%,
@@ -30,14 +26,14 @@
       rgba(10, 10, 10, 0) 100%
     ),
     linear-gradient(
-      to bottom,m 
+      to bottom,
       rgba(10, 10, 10, 1) 0%,
       rgba(10, 10, 10, 0) 20%,
       rgba(10, 10, 10, 0) 100%
     );
-
-  z-index: 1;
+  pointer-events: none;
 }
+
 @media only screen and (max-width: 1300px) {
   .spotlight-overlay {
     background: radial-gradient(
@@ -67,6 +63,7 @@
     );
   }
 }
+
 @media only screen and (max-width: 1200px) {
   .spotlight-overlay {
     background: radial-gradient(
@@ -96,6 +93,7 @@
     );
   }
 }
+
 @media only screen and (max-width: 900px) {
   .spotlight-overlay {
     background: radial-gradient(
diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx
index b174130..c9e26e7 100644
--- a/src/components/banner/Banner.jsx
+++ b/src/components/banner/Banner.jsx
@@ -19,8 +19,8 @@ function Banner({ item, index }) {
         alt={item.title}
         className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
       />
-      <div className="spotlight-overlay"></div>
-      <div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[50px] max-[300px]:w-full">
+      <div className="spotlight-overlay absolute inset-0 z-[1]"></div>
+      <div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[50px] max-[300px]:w-full">
         <p className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbade] to-[#ff90c5] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
           #{index + 1} Spotlight
         </p>
@@ -105,7 +105,7 @@ function Banner({ item, index }) {
           {item.description}
         </p>
       </div>
-      <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-10 max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
+      <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-[2] max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
         <Link
           to={`/watch/${item.id}`}
           className="bg-white/90 hover:bg-white text-black font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 shadow-lg shadow-black/10 backdrop-blur-sm hover:translate-y-[-1px]"