From 27f071604d9b44896d7b5fd76e369b3f7512d585 Mon Sep 17 00:00:00 2001 From: root Date: Sun, 22 Feb 2026 10:02:32 +0000 Subject: [PATCH] =?UTF-8?q?SEO:=20all=20remaining=20items=20=E2=80=94=20ba?= =?UTF-8?q?k=20cleanup,=20sitemap,=20homepage,=20FAQ=20schema,=20inline=20?= =?UTF-8?q?links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Delete all .bak files from web root (security fix) - Regenerate sitemap-blog.xml with all 41 articles and correct lastmod dates - Improve homepage meta description (more specific, no contract mention) - Add FAQPage schema to Python pipeline article (4 Q&As) - Fix London analytics article: author, meta description updated - Add contextual inline links to 4 articles -> service pages - Remove includes.bak.20260210 directory --- assets/css/main.css.bak.20260210 | 4372 ---------------- assets/css/main.css.bak.20260211 | 4496 ----------------- ...ompanies-london-top-providers-compared.php | 6 +- .../data-quality-validation-pipelines.php | 2 +- blog/articles/ecommerce-trends-uk-2025.php | 2 +- .../python-data-pipeline-tools-2025.php | 391 -- ...ping-services-uk-complete-buyers-guide.php | 6 +- includes.bak.20260210/author-bio.php | 218 - includes.bak.20260210/breadcrumb-schema.php | 52 - includes.bak.20260210/canonical.php | 160 - .../components/location-cta.php | 225 - .../components/related-services.php | 152 - includes.bak.20260210/footer.php | 162 - includes.bak.20260210/header.php | 28 - .../includes/article-footer.php | 115 - includes.bak.20260210/includes/author-bio.php | 218 - .../includes/breadcrumb-schema.php | 52 - includes.bak.20260210/includes/canonical.php | 160 - .../includes/components/location-cta.php | 225 - .../includes/components/related-services.php | 152 - includes.bak.20260210/includes/footer.php | 162 - includes.bak.20260210/includes/header.php | 28 - includes.bak.20260210/includes/meta-tags.php | 164 - .../includes/schema/article-schema.php | 198 - .../includes/schema/faq-schema.php | 151 - .../includes/schema/local-business-schema.php | 233 - .../includes/schema/organization-schema.php | 108 - .../includes/schema/review-schema.php | 196 - .../includes/schema/service-schema.php | 223 - includes.bak.20260210/includes/url-config.php | 233 - includes.bak.20260210/meta-tags.php | 164 - .../schema/article-schema.php | 198 - includes.bak.20260210/schema/faq-schema.php | 151 - .../schema/local-business-schema.php | 233 - .../schema/organization-schema.php | 108 - .../schema/review-schema.php | 196 - .../schema/service-schema.php | 223 - includes.bak.20260210/url-config.php | 233 - .../article-footer.php.bak.20260222 | 0 index.php | 2 +- sitemap-blog.xml | 557 +- 41 files changed, 257 insertions(+), 14698 deletions(-) delete mode 100644 assets/css/main.css.bak.20260210 delete mode 100644 assets/css/main.css.bak.20260211 delete mode 100644 includes.bak.20260210/author-bio.php delete mode 100644 includes.bak.20260210/breadcrumb-schema.php delete mode 100644 includes.bak.20260210/canonical.php delete mode 100644 includes.bak.20260210/components/location-cta.php delete mode 100644 includes.bak.20260210/components/related-services.php delete mode 100644 includes.bak.20260210/footer.php delete mode 100644 includes.bak.20260210/header.php delete mode 100644 includes.bak.20260210/includes/article-footer.php delete mode 100644 includes.bak.20260210/includes/author-bio.php delete mode 100644 includes.bak.20260210/includes/breadcrumb-schema.php delete mode 100644 includes.bak.20260210/includes/canonical.php delete mode 100644 includes.bak.20260210/includes/components/location-cta.php delete mode 100644 includes.bak.20260210/includes/components/related-services.php delete mode 100644 includes.bak.20260210/includes/footer.php delete mode 100644 includes.bak.20260210/includes/header.php delete mode 100644 includes.bak.20260210/includes/meta-tags.php delete mode 100644 includes.bak.20260210/includes/schema/article-schema.php delete mode 100644 includes.bak.20260210/includes/schema/faq-schema.php delete mode 100644 includes.bak.20260210/includes/schema/local-business-schema.php delete mode 100644 includes.bak.20260210/includes/schema/organization-schema.php delete mode 100644 includes.bak.20260210/includes/schema/review-schema.php delete mode 100644 includes.bak.20260210/includes/schema/service-schema.php delete mode 100644 includes.bak.20260210/includes/url-config.php delete mode 100644 includes.bak.20260210/meta-tags.php delete mode 100644 includes.bak.20260210/schema/article-schema.php delete mode 100644 includes.bak.20260210/schema/faq-schema.php delete mode 100644 includes.bak.20260210/schema/local-business-schema.php delete mode 100644 includes.bak.20260210/schema/organization-schema.php delete mode 100644 includes.bak.20260210/schema/review-schema.php delete mode 100644 includes.bak.20260210/schema/service-schema.php delete mode 100644 includes.bak.20260210/url-config.php rename includes.bak.20260210/article-footer.php => includes/article-footer.php.bak.20260222 (100%) diff --git a/assets/css/main.css.bak.20260210 b/assets/css/main.css.bak.20260210 deleted file mode 100644 index b355f70..0000000 --- a/assets/css/main.css.bak.20260210 +++ /dev/null @@ -1,4372 +0,0 @@ -/* 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: #444444; - 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: #666; - 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; - 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: #666; - 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: #179e83; - 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: #666; - 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: #666; - 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: #666; - 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: #666; -} - -.contact-item a { - color: #179e83; - 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: #179e83; - 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: #179e83; -} - -.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: #666; - font-weight: 500; -} - -.article-meta .read-time { - color: #666; - 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: #179e83; -} - -.featured-article p { - color: #666; - 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: #179e83; - 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: #179e83; -} - -.article-card p { - color: #666; - 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: #666; - 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: #666; - 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: #666; - margin: 0; - font-size: 14px; -} - -.article-share a { - color: #179e83; - 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: #179e83; - font-weight: 600; -} - -.article-toc a { - color: #144784; - text-decoration: none; - font-weight: 500; - transition: color 0.3s ease; -} - -.article-toc a:hover { - color: #179e83; - 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: #179e83; - 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: #179e83; - 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: #179e83; -} - -/* 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: #666; - font-weight: 500; -} - -.breadcrumb a { - color: #144784; - text-decoration: none; - font-weight: 500; - transition: color 0.3s ease; -} - -.breadcrumb a:hover { - color: #179e83; - text-decoration: underline; -} - -.breadcrumb li[aria-current="page"] span { - color: #666; - 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: #666; - 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: #666; - 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: #179e83; - 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.1); - background: white; -} - -.industry-card h3 { - font-size: 1.3rem; - font-weight: 600; - margin-bottom: 12px; - color: #144784; -} - -.industry-card p { - color: #666; - 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: #179e83; - 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: #179e83; - margin-bottom: 30px; - line-height: 1; -} - -.pricing-card .price span { - font-size: 1rem; - color: #666; - font-weight: 400; -} - -.pricing-card ul { - list-style: none; - padding: 0; - margin-bottom: 30px; -} - -.pricing-card li { - padding: 10px 0; - color: #666; - 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: #666; - 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: #666; - 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: #666; - line-height: 1.6; -} - -.faq-answer ul { - margin-left: 20px; - margin-bottom: 15px; -} - -.faq-answer li { - margin-bottom: 8px; - color: #666; - 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: #666; - 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: #666; - 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: #179e83; - display: block; - margin-bottom: 5px; -} - -.result-label { - font-size: 14px; - color: #666; - 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: #666; - 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: #179e83; - display: block; - margin-bottom: 5px; -} - -.industry-stat .stat-label { - font-size: 14px; - color: #666; - 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: #179e83; -} - -.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: #666; - line-height: 1.6; - margin-bottom: 15px; -} - -.related-card .read-time { - color: #179e83; - 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: #666; - 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: #179e83; - 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: #666; - 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: #179e83; - 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: #666; - 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: #666; - 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: #666; - 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 ===== */ diff --git a/assets/css/main.css.bak.20260211 b/assets/css/main.css.bak.20260211 deleted file mode 100644 index 1228549..0000000 --- a/assets/css/main.css.bak.20260211 +++ /dev/null @@ -1,4496 +0,0 @@ -/* 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/blog/articles/data-analytics-companies-london-top-providers-compared.php b/blog/articles/data-analytics-companies-london-top-providers-compared.php index cf8112b..619d6d2 100644 --- a/blog/articles/data-analytics-companies-london-top-providers-compared.php +++ b/blog/articles/data-analytics-companies-london-top-providers-compared.php @@ -4,10 +4,10 @@ header('Strict-Transport-Security: max-age=31536000; includeSubDomains'); // SEO and performance optimizations $page_title = "10 Best Data Analytics Companies in London — 2026 Rankings & Reviews"; -$page_description = "Compare London's top 10 analytics firms by pricing, speciality & verified reviews. Find your ideal data partner in minutes."; +$page_description = "Independent ranking of London's top 10 data analytics companies in 2026. Compare pricing, specialisms, client reviews & response times. Updated February 2026."; $canonical_url = "https://ukdataservices.co.uk/blog/articles/data-analytics-companies-london-top-providers-compared"; $keywords = "data analytics companies London, business intelligence firms London, data science companies UK, analytics consultants London, big data companies"; -$author = "UK Data Services Editorial Team"; +$article_author = "Emma Richardson"; $og_image = "https://ukdataservices.co.uk/assets/images/blog/data-analytics-companies-london.png"; $published_date = "2025-08-08"; $modified_date = "2025-08-08"; @@ -625,7 +625,7 @@ $modified_date = "2025-08-08";

Key Analytics Applications