Revamp index.html, styles.css, and script.js for Tuning Pro website. Update branding to Dutch language, enhance navbar and sections with new color schemes, and improve button functionalities. Implement dynamic content in modals and refine form handling for better user experience.

css/styles.css

@@ -323,18 +323,18 @@ body {
 
 /* Navbar Styles */
 .glass-nav {
-    background: rgba(139, 92, 246, 0.1);
+    background: rgba(17, 24, 39, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .glass-nav:hover {
-    background: rgba(139, 92, 246, 0.15);
+    background: rgba(17, 24, 39, 0.9);
 }
 
 .navbar-brand img {
-    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
+    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
 }
 
 .nav-link {
@@ -354,7 +354,7 @@ body {
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    background: linear-gradient(to right, #ef4444, #f97316);
     transform: scaleX(1);
     transition: transform 0.3s ease;
 }
@@ -366,7 +366,7 @@ body {
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    background: linear-gradient(to right, #ef4444, #f97316);
     transform: scaleX(0);
     transition: transform 0.3s ease;
     transform-origin: right;
@@ -397,14 +397,82 @@ body {
 }
 
 .navbar.scrolled {
-    background: rgba(139, 92, 246, 0.95);
+    background: rgba(17, 24, 39, 0.95);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Modal Styles */
+.modal-content {
+    background: #1f2937;
+    border: 1px solid #ef4444;
+}
+
+.modal-header {
+    border-bottom: 1px solid #374151;
+}
+
+.modal-footer {
+    border-top: 1px solid #374151;
+}
+
+/* Form Styles */
+.form-control {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #fff;
+}
+
+.form-control:focus {
+    background-color: #374151;
+    border-color: #ef4444;
+    color: #fff;
+    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
+}
+
+/* Button Styles */
+.btn-primary {
+    background: linear-gradient(to right, #ef4444, #f97316);
+    border: none;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(to right, #dc2626, #ea580c);
+}
+
+.btn-outline-secondary {
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+.btn-outline-secondary:hover {
+    background: linear-gradient(to right, #ef4444, #f97316);
+    border-color: transparent;
+    color: #fff;
+}
+
+/* Search Results */
+.search-result-item {
+    transition: all 0.3s ease;
+}
+
+.search-result-item:hover {
+    transform: translateX(5px);
+}
+
+/* Customer Details */
+.interaction-item {
+    transition: all 0.3s ease;
+}
+
+.interaction-item:hover {
+    transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 /* Mobile menu styles */
 @media (max-width: 991.98px) {
     .navbar-collapse {
-        background: rgba(139, 92, 246, 0.95);
+        background: rgba(17, 24, 39, 0.95);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         border-radius: 0.5rem;
@@ -424,4 +492,38 @@ body {
     .nav-link::after {
         display: none;
     }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #ef4444;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #dc2626;
 }