diff --git a/404.php b/404.php
index 2e0086d..8aa364f 100644
--- a/404.php
+++ b/404.php
@@ -88,6 +88,7 @@ $page_description = "The page you're looking for doesn't exist. Explore our data
+
404
diff --git a/500.php b/500.php
index 56f0b60..3207b7b 100644
--- a/500.php
+++ b/500.php
@@ -13,7 +13,10 @@ error_log('500 Error triggered: ' . date('Y-m-d H:i:s') . ' - IP: ' . $_SERVER['
Service Temporarily Unavailable - UK Data Services
-
+
+
UK Data Services
diff --git a/assets/css/main.css b/assets/css/main.css
index 9157817..def83de 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -149,6 +149,7 @@ body {
transition: color 0.3s ease;
}
+.nav-link.active { color: #148069; font-weight: 600; border-bottom: 2px solid #148069; padding-bottom: 2px;}
.nav-link:hover {
color: #144784;
}
@@ -3599,41 +3600,55 @@ aside.related-articles {
}
}
-/* Fix for navbar overlap on content pages */
+/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
+/* Navbar is position:fixed, height 70px */
+
+/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
+.hero,
+.page-hero,
+.about-hero,
+.faq-hero,
+.service-hero,
+.project-types-hero,
+.tools-hero,
+.quote-hero {
+ padding-top: 120px !important;
+}
+
+/* Non-hero pages with
: push content below navbar */
main {
- padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+ padding-top: 90px; /* 70px navbar + 20px breathing room */
}
-/* Specific fix for legal content pages */
+/* But if main contains a hero, don't double-pad */
+main > .hero:first-child,
+main > .page-hero:first-child,
+main > .about-hero:first-child,
+main > .faq-hero:first-child,
+main > .service-hero:first-child,
+main > .project-types-hero:first-child {
+ margin-top: -90px; /* Cancel out the main padding */
+}
+
+/* Legal content pages (no hero, text-heavy) */
.legal-content {
- padding-top: 120px !important; /* Override inline styles for legal pages */
+ padding-top: 100px !important; /* 70px navbar + 30px breathing room */
}
-/* Also ensure any page sections that might be affected have proper spacing */
+/* Tool sub-pages and standalone pages (no , no hero) */
+.calculator-container,
+.analyzer-container,
+.converter-container,
+.checker-container,
+.thank-you-container {
+ padding-top: 100px !important; /* 70px navbar + 30px breathing room */
+}
+
+/* Generic page-content class */
.page-content {
padding-top: 90px;
}
-/* For hero sections that should start right under navbar */
-.hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For about page hero */
-.about-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For FAQ page hero */
-.faq-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For project types and other page heroes */
-.page-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
/* Hide reCAPTCHA badge */
.grecaptcha-badge {
visibility: hidden !important;
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
}
/* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ align-items: stretch;
+}
+.capability-card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.capability-card p {
+ flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+ color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+ color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+ color: #bfdbfe;
+}
+.footer-section h3 {
+ color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+ color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+ filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+ body {
+ font-size: 16px;
+ }
+
+ /* Project-types hero */
+ .project-types-hero h1 {
+ font-size: 1.8rem;
+ line-height: 1.3;
+ }
+ .project-types-hero p {
+ font-size: 1rem;
+ }
+
+ /* Capability cards single column on mobile */
+ .capabilities-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Industry grid single column */
+ .industry-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Project category headings */
+ .project-category h2 {
+ font-size: 1.6rem;
+ }
+ .project-category h3 {
+ font-size: 1.2rem;
+ }
+ .project-description {
+ font-size: 1rem;
+ }
+
+ /* Footer content single column (already done but ensure) */
+ .footer-content {
+ grid-template-columns: 1fr;
+ }
+
+ /* Footer bottom stack */
+ .footer-bottom,
+ .footer-bottom .footer-bottom-content {
+ flex-direction: column;
+ gap: 15px;
+ text-align: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .project-types-hero h1 {
+ font-size: 1.5rem;
+ }
+ .project-types-hero {
+ padding: 100px 0 40px;
+ }
+ .project-category {
+ padding: 40px 0;
+ }
+ .project-category h2 {
+ font-size: 1.4rem;
+ }
+}
+
+/* 4. General polish */
+/* project-types-hero padding now in unified block above */
+
+/* Tech tags wrapping fix */
+.tech-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/assets/css/main.css.bak.20260211 b/assets/css/main.css.bak.20260211
new file mode 100644
index 0000000..1228549
--- /dev/null
+++ b/assets/css/main.css.bak.20260211
@@ -0,0 +1,4496 @@
+/* CSS Reset and Base Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Roboto Slab', 'Lato', sans-serif;
+ line-height: 1.6;
+ color: #333333;
+ background-color: #ffffff;
+}
+
+/* Utility Classes */
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.btn {
+ display: inline-block;
+ padding: 14px 28px;
+ border: none;
+ border-radius: 8px;
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 16px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ font-family: inherit;
+ line-height: 1.4;
+ white-space: nowrap;
+ min-height: 48px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: #148069;
+ color: white;
+}
+
+.btn-primary {
+ background: #148069;
+ color: white !important;
+ text-decoration: none !important;
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+ background: #11725e;
+ box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+ color: white !important;
+ text-decoration: none !important;
+}
+
+.btn-secondary {
+ background: white;
+ color: #144784 !important;
+ border: 2px solid #144784;
+ text-decoration: none !important;
+}
+
+.btn-secondary:hover {
+ background: #144784;
+ color: white !important;
+ transform: translateY(-2px);
+ text-decoration: none !important;
+}
+
+.btn-full {
+ width: 100%;
+}
+
+.highlight {
+ background: linear-gradient(135deg, #179e83, #1bbc9b);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.section-header {
+ text-align: center;
+ margin-bottom: 60px;
+}
+
+.section-header h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: #1a1a1a;
+}
+
+.section-header p {
+ font-size: 1.2rem;
+ color: #555;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+/* Navigation */
+.navbar {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+ background: rgba(255, 255, 255, 0.98);
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+.nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 70px;
+}
+
+.nav-logo img {
+ height: 40px;
+ width: auto;
+}
+
+.nav-menu {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+}
+
+.nav-link {
+ text-decoration: none;
+ color: #1a1a1a;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+ color: #144784;
+}
+
+.nav-link.cta-button {
+ background: #148069;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+}
+
+.nav-link.cta-button:hover {
+ transform: translateY(-2px);
+ background: #11725e;
+ box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+}
+
+.nav-toggle {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 8px;
+ min-width: 48px;
+ min-height: 48px;
+ justify-content: center;
+ align-items: center;
+}
+
+.bar {
+ width: 25px;
+ height: 3px;
+ background: #1a1a1a;
+ margin: 3px 0;
+ transition: 0.3s;
+}
+
+/* Hero Section */
+.hero {
+ padding: 120px 0 80px;
+ background: linear-gradient(135deg, #252d3b 0%, #144784 100%);
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50%;
+ height: 100%;
+ background: url('data:image/svg+xml,') no-repeat center;
+ background-size: contain;
+ animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+}
+
+.hero-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 60px;
+ align-items: center;
+}
+
+.hero-content {
+ animation: fadeInUp 1s ease;
+}
+
+.hero-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ line-height: 1.2;
+ margin-bottom: 24px;
+ color: #ffffff;
+}
+
+.hero-subtitle {
+ font-size: 1.3rem;
+ font-weight: 500;
+ color: #ffffff;
+ margin-bottom: 40px;
+ line-height: 1.6;
+ opacity: 0.9;
+}
+
+.hero-buttons {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 60px;
+}
+
+.hero-stats {
+ display: flex;
+ gap: 40px;
+}
+
+.stat {
+ text-align: center;
+}
+
+.stat-number {
+ display: block;
+ font-size: 2rem;
+ font-weight: 700;
+ color: #ffffff;
+}
+
+.stat-label {
+ display: block;
+ font-size: 0.9rem;
+ color: #ffffff;
+ font-weight: 500;
+}
+
+.hero-image {
+ animation: fadeInRight 1s ease;
+ position: relative;
+ z-index: 2;
+}
+
+.hero-graphic {
+ width: 100%;
+ height: auto;
+ max-width: 500px;
+ animation: float 6s ease-in-out infinite;
+}
+
+.hero-graphic svg {
+ width: 100%;
+ height: auto;
+ filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
+}
+
+/* Hero Graphic Animations */
+.hero-graphic .bg-circle-1 {
+ animation: rotate 20s linear infinite;
+ transform-origin: center;
+}
+
+.hero-graphic .bg-circle-2 {
+ animation: rotate 15s linear infinite reverse;
+ transform-origin: center;
+}
+
+.hero-graphic .browser-main {
+ animation: pulse 4s ease-in-out infinite;
+}
+
+.hero-graphic .database {
+ animation: pulse 6s ease-in-out infinite;
+}
+
+.hero-graphic .dashboard {
+ animation: pulse 5s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-1 {
+ animation: grow-bar 3s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-2 {
+ animation: grow-bar 3s ease-in-out infinite 0.5s;
+}
+
+.hero-graphic .chart-bar-3 {
+ animation: grow-bar 3s ease-in-out infinite 1s;
+}
+
+.hero-graphic .chart-bar-4 {
+ animation: grow-bar 3s ease-in-out infinite 1.5s;
+}
+
+.hero-graphic .chart-bar-5 {
+ animation: grow-bar 3s ease-in-out infinite 2s;
+}
+
+.hero-graphic .extraction-path {
+ stroke-dasharray: 200;
+ stroke-dashoffset: 200;
+ animation: draw-line 4s ease-in-out infinite;
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes grow-bar {
+ 0%, 100% { transform: scaleY(1); }
+ 50% { transform: scaleY(1.3); }
+}
+
+@keyframes draw-line {
+ 0% { stroke-dashoffset: 200; }
+ 50% { stroke-dashoffset: 0; }
+ 100% { stroke-dashoffset: -200; }
+}
+
+@keyframes data-pulse {
+ 0%, 100% { opacity: 0.7; transform: scale(1); }
+ 50% { opacity: 1; transform: scale(1.1); }
+}
+
+.hero-img {
+ width: 100%;
+ height: auto;
+ max-width: 500px;
+}
+
+/* Services Section */
+.services {
+ padding: 100px 0;
+ background: white;
+}
+
+.services-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 30px;
+}
+
+.service-card {
+ background: white;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ border: 1px solid #f0f0f0;
+}
+
+.service-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.service-icon {
+ width: 60px;
+ height: 60px;
+ margin-bottom: 24px;
+}
+
+.service-icon img {
+ width: 100%;
+ height: 100%;
+}
+
+.service-card h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: #1a1a1a;
+}
+
+.service-card p {
+ color: #555;
+ margin-bottom: 20px;
+ line-height: 1.6;
+}
+
+.service-card ul {
+ list-style: none;
+}
+
+.service-card li {
+ padding: 8px 0;
+ color: #555;
+ position: relative;
+ padding-left: 20px;
+}
+
+.service-card li:before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: #148a72;
+ font-weight: bold;
+}
+
+/* Process Section */
+.process {
+ padding: 100px 0;
+ background: #f8f9fa;
+}
+
+.process-steps {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.step {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 50px;
+ animation: fadeInUp 0.6s ease;
+}
+
+.step:last-child {
+ margin-bottom: 0;
+}
+
+.step-number {
+ background: #148069;
+ color: white;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 700;
+ font-size: 1.2rem;
+ margin-right: 30px;
+ flex-shrink: 0;
+}
+
+.step-content h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ margin-bottom: 12px;
+ color: #1a1a1a;
+}
+
+.step-content p {
+ color: #555;
+ line-height: 1.6;
+}
+
+/* Why Us Section */
+.why-us {
+ padding: 100px 0;
+ background: white;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 40px;
+}
+
+.feature {
+ text-align: center;
+ padding: 30px;
+ animation: fadeInUp 0.6s ease;
+}
+
+.feature-icon {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 24px;
+}
+
+.feature-icon img {
+ width: 100%;
+ height: 100%;
+}
+
+.feature h3 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: #1a1a1a;
+}
+
+.feature p {
+ color: #555;
+ line-height: 1.6;
+}
+
+/* Contact Section */
+.contact {
+ padding: 100px 0;
+ background: #f8f9fa;
+}
+
+.contact-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 60px;
+ align-items: start;
+}
+
+.contact-info h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+}
+
+.contact-info p {
+ font-size: 1.2rem;
+ color: #555;
+ margin-bottom: 40px;
+ line-height: 1.6;
+}
+
+.contact-details {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+.contact-item {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.contact-item img {
+ width: 40px;
+ height: 40px;
+}
+
+.contact-item strong {
+ display: block;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin-bottom: 4px;
+}
+
+.contact-item p {
+ margin: 0;
+ color: #555;
+}
+
+.contact-item a {
+ color: #148a72;
+ text-decoration: none;
+}
+
+.contact-item a:hover {
+ text-decoration: underline;
+}
+
+/* Form Styles */
+.contact-form {
+ background: white;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.form-group {
+ margin-bottom: 24px;
+}
+
+.form-group label {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 8px;
+ color: #1a1a1a;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ width: 100%;
+ padding: 14px 16px;
+ border: 2px solid #e1e5e9;
+ border-radius: 8px;
+ font-size: 16px;
+ transition: border-color 0.3s ease;
+ background: white;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: #148a72;
+ box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1);
+}
+
+.form-group textarea {
+ resize: vertical;
+ min-height: 120px;
+}
+
+/* Form validation states */
+.form-group input[aria-invalid="true"],
+.form-group select[aria-invalid="true"],
+.form-group textarea[aria-invalid="true"] {
+ border-color: #dc2626;
+ box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.form-group input[aria-invalid="true"]:focus,
+.form-group select[aria-invalid="true"]:focus,
+.form-group textarea[aria-invalid="true"]:focus {
+ border-color: #dc2626;
+ box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+}
+
+.form-error {
+ display: block;
+ color: #dc2626;
+ font-size: 0.875rem;
+ margin-top: 6px;
+ min-height: 1.25rem;
+}
+
+.form-error:empty {
+ display: none;
+}
+
+/* Footer */
+.footer {
+ background: #151f25;
+ color: white;
+ padding: 60px 0 30px;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 40px;
+ margin-bottom: 40px;
+}
+
+.footer-section h3 {
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section li {
+ margin-bottom: 12px;
+}
+
+.footer-section a {
+ color: #ccc;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+ color: #148a72;
+}
+
+.footer-logo img {
+ height: 40px;
+ margin-bottom: 20px;
+}
+
+.footer-section p {
+ color: #ccc;
+ line-height: 1.6;
+}
+
+.footer-bottom {
+ border-top: 1px solid #333;
+ padding-top: 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.social-links {
+ display: flex;
+ gap: 20px;
+}
+
+.social-links a {
+ display: block;
+ width: 40px;
+ height: 40px;
+}
+
+.social-links img {
+ width: 100%;
+ height: 100%;
+ filter: invert(1);
+ transition: filter 0.3s ease;
+}
+
+.social-links a:hover img {
+ filter: invert(0.7) sepia(1) saturate(2) hue-rotate(240deg);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInRight {
+ from {
+ opacity: 0;
+ transform: translateX(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+}
+
+@keyframes pulse {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+}
+
+@keyframes slideInFromBottom {
+ from {
+ opacity: 0;
+ transform: translateY(50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Animation Classes */
+.animate-on-scroll {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s ease-out;
+}
+
+.animate-on-scroll.animated {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.service-card {
+ animation: slideInFromBottom 0.6s ease-out forwards;
+ animation-delay: var(--animation-delay, 0s);
+}
+
+.feature {
+ animation: fadeInUp 0.6s ease-out forwards;
+ animation-delay: var(--animation-delay, 0s);
+}
+
+.step {
+ animation: fadeInLeft 0.6s ease-out forwards;
+ animation-delay: var(--animation-delay, 0s);
+}
+
+/* Blog responsive styles */
+@media (max-width: 768px) {
+ .featured-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .featured-article.main-feature {
+ grid-row: span 1;
+ }
+
+ .articles-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .newsletter-form .form-group {
+ flex-direction: column;
+ }
+
+ .article-title {
+ font-size: 2.2rem;
+ }
+
+ .article-author {
+ flex-direction: column;
+ text-align: center;
+ gap: 15px;
+ }
+
+ .blog-categories h2,
+ .blog-featured h2,
+ .blog-recent h2 {
+ font-size: 2rem;
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .nav-menu {
+ position: fixed;
+ left: -100%;
+ top: 70px;
+ flex-direction: column;
+ background-color: white;
+ width: 100%;
+ text-align: center;
+ transition: 0.3s;
+ box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+ padding: 40px 0;
+ gap: 20px;
+ }
+
+ .nav-menu.active {
+ left: 0;
+ }
+
+ .nav-toggle {
+ display: flex;
+ }
+
+ .nav-toggle.active .bar:nth-child(2) {
+ opacity: 0;
+ }
+
+ .nav-toggle.active .bar:nth-child(1) {
+ transform: translateY(8px) rotate(45deg);
+ }
+
+ .nav-toggle.active .bar:nth-child(3) {
+ transform: translateY(-8px) rotate(-45deg);
+ }
+
+ .hero-container {
+ grid-template-columns: 1fr;
+ gap: 40px;
+ text-align: center;
+ }
+
+ .hero-title {
+ font-size: 2.5rem;
+ }
+
+ .hero-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .hero-stats {
+ justify-content: center;
+ gap: 30px;
+ }
+
+ .section-header h2 {
+ font-size: 2rem;
+ }
+
+ .services-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .contact-content {
+ grid-template-columns: 1fr;
+ gap: 40px;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ text-align: center;
+ }
+
+ .footer-bottom {
+ flex-direction: column;
+ gap: 20px;
+ text-align: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 15px;
+ }
+
+ .hero {
+ padding: 100px 0 60px;
+ }
+
+ .hero-title {
+ font-size: 2rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.1rem;
+ }
+
+ .btn {
+ padding: 12px 24px;
+ font-size: 14px;
+ }
+
+ .service-card,
+ .contact-form {
+ padding: 30px 20px;
+ }
+
+ .step {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .step-number {
+ margin: 0 0 20px 0;
+ }
+}
+
+/* Performance Optimizations */
+img {
+ max-width: 100%;
+ height: auto;
+ loading: lazy;
+}
+
+/* Logo specific styles */
+.logo {
+ height: auto;
+ max-height: 50px;
+ width: auto;
+}
+
+.footer-logo img {
+ height: 40px;
+ width: auto;
+}
+
+/* Favicon links don't need display properties */
+
+/* Loading states */
+.loading {
+ opacity: 0.6;
+ pointer-events: none;
+}
+
+/* Blog-specific styles */
+.blog-categories {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.blog-categories h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.blog-featured {
+ padding: 80px 0;
+ background: white;
+}
+
+.blog-featured h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.featured-grid {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ gap: 30px;
+}
+
+.featured-article {
+ background: white;
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f0f0f0;
+ transition: all 0.3s ease;
+}
+
+.featured-article:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.featured-article.main-feature {
+ grid-row: span 2;
+}
+
+.featured-article .article-image {
+ height: 200px;
+ overflow: hidden;
+}
+
+.featured-article.main-feature .article-image {
+ height: 300px;
+}
+
+.featured-article .article-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.featured-article:hover .article-image img {
+ transform: scale(1.05);
+}
+
+.featured-article .article-content {
+ padding: 30px;
+}
+
+.article-meta {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ margin-bottom: 15px;
+ font-size: 14px;
+}
+
+.article-meta .category {
+ background: #179e83;
+ color: white;
+ padding: 5px 12px;
+ border-radius: 15px;
+ font-weight: 500;
+ text-decoration: none;
+}
+
+.article-meta .category a {
+ color: white;
+ text-decoration: none;
+}
+
+.article-meta .category a:hover {
+ color: white;
+ text-decoration: none;
+}
+
+.article-meta time {
+ color: #555;
+ font-weight: 500;
+}
+
+.article-meta .read-time {
+ color: #555;
+ font-weight: 500;
+}
+
+.featured-article h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ line-height: 1.3;
+}
+
+.featured-article h3 a {
+ color: #1a1a1a;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.featured-article h3 a:hover {
+ color: #148a72;
+}
+
+.featured-article p {
+ color: #555;
+ line-height: 1.6;
+ margin-bottom: 20px;
+}
+
+.article-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid #f0f0f0;
+ padding-top: 15px;
+ margin-top: 15px;
+}
+
+.article-footer .read-more {
+ color: #148a72;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.article-footer .read-more:hover {
+ color: #144784;
+ text-decoration: underline;
+}
+
+.blog-recent {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.blog-recent h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.articles-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 30px;
+ margin-bottom: 50px;
+}
+
+.article-card {
+ background: white;
+ padding: 30px;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f0f0f0;
+ transition: all 0.3s ease;
+}
+
+.article-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.article-card h3 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ line-height: 1.3;
+}
+
+.article-card h3 a {
+ color: #1a1a1a;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.article-card h3 a:hover {
+ color: #148a72;
+}
+
+.article-card p {
+ color: #555;
+ line-height: 1.6;
+ margin-bottom: 20px;
+}
+
+.blog-pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ margin-top: 40px;
+}
+
+.pagination-info {
+ color: #555;
+ font-weight: 500;
+}
+
+.blog-newsletter {
+ padding: 80px 0;
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ color: white;
+ text-align: center;
+}
+
+.newsletter-content h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.newsletter-content p {
+ font-size: 1.2rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.newsletter-form .form-group {
+ display: flex;
+ max-width: 500px;
+ margin: 0 auto 20px;
+ gap: 15px;
+}
+
+.newsletter-form input {
+ flex: 1;
+ padding: 15px 20px;
+ border: none;
+ border-radius: 50px;
+ font-size: 16px;
+ background: rgba(255, 255, 255, 0.95);
+ color: #333;
+}
+
+.newsletter-form .btn {
+ padding: 15px 30px;
+ border-radius: 50px;
+ white-space: nowrap;
+}
+
+.newsletter-privacy {
+ font-size: 14px;
+ opacity: 0.8;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.newsletter-privacy a {
+ color: white;
+ text-decoration: underline;
+}
+
+/* Blog article styles */
+.blog-article {
+ padding: 110px 0 80px;
+ background: white;
+ position: relative;
+ clear: both;
+ width: 100%;
+}
+
+.blog-article .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ position: relative;
+}
+
+.article-header {
+ max-width: 800px;
+ margin: 0 auto 40px;
+ text-align: center;
+}
+
+.article-title {
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+ line-height: 1.2;
+}
+
+.article-subtitle {
+ font-size: 1.3rem;
+ color: #555;
+ margin-bottom: 30px;
+ line-height: 1.6;
+}
+
+.article-author {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 30px;
+ text-align: left;
+}
+
+.author-info strong {
+ color: #1a1a1a;
+ font-weight: 600;
+ display: block;
+ margin-bottom: 5px;
+}
+
+.author-info p {
+ color: #555;
+ margin: 0;
+ font-size: 14px;
+}
+
+.article-share a {
+ color: #148a72;
+ text-decoration: none;
+ font-weight: 500;
+ padding: 8px 16px;
+ border: 1px solid #179e83;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+}
+
+.article-share a:hover {
+ background: #179e83;
+ color: white;
+}
+
+.article-image {
+ max-width: 1000px;
+ margin: 0 auto 40px;
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.article-image img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.article-toc {
+ max-width: 800px;
+ margin: 0 auto 40px;
+ background: #f8f9fa;
+ padding: 30px;
+ border-radius: 12px;
+ border: 1px solid #e1e5e9;
+}
+
+.article-toc h2 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+}
+
+.article-toc ol {
+ list-style: none;
+ counter-reset: toc-counter;
+}
+
+.article-toc li {
+ counter-increment: toc-counter;
+ margin-bottom: 10px;
+}
+
+.article-toc li::before {
+ content: counter(toc-counter) ". ";
+ color: #148a72;
+ font-weight: 600;
+}
+
+.article-toc a {
+ color: #144784;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.article-toc a:hover {
+ color: #148a72;
+ text-decoration: underline;
+}
+
+.article-content {
+ max-width: 800px;
+ margin: 0 auto;
+ line-height: 1.7;
+ background: white;
+ position: relative;
+ z-index: 1;
+}
+
+.article-content pre {
+ background: #f8f9fa;
+ border: 1px solid #e9ecef;
+ border-radius: 8px;
+ padding: 0;
+ margin: 25px 0;
+ overflow-x: auto;
+ position: relative;
+}
+
+.article-content pre code {
+ display: block;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 20px;
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #495057;
+ white-space: pre;
+ overflow-x: auto;
+ margin: 0;
+}
+
+.article-content code {
+ background: #f1f3f4;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
+ font-size: 0.9em;
+ color: #d63384;
+}
+
+.article-content pre code {
+ background: transparent;
+ padding: 20px;
+ color: #495057;
+}
+
+/* Code block copy button */
+.article-content pre {
+ position: relative;
+ cursor: pointer;
+}
+
+.article-content pre:hover::before {
+ content: '📋 Copy';
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: #179e83;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+ cursor: pointer;
+ z-index: 10;
+}
+
+.article-content pre[data-copied]:hover::before {
+ content: '✅ Copied!';
+ background: #10b981;
+}
+
+.article-content pre:hover {
+ border-color: #148a72;
+ box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1);
+}
+
+.article-content h2 {
+ font-size: 2rem;
+ font-weight: 600;
+ margin: 40px 0 20px;
+ color: #1a1a1a;
+ border-bottom: 2px solid #179e83;
+ padding-bottom: 10px;
+}
+
+.article-content h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin: 30px 0 15px;
+ color: #144784;
+}
+
+.article-content p {
+ margin-bottom: 20px;
+ color: #444;
+}
+
+.article-content ul,
+.article-content ol {
+ margin-bottom: 20px;
+ padding-left: 25px;
+}
+
+.article-content li {
+ margin-bottom: 8px;
+ color: #444;
+}
+
+.article-content a {
+ color: #148a72;
+ text-decoration: underline;
+ transition: color 0.3s ease;
+}
+
+.article-content a:hover {
+ color: #144784;
+}
+
+.callout-box {
+ background: #f8f9fa;
+ border-left: 4px solid #179e83;
+ padding: 20px;
+ margin: 30px 0;
+ border-radius: 0 8px 8px 0;
+}
+
+.callout-box.legal-warning {
+ background: #fff3cd;
+ border-left-color: #f59e0b;
+}
+
+.callout-box h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+ color: #1a1a1a;
+}
+
+.comparison-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ margin: 30px 0;
+ width: 100%;
+ clear: both;
+}
+
+.comparison-item {
+ background: white;
+ padding: 25px;
+ border-radius: 12px;
+ border: 1px solid #e1e5e9;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.comparison-item h4 {
+ margin-bottom: 15px;
+ color: #144784;
+ font-size: 1.2rem;
+}
+
+.best-practice-box {
+ background: linear-gradient(135deg, #e8f5f3 0%, #f0f9ff 100%);
+ border: 1px solid #179e83;
+ border-radius: 12px;
+ padding: 25px;
+ margin: 30px 0;
+}
+
+.best-practice-box h3 {
+ margin-top: 0;
+ color: #144784;
+}
+
+/* Image optimization */
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+/* Lazy loading support */
+img[loading="lazy"] {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+img[loading="lazy"].loaded {
+ opacity: 1;
+}
+
+/* WebP support with fallbacks */
+picture img {
+ width: 100%;
+ height: auto;
+}
+
+/* Focus improvements for keyboard navigation */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+ outline: 2px solid #179e83;
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(23, 158, 131, 0.1);
+}
+
+/* Reading progress bar */
+.reading-progress {
+ position: fixed;
+ top: 70px;
+ left: 0;
+ width: 0%;
+ height: 3px;
+ background: linear-gradient(90deg, #179e83, #144784);
+ z-index: 999;
+ transition: width 0.3s ease;
+}
+
+/* Category link styles */
+.category-link {
+ background: #148069;
+ color: white !important;
+ padding: 5px 12px;
+ border-radius: 15px;
+ font-weight: 500;
+ text-decoration: none;
+ transition: background 0.3s ease;
+}
+
+.category-link:hover {
+ background: #144784;
+ color: white !important;
+ text-decoration: none;
+}
+
+.loading::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 20px;
+ height: 20px;
+ margin: -10px 0 0 -10px;
+ border: 2px solid #f3f3f3;
+ border-top: 2px solid #179e83;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* Notification styles */
+.notification {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 10000;
+ max-width: 400px;
+ padding: 16px 20px;
+ border-radius: 8px;
+ color: white;
+ font-family: 'Roboto Slab', sans-serif;
+ font-size: 14px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ transition: all 0.3s ease;
+}
+
+.notification-success {
+ background: #10b981;
+}
+
+.notification-error {
+ background: #ef4444;
+}
+
+.notification-info {
+ background: #3b82f6;
+}
+
+.notification-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.notification-close {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 18px;
+ cursor: pointer;
+ padding: 12px;
+ width: 48px;
+ height: 48px;
+ min-width: 48px;
+ min-height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: -12px -12px -12px 0;
+}
+
+/* Scroll to top button */
+.scroll-top-btn {
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+ width: 50px;
+ height: 50px;
+ border: none;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #179e83 0%, #144784 100%);
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.scroll-top-btn:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Tooltip styles */
+.tooltip {
+ position: absolute;
+ background: #1a1a1a;
+ color: white;
+ padding: 8px 12px;
+ border-radius: 6px;
+ font-size: 14px;
+ white-space: nowrap;
+ z-index: 10000;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+}
+
+/* Form validation states */
+.form-group.error input,
+.form-group.error select,
+.form-group.error textarea {
+ border-color: #ef4444;
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-group.success input,
+.form-group.success select,
+.form-group.success textarea {
+ border-color: #10b981;
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.form-error-message {
+ color: #ef4444;
+ font-size: 12px;
+ margin-top: 4px;
+ display: block;
+}
+
+/* Image loading states */
+img.loading {
+ background: #f0f0f0;
+ opacity: 0.7;
+}
+
+img.loaded {
+ transition: opacity 0.3s ease;
+ opacity: 1;
+}
+
+/* Enhanced button hover effects */
+.btn {
+ position: relative;
+ overflow: hidden;
+}
+
+.btn::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+ transition: left 0.5s;
+}
+
+.btn:hover::before {
+ left: 100%;
+}
+
+/* Print styles */
+@media print {
+ .navbar,
+ .footer,
+ .scroll-top-btn,
+ .notification {
+ display: none !important;
+ }
+
+ .hero {
+ background: white !important;
+ color: black !important;
+ }
+
+ .page-hero,
+ .service-hero {
+ background: white !important;
+ color: black !important;
+ }
+
+ body {
+ font-size: 12pt;
+ line-height: 1.4;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: black !important;
+ page-break-after: avoid;
+ }
+
+ .container {
+ max-width: none;
+ margin: 0;
+ padding: 0;
+ }
+}
+
+/* Accessibility */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* Focus styles for accessibility */
+button:focus,
+input:focus,
+select:focus,
+textarea:focus,
+a:focus {
+ outline: 2px solid #179e83;
+ outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+ .btn-primary {
+ background: #000;
+ border: 2px solid #000;
+ }
+
+ .highlight {
+ background: #000;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-primary: #1a1a1a;
+ --bg-secondary: #2d2d2d;
+ --text-primary: #ffffff;
+ --text-secondary: #cccccc;
+ }
+}
+
+/* Focus visible improvements */
+.btn:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+ outline: 2px solid #179e83;
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(23, 158, 131, 0.1);
+}
+
+/* Skip to content link for accessibility */
+.skip-to-content {
+ position: absolute;
+ top: -40px;
+ left: 6px;
+ background: #179e83;
+ color: white;
+ padding: 8px;
+ border-radius: 4px;
+ text-decoration: none;
+ z-index: 100000;
+ transition: top 0.3s;
+}
+
+.skip-to-content:focus {
+ top: 6px;
+}
+
+/* Screen reader only content */
+.visually-hidden {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
+/* Error page specific improvements */
+.error-container {
+ position: relative;
+}
+
+/* Improved form styling */
+.form-group {
+ position: relative;
+}
+
+.form-group label {
+ transition: all 0.3s ease;
+}
+
+.form-group input:focus + label,
+.form-group select:focus + label,
+.form-group textarea:focus + label {
+ color: #148a72;
+}
+
+/* Status indicators */
+.status-indicator {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-right: 8px;
+}
+
+.status-online {
+ background: #10b981;
+ box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
+ animation: pulse-green 2s infinite;
+}
+
+.status-offline {
+ background: #ef4444;
+}
+
+.status-pending {
+ background: #f59e0b;
+ animation: pulse-yellow 2s infinite;
+}
+
+@keyframes pulse-green {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+ }
+ 70% {
+ box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+ }
+}
+
+@keyframes pulse-yellow {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+ }
+ 70% {
+ box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+ }
+}
+
+/* NEW COMPONENT STYLES - Missing CSS for enhanced pages */
+
+/* Breadcrumb Navigation */
+.breadcrumb {
+ background: #f8f9fa;
+ padding: 20px 0;
+ border-bottom: 1px solid #e1e5e9;
+}
+
+.breadcrumb nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.breadcrumb ol {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ align-items: center;
+ gap: 8px;
+}
+
+.breadcrumb li {
+ display: flex;
+ align-items: center;
+}
+
+.breadcrumb li:not(:last-child)::after {
+ content: '>';
+ margin-left: 8px;
+ color: #555;
+ font-weight: 500;
+}
+
+.breadcrumb a {
+ color: #144784;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.breadcrumb a:hover {
+ color: #148a72;
+ text-decoration: underline;
+}
+
+.breadcrumb li[aria-current="page"] span {
+ color: #555;
+ font-weight: 500;
+}
+
+/* Page Hero Section */
+.page-hero {
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ color: white;
+ padding: 120px 0 80px;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.page-hero::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml,') no-repeat bottom;
+ background-size: cover;
+}
+
+.page-hero .hero-content {
+ position: relative;
+ z-index: 2;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.page-hero h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 20px;
+ color: white;
+ line-height: 1.2;
+}
+
+.page-hero .hero-subtitle {
+ font-size: 1.25rem;
+ margin-bottom: 30px;
+ opacity: 0.95;
+ line-height: 1.6;
+}
+
+.page-hero .hero-stats {
+ display: flex;
+ justify-content: center;
+ gap: 40px;
+ margin-top: 40px;
+}
+
+.page-hero .hero-search {
+ max-width: 500px;
+ margin: 30px auto 0;
+ position: relative;
+}
+
+.page-hero .hero-search form {
+ position: relative;
+ display: block;
+}
+
+.page-hero .hero-search input {
+ width: 100%;
+ padding: 15px 50px 15px 20px;
+ border: none;
+ border-radius: 50px;
+ font-size: 16px;
+ background: rgba(255, 255, 255, 0.95);
+ color: #333;
+ box-sizing: border-box;
+}
+
+.page-hero .hero-search button {
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ font-size: 18px;
+ cursor: pointer;
+ color: #555;
+ transition: color 0.3s ease;
+}
+
+.page-hero .hero-search button:hover {
+ color: #333;
+}
+
+/* Service Hero Section */
+.service-hero {
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ color: white;
+ padding: 120px 0 80px;
+ text-align: center;
+ position: relative;
+}
+
+.service-hero .hero-content {
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+.service-hero h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 20px;
+ line-height: 1.2;
+}
+
+.service-hero .hero-subtitle {
+ font-size: 1.25rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+ line-height: 1.6;
+}
+
+.service-hero .hero-stats {
+ display: flex;
+ justify-content: center;
+ gap: 40px;
+ margin: 40px 0;
+}
+
+.service-hero .hero-cta {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+/* Service Features Section */
+.service-features {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.service-features h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.service-features .features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature-card {
+ background: white;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ border: 1px solid #f0f0f0;
+}
+
+.feature-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.feature-card .feature-icon {
+ font-size: 3rem;
+ margin-bottom: 20px;
+ display: block;
+}
+
+.feature-card h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: #1a1a1a;
+}
+
+.feature-card p {
+ color: #555;
+ margin-bottom: 20px;
+ line-height: 1.6;
+}
+
+.feature-card ul {
+ list-style: none;
+ padding: 0;
+}
+
+.feature-card li {
+ padding: 8px 0;
+ color: #555;
+ position: relative;
+ padding-left: 20px;
+}
+
+.feature-card li:before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: #148a72;
+ font-weight: bold;
+}
+
+/* Industries Section */
+.industries {
+ padding: 80px 0;
+ background: white;
+}
+
+.industries h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.industries-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.industry-card {
+ background: #f8f9fa;
+ padding: 30px;
+ border-radius: 12px;
+ transition: all 0.3s ease;
+ border: 1px solid #e1e5e9;
+}
+
+.industry-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.industry-card h3 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 12px;
+ color: #144784;
+}
+
+.industry-card p {
+ color: #555;
+ line-height: 1.6;
+}
+
+/* Pricing Section */
+.pricing {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.pricing h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.pricing-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.pricing-card {
+ background: white;
+ padding: 40px 30px;
+ border-radius: 16px;
+ text-align: center;
+ position: relative;
+ border: 2px solid #e1e5e9;
+ transition: all 0.3s ease;
+}
+
+.pricing-card.featured {
+ border-color: #148a72;
+ transform: scale(1.05);
+ box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
+}
+
+.pricing-card.featured::before {
+ content: 'Most Popular';
+ position: absolute;
+ top: -12px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: #179e83;
+ color: white;
+ padding: 8px 20px;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.pricing-card h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+}
+
+.pricing-card .price {
+ font-size: 3rem;
+ font-weight: 700;
+ color: #148a72;
+ margin-bottom: 30px;
+ line-height: 1;
+}
+
+.pricing-card .price span {
+ font-size: 1rem;
+ color: #555;
+ font-weight: 400;
+}
+
+.pricing-card ul {
+ list-style: none;
+ padding: 0;
+ margin-bottom: 30px;
+}
+
+.pricing-card li {
+ padding: 10px 0;
+ color: #555;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.pricing-card li:last-child {
+ border-bottom: none;
+}
+
+.pricing-card .pricing-note {
+ font-size: 14px;
+ color: #999;
+ margin-top: 20px;
+ font-style: italic;
+}
+
+.pricing-cta {
+ text-align: center;
+ margin-top: 50px;
+}
+
+/* FAQ Sections */
+.faq {
+ padding: 80px 0;
+ background: white;
+}
+
+.faq h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.faq-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.faq-item {
+ background: #f8f9fa;
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid #e1e5e9;
+}
+
+.faq-item h3 {
+ background: #144784;
+ color: white;
+ padding: 20px;
+ margin: 0;
+ font-size: 1.2rem;
+ font-weight: 600;
+}
+
+.faq-item p {
+ padding: 20px;
+ margin: 0;
+ color: #555;
+ line-height: 1.6;
+}
+
+/* Enhanced FAQ Components */
+.faq-categories {
+ padding: 60px 0;
+ background: white;
+}
+
+.categories-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.category-card {
+ background: #f8f9fa;
+ padding: 30px;
+ border-radius: 12px;
+ text-align: center;
+ text-decoration: none;
+ color: inherit;
+ transition: all 0.3s ease;
+ border: 1px solid #e1e5e9;
+}
+
+.category-card:hover {
+ transform: translateY(-5px);
+ background: white;
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+ color: inherit;
+ text-decoration: none;
+}
+
+.category-icon {
+ font-size: 3rem;
+ margin-bottom: 20px;
+ display: block;
+}
+
+.category-card h3 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 12px;
+ color: #144784;
+}
+
+.category-card p {
+ color: #555;
+ line-height: 1.4;
+ margin: 0;
+}
+
+.faq-content {
+ padding: 60px 0;
+ background: #f8f9fa;
+}
+
+.faq-section {
+ max-width: 1000px;
+ margin: 0 auto 60px;
+}
+
+.faq-section h2 {
+ font-size: 2rem;
+ font-weight: 600;
+ margin-bottom: 40px;
+ color: #1a1a1a;
+ border-bottom: 3px solid #179e83;
+ padding-bottom: 10px;
+}
+
+.faq-question {
+ width: 100%;
+ background: white;
+ border: none;
+ padding: 20px;
+ text-align: left;
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #1a1a1a;
+ border-radius: 8px;
+ margin-bottom: 2px;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.faq-question:hover {
+ background: #f8f9fa;
+ transform: translateX(5px);
+}
+
+.faq-question[aria-expanded="true"],
+.faq-question.active {
+ background: #179e83;
+ color: white;
+}
+
+.faq-icon {
+ font-size: 1.5rem;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+}
+
+.faq-question[aria-expanded="true"] .faq-icon,
+.faq-question.active .faq-icon {
+ transform: rotate(180deg);
+}
+
+.faq-answer {
+ background: white;
+ padding: 0 20px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease, padding 0.3s ease;
+ border-radius: 0 0 8px 8px;
+ border-top: 1px solid #e1e5e9;
+ margin-bottom: 20px;
+}
+
+.faq-answer.active {
+ padding: 20px;
+ max-height: 1000px;
+}
+
+.faq-answer p {
+ margin-bottom: 15px;
+ color: #555;
+ line-height: 1.6;
+}
+
+.faq-answer ul {
+ margin-left: 20px;
+ margin-bottom: 15px;
+}
+
+.faq-answer li {
+ margin-bottom: 8px;
+ color: #555;
+ line-height: 1.5;
+}
+
+.faq-cta {
+ padding: 80px 0;
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ color: white;
+ text-align: center;
+}
+
+.faq-cta h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.faq-cta p {
+ font-size: 1.2rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+}
+
+.faq-cta .cta-buttons {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 50px;
+ flex-wrap: wrap;
+}
+
+.contact-options {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 30px;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.contact-option {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ text-align: left;
+}
+
+.contact-icon {
+ font-size: 2rem;
+}
+
+.contact-option strong {
+ display: block;
+ margin-bottom: 5px;
+ color: white;
+}
+
+.contact-option p {
+ margin: 0;
+ opacity: 0.9;
+}
+
+.contact-option a {
+ color: white;
+ text-decoration: none;
+}
+
+.contact-option a:hover {
+ text-decoration: underline;
+}
+
+/* CTA Section */
+.cta {
+ padding: 80px 0;
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ color: white;
+ text-align: center;
+}
+
+.cta-content h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.cta-content p {
+ font-size: 1.2rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.cta-buttons {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+/* Case Studies Specific */
+.case-study {
+ background: white;
+ border-radius: 16px;
+ padding: 40px;
+ margin-bottom: 40px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f0f0f0;
+}
+
+.case-study.featured {
+ border: 2px solid #179e83;
+ box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
+}
+
+.case-study-content {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 40px;
+ align-items: start;
+}
+
+.case-study-meta {
+ display: flex;
+ gap: 15px;
+ margin-bottom: 20px;
+}
+
+.case-study-meta span {
+ background: #f0f0f0;
+ color: #555;
+ padding: 5px 12px;
+ border-radius: 15px;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.case-study h3 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ color: #1a1a1a;
+ line-height: 1.3;
+}
+
+.case-study-intro {
+ font-size: 1.1rem;
+ color: #555;
+ margin-bottom: 30px;
+ line-height: 1.6;
+}
+
+.challenge,
+.solution,
+.results {
+ margin-bottom: 30px;
+}
+
+.challenge h4,
+.solution h4,
+.results h4 {
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ color: #144784;
+}
+
+.results-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+ gap: 20px;
+ margin: 20px 0;
+}
+
+.result-item {
+ text-align: center;
+ padding: 20px;
+ background: #f8f9fa;
+ border-radius: 12px;
+}
+
+.result-number {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #148a72;
+ display: block;
+ margin-bottom: 5px;
+}
+
+.result-label {
+ font-size: 14px;
+ color: #555;
+ font-weight: 500;
+}
+
+.testimonial {
+ background: #f8f9fa;
+ padding: 30px;
+ border-radius: 12px;
+ margin-top: 30px;
+ border-left: 4px solid #179e83;
+}
+
+.testimonial p {
+ font-style: italic;
+ font-size: 1.1rem;
+ color: #444;
+ margin-bottom: 20px;
+ line-height: 1.6;
+}
+
+.testimonial cite {
+ display: block;
+ font-style: normal;
+}
+
+.testimonial cite strong {
+ color: #1a1a1a;
+ font-weight: 600;
+ display: block;
+ margin-bottom: 5px;
+}
+
+.testimonial cite span {
+ color: #555;
+ font-size: 14px;
+}
+
+.case-study-visual {
+ background: #f8f9fa;
+ padding: 30px;
+ border-radius: 12px;
+ text-align: center;
+}
+
+.chart-container h5 {
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #1a1a1a;
+}
+
+/* Industries Overview */
+.industries-overview {
+ padding: 80px 0;
+ background: white;
+}
+
+.industries-overview h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.industry-stat {
+ text-align: center;
+ padding: 30px;
+ background: #f8f9fa;
+ border-radius: 12px;
+ transition: all 0.3s ease;
+}
+
+.industry-stat:hover {
+ transform: translateY(-5px);
+ background: white;
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.industry-icon {
+ font-size: 3rem;
+ margin-bottom: 20px;
+ display: block;
+}
+
+.industry-stat h3 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ color: #144784;
+}
+
+.industry-stat .stat-number {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: #148a72;
+ display: block;
+ margin-bottom: 5px;
+}
+
+.industry-stat .stat-label {
+ font-size: 14px;
+ color: #555;
+ font-weight: 500;
+}
+
+/* Related Articles Section */
+.related-articles {
+ padding: 60px 0;
+ background: #f8f9fa;
+ border-top: 1px solid #e1e5e9;
+ margin-top: 60px;
+}
+
+.related-articles h2,
+.related-articles h3 {
+ font-size: 2rem;
+ font-weight: 600;
+ margin-bottom: 40px;
+ color: #1a1a1a;
+ text-align: center;
+}
+
+/* Handle both aside and section elements */
+aside.related-articles {
+ padding: 40px 0;
+ background: #f8f9fa;
+ border-top: 1px solid #e1e5e9;
+ margin-top: 40px;
+}
+
+.related-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.related-card {
+ background: white;
+ padding: 30px;
+ border-radius: 12px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+ border: 1px solid #e1e5e9;
+ transition: all 0.3s ease;
+}
+
+.related-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}
+
+.related-card h3,
+.related-card h4 {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ line-height: 1.3;
+}
+
+.related-card h3 a,
+.related-card h4 a {
+ color: #1a1a1a;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.related-card h3 a:hover,
+.related-card h4 a:hover {
+ color: #148a72;
+}
+
+.related-card .category {
+ background: #179e83;
+ color: white;
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 500;
+ display: inline-block;
+ margin-bottom: 12px;
+}
+
+.related-card span.category {
+ display: inline-block;
+ margin-bottom: 12px;
+}
+
+.related-card p {
+ color: #555;
+ line-height: 1.6;
+ margin-bottom: 15px;
+}
+
+.related-card .read-time {
+ color: #148a72;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+/* Category links section */
+.category-links {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 2rem;
+ width: 100%;
+}
+
+.category-links .btn {
+ min-width: 200px;
+}
+
+/* Mobile responsive for category links */
+@media (max-width: 768px) {
+ .category-links {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .category-links .btn {
+ width: 100%;
+ max-width: 300px;
+ }
+}
+
+/* Button text visibility fix */
+.btn * {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+.btn:visited,
+.btn:link,
+.btn:active {
+ color: inherit;
+ text-decoration: none;
+}
+
+.btn-primary,
+.btn-primary:visited,
+.btn-primary:link,
+.btn-primary:active {
+ color: white !important;
+ text-decoration: none !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+ color: white !important;
+ text-decoration: none !important;
+}
+
+/* Expert Consultation CTA */
+.expert-consultation-cta {
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ border: 2px solid #179e83;
+ border-radius: 12px;
+ padding: 40px;
+ text-align: center;
+ margin: 40px 0;
+ clear: both;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.expert-consultation-cta h3 {
+ color: #144784;
+ font-size: 1.5rem;
+ margin-bottom: 15px;
+ font-weight: 600;
+}
+
+.expert-consultation-cta p {
+ color: #555;
+ margin-bottom: 25px;
+ font-size: 1.1rem;
+ line-height: 1.6;
+}
+
+.expert-consultation-cta .btn {
+ font-size: 1.1rem;
+ padding: 15px 30px;
+ min-width: 200px;
+ font-weight: 600;
+}
+
+/* Testimonials Grid */
+.testimonials {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.testimonials h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.testimonials-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.testimonial-card {
+ background: white;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f0f0f0;
+ position: relative;
+}
+
+.testimonial-card::before {
+ content: '"';
+ position: absolute;
+ top: -10px;
+ left: 30px;
+ font-size: 4rem;
+ color: #148a72;
+ font-family: serif;
+ line-height: 1;
+}
+
+.testimonial-content p {
+ font-style: italic;
+ font-size: 1.1rem;
+ color: #444;
+ margin-bottom: 30px;
+ line-height: 1.6;
+}
+
+.testimonial-author {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.author-info strong {
+ color: #1a1a1a;
+ font-weight: 600;
+ display: block;
+ margin-bottom: 5px;
+}
+
+.author-info span {
+ color: #555;
+ font-size: 14px;
+}
+
+.company-logo {
+ width: 60px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.company-logo img {
+ max-width: 100%;
+ max-height: 100%;
+ filter: grayscale(100%);
+ opacity: 0.7;
+}
+
+/* Social Proof Section */
+.social-proof {
+ padding: 80px 0;
+ background: white;
+}
+
+.social-proof h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 60px;
+ color: #1a1a1a;
+}
+
+.client-logos {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 30px;
+ margin: 40px 0 60px;
+ padding: 40px 0;
+ border-top: 1px solid #e1e5e9;
+ border-bottom: 1px solid #e1e5e9;
+}
+
+.logo-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ min-height: 80px;
+ color: #999;
+ font-weight: 500;
+ text-align: center;
+ transition: all 0.3s ease;
+}
+
+.logo-item:hover {
+ background: white;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+}
+
+/* Responsive Updates for New Components */
+@media (max-width: 768px) {
+ .case-study-content {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ }
+
+ .results-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+ }
+
+ .pricing-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .pricing-card.featured {
+ transform: none;
+ margin: 20px 0;
+ }
+
+ .categories-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ }
+
+ .contact-options {
+ grid-template-columns: 1fr;
+ gap: 20px;
+ }
+
+ .contact-option {
+ justify-content: flex-start;
+ }
+
+ .faq-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .page-hero h1,
+ .service-hero h1 {
+ font-size: 2.2rem;
+ }
+
+ .breadcrumb ol {
+ flex-wrap: wrap;
+ }
+
+ .client-logos {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .categories-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .results-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .case-study {
+ padding: 30px 20px;
+ }
+
+ .service-hero .hero-stats,
+ .page-hero .hero-stats {
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .hero-cta {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .cta-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .related-grid {
+ grid-template-columns: 1fr;
+ gap: 20px;
+ }
+
+ .related-card {
+ padding: 25px 20px;
+ }
+
+ .expert-consultation-cta {
+ padding: 30px 20px;
+ margin: 30px 0;
+ }
+
+ .article-content pre {
+ margin: 20px -20px;
+ border-radius: 0;
+ border-left: none;
+ border-right: none;
+ }
+
+ .article-content pre code {
+ padding: 15px 20px;
+ font-size: 13px;
+ }
+
+ .article-content pre:hover::before {
+ top: 5px;
+ right: 5px;
+ font-size: 11px;
+ padding: 4px 8px;
+ }
+}
+
+/* Technology Showcase Section */
+.technology-showcase {
+ padding: 80px 0;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+ position: relative;
+}
+
+.technology-showcase::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml,');
+ opacity: 0.3;
+ pointer-events: none;
+}
+
+.technology-showcase .container {
+ position: relative;
+ z-index: 1;
+}
+
+.technology-showcase h2 {
+ text-align: center;
+ margin-bottom: 50px;
+ color: #1a202c;
+ font-size: 2.5rem;
+ font-weight: 700;
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.tech-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 30px;
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.tech-card {
+ background: white;
+ padding: 40px 30px;
+ border-radius: 16px;
+ text-align: center;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ border: 1px solid #e2e8f0;
+ position: relative;
+ overflow: hidden;
+}
+
+.tech-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+}
+
+.tech-card:hover::before {
+ transform: scaleX(1);
+}
+
+.tech-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+ border-color: #cbd5e0;
+}
+
+.tech-icon {
+ font-size: 3rem;
+ margin-bottom: 20px;
+ display: block;
+ line-height: 1;
+ filter: grayscale(0.2);
+ transition: all 0.3s ease;
+}
+
+.tech-card:hover .tech-icon {
+ transform: scale(1.1);
+ filter: grayscale(0);
+}
+
+.tech-card h3 {
+ color: #1a202c;
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin: 0 0 15px 0;
+ transition: color 0.3s ease;
+}
+
+.tech-card:hover h3 {
+ color: #144784;
+}
+
+.tech-card p {
+ color: #64748b;
+ font-size: 1rem;
+ line-height: 1.6;
+ margin: 0;
+ font-weight: 500;
+}
+
+/* Responsive Design for Technology Showcase */
+@media (max-width: 768px) {
+ .technology-showcase {
+ padding: 60px 0;
+ }
+
+ .technology-showcase h2 {
+ font-size: 2rem;
+ margin-bottom: 40px;
+ }
+
+ .tech-grid {
+ grid-template-columns: 1fr;
+ gap: 20px;
+ }
+
+ .tech-card {
+ padding: 30px 20px;
+ }
+
+ .tech-icon {
+ font-size: 2.5rem;
+ margin-bottom: 15px;
+ }
+
+ .tech-card h3 {
+ font-size: 1.3rem;
+ }
+}
+
+/* Capabilities Grid (used in project-types.php) */
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 40px;
+ margin: 40px 0;
+}
+
+.capability-card {
+ background: white;
+ padding: 30px;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border-left: 4px solid #179e83;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.capability-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+ border-left-color: #144784;
+}
+
+.capability-card h3 {
+ color: #1a202c;
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin: 0 0 15px 0;
+ transition: color 0.3s ease;
+}
+
+.capability-card:hover h3 {
+ color: #144784;
+}
+
+.capability-card p {
+ color: #64748b;
+ line-height: 1.6;
+ margin: 0 0 20px 0;
+}
+
+.capability-card ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.capability-card li {
+ color: #4a5568;
+ margin: 8px 0;
+ padding-left: 20px;
+ position: relative;
+ font-size: 0.95rem;
+}
+
+.capability-card li::before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: #148a72;
+ font-weight: bold;
+ font-size: 1rem;
+}
+
+/* Technology badges/tags styling */
+.tech-tag {
+ display: inline-block;
+ background: #179e83;
+ color: white;
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ margin: 4px 8px 4px 0;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.tech-tag:hover {
+ background: #11725e;
+ transform: translateY(-2px);
+ box-shadow: 0 2px 8px rgba(23, 158, 131, 0.3);
+}
+
+/* Responsive design for capabilities grid */
+@media (max-width: 768px) {
+ .capabilities-grid {
+ grid-template-columns: 1fr;
+ gap: 20px;
+ margin: 30px 0;
+ }
+
+ .capability-card {
+ padding: 25px 20px;
+ }
+
+ .capability-card h3 {
+ font-size: 1.2rem;
+ }
+}
+
+/* Fix for navbar overlap on content pages */
+main {
+ padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+}
+
+/* Specific fix for legal content pages */
+.legal-content {
+ padding-top: 120px !important; /* Override inline styles for legal pages */
+}
+
+/* Also ensure any page sections that might be affected have proper spacing */
+.page-content {
+ padding-top: 90px;
+}
+
+/* For hero sections that should start right under navbar */
+.hero {
+ padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For about page hero */
+.about-hero {
+ padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For FAQ page hero */
+.faq-hero {
+ padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For project types and other page heroes */
+.page-hero {
+ padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* Hide reCAPTCHA badge */
+.grecaptcha-badge {
+ visibility: hidden !important;
+}
+
+/* Additional hero graphic animations */
+.hero-graphic .data-line-1,
+.hero-graphic .data-line-2,
+.hero-graphic .data-line-3,
+.hero-graphic .data-line-4,
+.hero-graphic .data-line-5,
+.hero-graphic .data-line-6 {
+ animation: data-pulse 3s ease-in-out infinite;
+}
+
+.hero-graphic .data-line-2 {
+ animation-delay: 0.5s;
+}
+
+.hero-graphic .data-line-3 {
+ animation-delay: 1s;
+}
+
+.hero-graphic .data-line-4 {
+ animation-delay: 1.5s;
+}
+
+.hero-graphic .data-line-5 {
+ animation-delay: 2s;
+}
+
+.hero-graphic .data-line-6 {
+ animation-delay: 2.5s;
+}
+
+/* ============================================
+ UNIFIED COMPONENT STYLES
+ Added for UI consistency across all pages
+ ============================================ */
+
+/* CSS Variables for Brand Consistency */
+:root {
+ --color-primary: #148069;
+ --color-primary-dark: #11725e;
+ --color-secondary: #144784;
+ --color-secondary-light: #1a5a9e;
+ --color-accent: #1a5a9e;
+ --gradient-hero: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ --gradient-hero-alt: linear-gradient(135deg, #144784 0%, #1a5a9e 100%);
+ --gradient-cta: linear-gradient(135deg, #144784 0%, #179e83 100%);
+ --color-text: #444444;
+ --color-text-dark: #1a1a1a;
+ --color-text-light: #666666;
+ --color-border: #e1e5e9;
+ --color-bg-light: #f8f9fa;
+ --star-color: #f0c14b;
+}
+
+/* Dark Testimonials Section (Homepage) */
+.testimonials-section-dark {
+ padding: 80px 0;
+ background: var(--gradient-hero-alt);
+ color: white;
+}
+
+.testimonials-section-dark .section-header {
+ text-align: center;
+ margin-bottom: 50px;
+}
+
+.testimonials-section-dark .section-header h2 {
+ color: white;
+ font-size: 2.2rem;
+ margin-bottom: 16px;
+}
+
+.testimonials-section-dark .section-header p {
+ color: rgba(255, 255, 255, 0.9);
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.testimonials-dark-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 30px;
+}
+
+.testimonial-card-dark {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 35px;
+ border-radius: 12px;
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+}
+
+.testimonial-card-dark:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateY(-5px);
+}
+
+.testimonial-stars {
+ display: flex;
+ gap: 5px;
+ margin-bottom: 20px;
+}
+
+.testimonial-stars .star {
+ color: var(--star-color);
+ font-size: 1.3rem;
+}
+
+.testimonial-card-dark .testimonial-text {
+ font-style: italic;
+ margin-bottom: 25px;
+ line-height: 1.7;
+ font-size: 1.05rem;
+ color: white;
+}
+
+.testimonial-author-dark {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.testimonial-avatar {
+ width: 50px;
+ height: 50px;
+ background: var(--color-primary);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 700;
+ font-size: 1.2rem;
+ color: white;
+}
+
+.testimonial-author-info .author-name {
+ font-weight: 600;
+ margin: 0;
+ color: white;
+}
+
+.testimonial-author-info .author-role {
+ opacity: 0.8;
+ margin: 0;
+ font-size: 0.9rem;
+ color: white;
+}
+
+.testimonials-cta {
+ text-align: center;
+ margin-top: 40px;
+}
+
+.testimonials-cta .btn-white {
+ background: white;
+ color: var(--color-secondary);
+ padding: 14px 28px;
+ border-radius: 8px;
+ text-decoration: none;
+ font-weight: 600;
+ display: inline-block;
+ transition: all 0.3s ease;
+}
+
+.testimonials-cta .btn-white:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
+}
+
+/* Unified Location Hero (for location pages) */
+.location-hero {
+ background: var(--gradient-hero);
+ color: white;
+ padding: 120px 0 80px;
+ text-align: center;
+ position: relative;
+}
+
+.location-hero .hero-content {
+ max-width: 900px;
+ margin: 0 auto;
+ position: relative;
+ z-index: 2;
+}
+
+.location-hero h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 20px;
+ line-height: 1.2;
+}
+
+.location-hero .hero-subtitle {
+ font-size: 1.25rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+ line-height: 1.6;
+}
+
+.location-hero .hero-stats {
+ display: flex;
+ justify-content: center;
+ gap: 40px;
+ margin: 40px 0;
+}
+
+.location-hero .hero-cta {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+/* Unified Breadcrumb Styling */
+.breadcrumb-nav {
+ background: var(--color-bg-light);
+ padding: 15px 0;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.breadcrumb-nav .breadcrumb-list {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ align-items: center;
+ gap: 8px;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.breadcrumb-nav .breadcrumb-item {
+ display: flex;
+ align-items: center;
+}
+
+.breadcrumb-nav .breadcrumb-item:not(:last-child)::after {
+ content: '>';
+ margin-left: 8px;
+ color: var(--color-text-light);
+ font-weight: 500;
+}
+
+.breadcrumb-nav .breadcrumb-link {
+ color: var(--color-secondary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.breadcrumb-nav .breadcrumb-link:hover {
+ color: var(--color-primary);
+ text-decoration: underline;
+}
+
+.breadcrumb-nav .breadcrumb-current {
+ color: var(--color-text-light);
+ font-weight: 500;
+}
+
+/* Unified Card Styles with Top Border Accent */
+.unified-card {
+ background: white;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f0f0f0;
+ border-top: 4px solid var(--color-primary);
+ transition: all 0.3s ease;
+}
+
+.unified-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.unified-card h3 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: var(--color-text-dark);
+}
+
+.unified-card p {
+ color: var(--color-text-light);
+ margin-bottom: 20px;
+ line-height: 1.6;
+}
+
+/* Unified CTA Section */
+.unified-cta {
+ padding: 80px 0;
+ background: var(--gradient-cta);
+ color: white;
+ text-align: center;
+}
+
+.unified-cta h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.unified-cta p {
+ font-size: 1.2rem;
+ margin-bottom: 40px;
+ opacity: 0.95;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.unified-cta .cta-buttons {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+/* Responsive adjustments for unified components */
+@media (max-width: 768px) {
+ .testimonials-dark-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .testimonials-section-dark {
+ padding: 60px 0;
+ }
+
+ .testimonials-section-dark .section-header h2 {
+ font-size: 1.8rem;
+ }
+
+ .location-hero h1 {
+ font-size: 2.2rem;
+ }
+
+ .location-hero .hero-stats {
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .location-hero .hero-cta {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .unified-cta h2 {
+ font-size: 2rem;
+ }
+
+ .unified-cta .cta-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .testimonial-card-dark {
+ padding: 25px;
+ }
+
+ .testimonial-card-dark .testimonial-text {
+ font-size: 1rem;
+ }
+
+ .unified-card {
+ padding: 30px 20px;
+ }
+}
+
+/* Certifications & Trust Badges Section */
+.certifications-section {
+ padding: 80px 0;
+ background: #f8f9fa;
+}
+
+.certifications-section .section-header {
+ text-align: center;
+ margin-bottom: 60px;
+}
+
+.certifications-section .section-header h2 {
+ font-size: 2.5rem;
+ color: #144784;
+ margin-bottom: 16px;
+}
+
+.certifications-section .section-header p {
+ color: #555;
+ max-width: 700px;
+ margin: 0 auto;
+ font-size: 1.1rem;
+}
+
+.certifications-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 40px;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.certification-badge {
+ text-align: center;
+ padding: 40px 30px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+}
+
+.certification-badge:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 8px 25px rgba(20, 71, 132, 0.15);
+}
+
+.certification-badge .badge-icon {
+ margin-bottom: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.certification-badge .badge-icon svg {
+ width: 80px;
+ height: 80px;
+}
+
+.certification-badge h3 {
+ font-size: 1.3rem;
+ color: #144784;
+ margin-bottom: 12px;
+ font-weight: 600;
+}
+
+.certification-badge p {
+ color: #555;
+ font-size: 0.95rem;
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* Responsive Design for Certifications */
+@media (max-width: 1024px) {
+ .certifications-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 30px;
+ }
+}
+
+@media (max-width: 768px) {
+ .certifications-section {
+ padding: 60px 0;
+ }
+
+ .certifications-section .section-header h2 {
+ font-size: 2rem;
+ }
+
+ .certifications-grid {
+ grid-template-columns: 1fr;
+ gap: 25px;
+ }
+
+ .certification-badge {
+ padding: 30px 25px;
+ }
+}
+
+@media (max-width: 480px) {
+ .certifications-section .section-header h2 {
+ font-size: 1.75rem;
+ }
+
+ .certification-badge h3 {
+ font-size: 1.15rem;
+ }
+
+ .certification-badge p {
+ font-size: 0.9rem;
+ }
+}
+
+/* Trust Signals Below Hero */
+.trust-signals-hero {
+ background: #f8f9fa;
+ padding: 2rem 0;
+ text-align: center;
+}
+.trust-signals-hero .trust-heading {
+ font-size: 0.95rem;
+ color: #6c757d;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ margin-bottom: 1.5rem;
+}
+.trust-signals-hero .trust-logos {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ flex-wrap: wrap;
+ margin-bottom: 1.5rem;
+}
+.trust-signals-hero .trust-logo-placeholder {
+ width: 120px;
+ height: 50px;
+ background: #e9ecef;
+ border-radius: 6px;
+}
+.trust-signals-hero .trust-badges {
+ display: flex;
+ justify-content: center;
+ gap: 1.5rem;
+ flex-wrap: wrap;
+}
+.trust-signals-hero .trust-badges .badge {
+ background: #fff;
+ border: 1px solid #dee2e6;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ color: #495057;
+}
+
+/* Quote Page Layout */
+.quote-page-layout {
+ display: grid;
+ grid-template-columns: 1fr 350px;
+ gap: 2rem;
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 2rem 0;
+}
+@media (max-width: 768px) {
+ .quote-page-layout {
+ grid-template-columns: 1fr;
+ }
+}
+.quote-sidebar {
+ position: sticky;
+ top: 100px;
+ align-self: start;
+}
+.quote-sidebar .testimonial-card {
+ background: #f8f9fa;
+ border-left: 4px solid #0d6efd;
+ padding: 1.5rem;
+ border-radius: 8px;
+ margin-bottom: 1.5rem;
+}
+.quote-sidebar .testimonial-card blockquote p {
+ font-style: italic;
+ margin-bottom: 0.5rem;
+}
+.quote-sidebar .what-happens-next {
+ background: #fff;
+ border: 1px solid #dee2e6;
+ padding: 1.5rem;
+ border-radius: 8px;
+}
+.quote-sidebar .what-happens-next ol {
+ padding-left: 1.2rem;
+}
+.quote-sidebar .what-happens-next li {
+ margin-bottom: 0.75rem;
+}
+.optional {
+ color: #6c757d;
+ font-weight: normal;
+ font-size: 0.85em;
+}
+.form-group input.error,
+.form-group select.error {
+ border-color: #dc3545;
+}
+.form-buttons {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1.5rem;
+}
+}
+
+
+/* ===== VISUAL FIXES 2026-02-08 v2 ===== */
+
+/* Fix 10: Increase base font size */
+body { font-size: 17px; }
+
+/* Fix 11: Widen containers */
+.container { max-width: 1320px; }
+
+/* Fix 1: Trust badges as styled pills */
+.trust-signals-hero .trust-badges .badge {
+ background: linear-gradient(135deg, #144784, #1a5298);
+ color: #fff;
+ border: none;
+ padding: 0.65rem 1.5rem;
+ font-size: 0.95rem;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ border-radius: 24px;
+ box-shadow: 0 2px 8px rgba(20, 71, 132, 0.25);
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+}
+.trust-signals-hero .trust-badges .badge::before {
+ content: '✓';
+ font-weight: 700;
+ font-size: 0.85rem;
+}
+.trust-signals-hero .trust-badges {
+ gap: 1.2rem;
+ margin-top: 0.5rem;
+}
+.trust-signals-hero .trust-heading {
+ margin-bottom: 1rem;
+ font-size: 1rem;
+}
+
+/* Fix 2: Service cards breathing room */
+.service-card { padding: 42px; }
+.service-card p {
+ font-size: 1.05rem;
+ line-height: 1.75;
+ margin-bottom: 22px;
+}
+.service-card li {
+ padding: 9px 0;
+ font-size: 1.02rem;
+ padding-left: 24px;
+ line-height: 1.55;
+}
+.service-card ul { margin-top: 8px; }
+.service-card h3 { font-size: 1.4rem; }
+
+/* Fix 3: Stats row labels bigger */
+.hero-stats .stat-label { font-size: 1.05rem; }
+.hero-stats .stat-number { font-size: 2.4rem; }
+
+/* Fix 4: Consistent card heights */
+.services-grid {
+ grid-template-columns: repeat(3, 1fr);
+}
+.services-grid .service-card {
+ display: flex;
+ flex-direction: column;
+}
+.services-grid .service-card p { flex-shrink: 0; }
+.services-grid .service-card ul { flex-grow: 1; }
+@media (max-width: 1100px) {
+ .services-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 700px) {
+ .services-grid { grid-template-columns: 1fr; }
+}
+
+/* Fix 5: About values grid 3-col */
+.values-grid {
+ grid-template-columns: repeat(3, 1fr);
+ justify-items: stretch;
+}
+@media (max-width: 900px) {
+ .values-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+ .values-grid { grid-template-columns: 1fr; }
+}
+
+/* Fix 6: About stats grid 3-col */
+.stats-grid { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 768px) {
+ .stats-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Fix 7: Team bio cards equal height */
+.values-grid .value-card {
+ display: flex;
+ flex-direction: column;
+}
+
+/* Fix 8: Consistent testimonial style on quote page */
+/* Override the big teal quote mark on sidebar testimonial-card */
+.quote-sidebar .testimonial-card {
+ background: #f8f9fa;
+ border-left: 4px solid #144784;
+ border-top: none;
+ border-right: none;
+ border-bottom: none;
+ padding: 1.5rem;
+ border-radius: 8px;
+ margin-bottom: 1.5rem;
+ box-shadow: none;
+}
+.quote-sidebar .testimonial-card::before {
+ display: none;
+}
+.quote-sidebar .testimonial-card blockquote p {
+ font-style: italic;
+ margin-bottom: 0.5rem;
+ line-height: 1.6;
+ color: #333;
+}
+.quote-sidebar .testimonial-card blockquote cite {
+ color: #555;
+ font-size: 0.9rem;
+}
+
+/* Fix 9: FAQ full width below form & sidebar */
+.quote-faq-section {
+ grid-column: 1 / -1;
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid #e0e0e0;
+}
+
+/* Features grid improvements */
+.features-grid {
+ grid-template-columns: repeat(3, 1fr);
+}
+@media (max-width: 1100px) {
+ .features-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 700px) {
+ .features-grid { grid-template-columns: 1fr; }
+}
+
+/* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ align-items: stretch;
+}
+.capability-card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.capability-card p {
+ flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+ color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+ color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+ color: #bfdbfe;
+}
+.footer-section h3 {
+ color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+ color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+ filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+ body {
+ font-size: 16px;
+ }
+
+ /* Project-types hero */
+ .project-types-hero h1 {
+ font-size: 1.8rem;
+ line-height: 1.3;
+ }
+ .project-types-hero p {
+ font-size: 1rem;
+ }
+
+ /* Capability cards single column on mobile */
+ .capabilities-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Industry grid single column */
+ .industry-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Project category headings */
+ .project-category h2 {
+ font-size: 1.6rem;
+ }
+ .project-category h3 {
+ font-size: 1.2rem;
+ }
+ .project-description {
+ font-size: 1rem;
+ }
+
+ /* Footer content single column (already done but ensure) */
+ .footer-content {
+ grid-template-columns: 1fr;
+ }
+
+ /* Footer bottom stack */
+ .footer-bottom,
+ .footer-bottom .footer-bottom-content {
+ flex-direction: column;
+ gap: 15px;
+ text-align: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .project-types-hero h1 {
+ font-size: 1.5rem;
+ }
+ .project-types-hero {
+ padding: 100px 0 40px;
+ }
+ .project-category {
+ padding: 40px 0;
+ }
+ .project-category h2 {
+ font-size: 1.4rem;
+ }
+}
+
+/* 4. General polish */
+/* Ensure project-types hero accounts for fixed nav */
+.project-types-hero {
+ padding-top: 140px;
+}
+
+/* Tech tags wrapping fix */
+.tech-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 9157817..def83de 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -149,6 +149,7 @@ body {
transition: color 0.3s ease;
}
+.nav-link.active { color: #148069; font-weight: 600; border-bottom: 2px solid #148069; padding-bottom: 2px;}
.nav-link:hover {
color: #144784;
}
@@ -3599,41 +3600,55 @@ aside.related-articles {
}
}
-/* Fix for navbar overlap on content pages */
+/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
+/* Navbar is position:fixed, height 70px */
+
+/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
+.hero,
+.page-hero,
+.about-hero,
+.faq-hero,
+.service-hero,
+.project-types-hero,
+.tools-hero,
+.quote-hero {
+ padding-top: 120px !important;
+}
+
+/* Non-hero pages with : push content below navbar */
main {
- padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+ padding-top: 90px; /* 70px navbar + 20px breathing room */
}
-/* Specific fix for legal content pages */
+/* But if main contains a hero, don't double-pad */
+main > .hero:first-child,
+main > .page-hero:first-child,
+main > .about-hero:first-child,
+main > .faq-hero:first-child,
+main > .service-hero:first-child,
+main > .project-types-hero:first-child {
+ margin-top: -90px; /* Cancel out the main padding */
+}
+
+/* Legal content pages (no hero, text-heavy) */
.legal-content {
- padding-top: 120px !important; /* Override inline styles for legal pages */
+ padding-top: 100px !important; /* 70px navbar + 30px breathing room */
}
-/* Also ensure any page sections that might be affected have proper spacing */
+/* Tool sub-pages and standalone pages (no , no hero) */
+.calculator-container,
+.analyzer-container,
+.converter-container,
+.checker-container,
+.thank-you-container {
+ padding-top: 100px !important; /* 70px navbar + 30px breathing room */
+}
+
+/* Generic page-content class */
.page-content {
padding-top: 90px;
}
-/* For hero sections that should start right under navbar */
-.hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For about page hero */
-.about-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For FAQ page hero */
-.faq-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For project types and other page heroes */
-.page-hero {
- padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
/* Hide reCAPTCHA badge */
.grecaptcha-badge {
visibility: hidden !important;
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
}
/* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+ align-items: stretch;
+}
+.capability-card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.capability-card p {
+ flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+ color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+ color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+ color: #bfdbfe;
+}
+.footer-section h3 {
+ color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+ color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+ filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+ body {
+ font-size: 16px;
+ }
+
+ /* Project-types hero */
+ .project-types-hero h1 {
+ font-size: 1.8rem;
+ line-height: 1.3;
+ }
+ .project-types-hero p {
+ font-size: 1rem;
+ }
+
+ /* Capability cards single column on mobile */
+ .capabilities-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Industry grid single column */
+ .industry-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Project category headings */
+ .project-category h2 {
+ font-size: 1.6rem;
+ }
+ .project-category h3 {
+ font-size: 1.2rem;
+ }
+ .project-description {
+ font-size: 1rem;
+ }
+
+ /* Footer content single column (already done but ensure) */
+ .footer-content {
+ grid-template-columns: 1fr;
+ }
+
+ /* Footer bottom stack */
+ .footer-bottom,
+ .footer-bottom .footer-bottom-content {
+ flex-direction: column;
+ gap: 15px;
+ text-align: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .project-types-hero h1 {
+ font-size: 1.5rem;
+ }
+ .project-types-hero {
+ padding: 100px 0 40px;
+ }
+ .project-category {
+ padding: 40px 0;
+ }
+ .project-category h2 {
+ font-size: 1.4rem;
+ }
+}
+
+/* 4. General polish */
+/* project-types-hero padding now in unified block above */
+
+/* Tech tags wrapping fix */
+.tech-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/blog/articles/free-web-scraping-tools-launch.php b/blog/articles/free-web-scraping-tools-launch.php
index 91406e4..d7f8dc0 100644
--- a/blog/articles/free-web-scraping-tools-launch.php
+++ b/blog/articles/free-web-scraping-tools-launch.php
@@ -12,7 +12,10 @@ $author = "UK Data Services Team";
<?php echo htmlspecialchars($page_title); ?>
-
+
+
+
+
diff --git a/blog/articles/real-time-analytics-streaming.php b/blog/articles/real-time-analytics-streaming.php
index 02e2a73..79e65da 100644
--- a/blog/articles/real-time-analytics-streaming.php
+++ b/blog/articles/real-time-analytics-streaming.php
@@ -23,7 +23,10 @@ $read_time = 11;
-
+
+
+
+
diff --git a/blog/articles/retail-competitor-monitoring-case.php b/blog/articles/retail-competitor-monitoring-case.php
index d2c737d..e19fd14 100644
--- a/blog/articles/retail-competitor-monitoring-case.php
+++ b/blog/articles/retail-competitor-monitoring-case.php
@@ -23,7 +23,10 @@ $read_time = 9;
-
+
+
+
+
diff --git a/blog/articles/uk-cookie-law-compliance.php b/blog/articles/uk-cookie-law-compliance.php
index 2b11f8d..c0803d4 100644
--- a/blog/articles/uk-cookie-law-compliance.php
+++ b/blog/articles/uk-cookie-law-compliance.php
@@ -23,7 +23,10 @@ $read_time = 8;
-
+
+
+
+
diff --git a/case-studies/index.php b/case-studies/index.php
index 1a2a9df..b0f197b 100644
--- a/case-studies/index.php
+++ b/case-studies/index.php
@@ -12,7 +12,10 @@ $keywords = "UK data services case studies, client success stories, data transfo
<?php echo htmlspecialchars($page_title); ?>
-
+
+
+
+
diff --git a/includes/nav.php b/includes/nav.php
index bd34f7a..59e7d86 100644
--- a/includes/nav.php
+++ b/includes/nav.php
@@ -1,3 +1,17 @@
+
-
\ No newline at end of file
+
diff --git a/index.php b/index.php
index 8d018fb..8d4d9ac 100644
--- a/index.php
+++ b/index.php
@@ -111,9 +111,9 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
-
+
-
+
-
-
+
+
+