Fixed the dark gradient issues on the company containers.

Author: sohumvenkatadri7

src/css/custom.css

@@ -846,6 +846,32 @@ html[data-theme="light"] .interview-prep-page .technical-outer {
   z-index: 10 !important;
 }
 
+/* Companies tab: use white gradients in light mode and remove overlays */
+[data-theme="light"] .company-outer {
+  background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  color: #0f172a !important;
+  isolation: isolate !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+}
+
+/* hide the subtle pattern overlay added inside the component */
+[data-theme="light"] .company-outer > .absolute.inset-0,
+[data-theme="light"] .company-outer .absolute.inset-0.opacity-5 {
+  display: none !important;
+  background: none !important;
+  opacity: 1 !important;
+}
+
+/* ensure badges & inner panels render normally */
+[data-theme="light"] .company-outer,
+[data-theme="light"] .company-outer * {
+  mix-blend-mode: normal !important;
+  background-blend-mode: normal !important;
+}
+
 /*==== SECTION 13 Modern Blog Enhancements ======*/
 .modern-gradient-bg {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1591,3 +1617,19 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 {
   background-image: none !important;
   background-color: #ffffff !important;
 }
+
+/* Companies: force white/near-white surface in light mode for .company-outer */
+html[data-theme="light"] .company-outer {
+  background-image: linear-gradient(135deg,#ffffff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+  isolation: isolate !important;
+}
+html[data-theme="light"] .company-outer::before,
+html[data-theme="light"] .company-outer::after {
+  display: none !important;
+  background: none !important;
+  content: none !important;
+}

src/pages/interview-prep/CompaniesTab.tsx

@@ -131,7 +131,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
       </motion.div>
 
       <motion.div
-        className="relative bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900/50 dark:via-blue-900/20 dark:to-indigo-900/20 rounded-3xl p-12 mb-16 overflow-hidden border company-blue-border"
+        className="company-outer relative bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900/50 dark:via-blue-900/20 dark:to-indigo-900/20 rounded-3xl p-12 mb-16 overflow-hidden border company-blue-border"
         variants={fadeIn}
       >
         {/* Background pattern */}
@@ -340,7 +340,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
             <motion.div key={companyIndex} variants={fadeIn} className="group">
               <Card className="overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-500 transform hover:scale-[1.02] border-0">
                 {/* --------- HEADER --------- */}
-                <CardHeader className="pb-6 bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 dark:from-gray-800 dark:via-blue-900/20 dark:to-indigo-900/20 relative">
+                <CardHeader className="company-outer pb-6 bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 dark:from-gray-800 dark:via-blue-900/20 dark:to-indigo-900/20 relative">
                   {/* Background pattern */}
                   <div className="absolute inset-0 opacity-5">
                     <div