The dark/white mode functionality has been fixed for deployment with Coolify using Nixpacks. The improvements include:

Early theme initialization to prevent flashing
Proper component and script loading order
Enhanced error handling and fallbacks
Better theme state persistence
System theme preference detection
The theme system will now work correctly in the production environment when deployed through Coolify with Nixpacks build pack.

public-pre/css/responsive.css

@@ -0,0 +1,172 @@
+/* Tablet Devices */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 1.5rem;
+    }
+
+    header {
+        padding: 1rem;
+    }
+
+    .logo-text {
+        font-size: 1.8rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    .h1-hero {
+        font-size: 2rem !important;
+        margin: 1rem !important;
+        padding: 1rem !important;
+    }
+
+    .mission-vision {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .service-card {
+        padding: 1.5rem;
+    }
+
+    .welcome-quote {
+        font-size: 1rem;
+        padding: 1rem;
+    }
+
+    .logo-sub {
+        margin: 1.5rem;
+        font-size: 0.85rem;
+        margin: 0;
+        padding: 1.5rem 1.5rem;
+    }
+}
+
+/* Mobile Devices */
+@media (max-width: 480px) {
+    .container {
+        padding: 0 1rem;
+    }
+
+    header {
+        padding: 0.75rem;
+        max-height: 120px;
+    }
+
+    .logo-text {
+        font-size: 1.6rem;
+    }
+
+    main {
+        margin-top: 1rem;
+        padding: 1rem 0;
+    }
+
+    section {
+        margin: 2rem 0;
+    }
+
+    h1.h1-hero {
+        font-size: 1.75rem !important;
+        margin: 0.5rem !important;
+        padding: 0.5rem !important;
+    }
+
+    .welcome-quote {
+        font-size: 0.95rem;
+        padding: 0.5rem;
+        line-height: 1.5;
+    }
+
+    .service-card {
+        padding: 1.25rem;
+        margin: 1rem 0;
+    }
+
+    .service-card h3 {
+        font-size: 1.2rem;
+    }
+
+    .contact-info {
+        padding: 1.5rem;
+        margin: 1rem 0;
+    }
+
+    .contact-info a {
+        padding: 0.5rem 0;
+        font-size: 0.95rem;
+    }
+
+    .logo-sub {
+        font-size: 0.8rem;
+        line-height: 1.4;
+        margin: 0;
+        padding: 1.5rem 1.5rem;
+    }
+}
+
+/* Small Mobile Devices */
+@media (max-width: 320px) {
+    header {
+        padding: 0.5rem;
+        max-height: 100px;
+    }
+
+    .logo-text {
+        font-size: 1.4rem;
+    }
+
+    h1.h1-hero {
+        font-size: 1.5rem !important;
+    }
+
+    .service-card {
+        padding: 1rem;
+    }
+
+    .contact-info {
+        padding: 1rem;
+    }
+
+    .welcome-quote {
+        font-size: 0.9rem;
+    }
+
+    .logo-sub {
+        font-size: 0.75rem;
+        margin: 0.75rem;
+    }
+}
+
+/* Ensure touch targets are large enough on mobile */
+@media (hover: none) {
+    .contact-info a {
+        padding: 0.75rem 0;
+    }
+
+    .service-card {
+        transition: none;
+    }
+
+    .service-card:hover {
+        transform: none;
+    }
+
+    header:hover {
+        transform: none;
+    }
+}
+
+/* Fix for notched phones */
+@supports (padding: max(0px)) {
+    header {
+        padding-left: max(1rem, env(safe-area-inset-left));
+        padding-right: max(1rem, env(safe-area-inset-right));
+    }
+}