feat: Enhance scrollbar styling with golden theme for industry dropdowns

- Update scrollbar color to match golden theme (#F6C268)

- Apply consistent styling across all scrollbars

- Add specific targeting for industry dropdown

- Improve cross-browser compatibility

- Enhance visual consistency with luxury brand aesthetic

src/components/WaitlistForm.tsx

@@ -242,13 +242,13 @@ const WaitlistForm: React.FC<WaitlistFormProps> = ({ isVisible, onClose }) => {
         className="relative max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto overflow-x-hidden" 
         style={{
           scrollbarWidth: 'thin',
-          scrollbarColor: '#C59D59 transparent',
+          scrollbarColor: '#F6C268 transparent',
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.scrollbarColor = '#C59D59 rgba(197, 157, 89, 0.1)';
+          e.currentTarget.style.scrollbarColor = '#F6C268 rgba(246, 194, 104, 0.1)';
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.scrollbarColor = '#C59D59 transparent';
+          e.currentTarget.style.scrollbarColor = '#F6C268 transparent';
         }}
       >
         {/* Form Container */}
@@ -530,9 +530,14 @@ const WaitlistForm: React.FC<WaitlistFormProps> = ({ isVisible, onClose }) => {
                     Industry <span className="text-red-400">*</span>
                   </label>
                   <select
+                    name="industry"
                     value={formData.industry}
                     onChange={(e) => handleInputChange('industry', e.target.value)}
                     className={`w-full bg-deep-forest/50 border ${errors.industry ? 'border-red-400' : 'border-luxury-gold/20'} rounded-lg px-4 py-3 text-cream focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 focus:border-luxury-gold/50 transition-all duration-300 font-elegant-sans`}
+                    style={{
+                      scrollbarWidth: 'thin',
+                      scrollbarColor: '#F6C268 transparent',
+                    }}
                   >
                     <option value="">Select your industry</option>
                     {industries.map(industry => (

src/index.css

@@ -23,4 +23,73 @@ html {
     transform: translateX(400%);
     opacity: 0;
   }
+}
+
+/* Custom golden scrollbar styles for select elements and dropdowns */
+select {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent;
+}
+
+select:hover {
+  scrollbar-color: #F6C268 rgba(246, 194, 104, 0.1);
+}
+
+/* Webkit scrollbar styles for select elements */
+select::-webkit-scrollbar {
+  width: 8px;
+}
+
+select::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+select::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+select::-webkit-scrollbar-thumb:hover {
+  background: #F6C268;
+}
+
+/* Specific styling for industry dropdown */
+select[name="industry"],
+select[value*="industry"] {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent !important;
+}
+
+select[name="industry"]::-webkit-scrollbar-thumb,
+select[value*="industry"]::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 2px;
+}
+
+/* General scrollbar styles for consistency */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #F6C268;
 }