diff --git a/about.php b/about.php index b9e21fe..5ac94d6 100644 --- a/about.php +++ b/about.php @@ -187,29 +187,7 @@ $breadcrumbs = [ Skip to main content - +
diff --git a/assets/css/main.css b/assets/css/main.css index b355f70..9157817 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -12,7 +12,7 @@ html { body { font-family: 'Roboto Slab', 'Lato', sans-serif; line-height: 1.6; - color: #444444; + color: #333333; background-color: #ffffff; } @@ -99,7 +99,7 @@ body { .section-header p { font-size: 1.2rem; - color: #666; + color: #555; max-width: 600px; margin: 0 auto; } @@ -241,6 +241,7 @@ body { .hero-subtitle { font-size: 1.3rem; + font-weight: 500; color: #ffffff; margin-bottom: 40px; line-height: 1.6; @@ -416,7 +417,7 @@ body { } .service-card p { - color: #666; + color: #555; margin-bottom: 20px; line-height: 1.6; } @@ -436,7 +437,7 @@ body { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; } @@ -485,7 +486,7 @@ body { } .step-content p { - color: #666; + color: #555; line-height: 1.6; } @@ -526,7 +527,7 @@ body { } .feature p { - color: #666; + color: #555; line-height: 1.6; } @@ -552,7 +553,7 @@ body { .contact-info p { font-size: 1.2rem; - color: #666; + color: #555; margin-bottom: 40px; line-height: 1.6; } @@ -583,11 +584,11 @@ body { .contact-item p { margin: 0; - color: #666; + color: #555; } .contact-item a { - color: #179e83; + color: #148a72; text-decoration: none; } @@ -630,7 +631,7 @@ body { .form-group select:focus, .form-group textarea:focus { outline: none; - border-color: #179e83; + border-color: #148a72; box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1); } @@ -702,7 +703,7 @@ body { } .footer-section a:hover { - color: #179e83; + color: #148a72; } .footer-logo img { @@ -1115,12 +1116,12 @@ img { } .article-meta time { - color: #666; + color: #555; font-weight: 500; } .article-meta .read-time { - color: #666; + color: #555; font-weight: 500; } @@ -1138,11 +1139,11 @@ img { } .featured-article h3 a:hover { - color: #179e83; + color: #148a72; } .featured-article p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 20px; } @@ -1157,7 +1158,7 @@ img { } .article-footer .read-more { - color: #179e83; + color: #148a72; text-decoration: none; font-weight: 500; transition: color 0.3s ease; @@ -1216,11 +1217,11 @@ img { } .article-card h3 a:hover { - color: #179e83; + color: #148a72; } .article-card p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 20px; } @@ -1234,7 +1235,7 @@ img { } .pagination-info { - color: #666; + color: #555; font-weight: 500; } @@ -1328,7 +1329,7 @@ img { .article-subtitle { font-size: 1.3rem; - color: #666; + color: #555; margin-bottom: 30px; line-height: 1.6; } @@ -1349,13 +1350,13 @@ img { } .author-info p { - color: #666; + color: #555; margin: 0; font-size: 14px; } .article-share a { - color: #179e83; + color: #148a72; text-decoration: none; font-weight: 500; padding: 8px 16px; @@ -1411,7 +1412,7 @@ img { .article-toc li::before { content: counter(toc-counter) ". "; - color: #179e83; + color: #148a72; font-weight: 600; } @@ -1423,7 +1424,7 @@ img { } .article-toc a:hover { - color: #179e83; + color: #148a72; text-decoration: underline; } @@ -1502,7 +1503,7 @@ img { } .article-content pre:hover { - border-color: #179e83; + border-color: #148a72; box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1); } @@ -1539,7 +1540,7 @@ img { } .article-content a { - color: #179e83; + color: #148a72; text-decoration: underline; transition: color 0.3s ease; } @@ -1983,7 +1984,7 @@ a:focus-visible { .form-group input:focus + label, .form-group select:focus + label, .form-group textarea:focus + label { - color: #179e83; + color: #148a72; } /* Status indicators */ @@ -2066,7 +2067,7 @@ a:focus-visible { .breadcrumb li:not(:last-child)::after { content: '>'; margin-left: 8px; - color: #666; + color: #555; font-weight: 500; } @@ -2078,12 +2079,12 @@ a:focus-visible { } .breadcrumb a:hover { - color: #179e83; + color: #148a72; text-decoration: underline; } .breadcrumb li[aria-current="page"] span { - color: #666; + color: #555; font-weight: 500; } @@ -2168,7 +2169,7 @@ a:focus-visible { border: none; font-size: 18px; cursor: pointer; - color: #666; + color: #555; transition: color 0.3s ease; } @@ -2268,7 +2269,7 @@ a:focus-visible { } .feature-card p { - color: #666; + color: #555; margin-bottom: 20px; line-height: 1.6; } @@ -2289,7 +2290,7 @@ a:focus-visible { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; } @@ -2325,8 +2326,7 @@ a:focus-visible { .industry-card:hover { transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); - background: white; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .industry-card h3 { @@ -2337,7 +2337,7 @@ a:focus-visible { } .industry-card p { - color: #666; + color: #555; line-height: 1.6; } @@ -2374,7 +2374,7 @@ a:focus-visible { } .pricing-card.featured { - border-color: #179e83; + border-color: #148a72; transform: scale(1.05); box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15); } @@ -2403,14 +2403,14 @@ a:focus-visible { .pricing-card .price { font-size: 3rem; font-weight: 700; - color: #179e83; + color: #148a72; margin-bottom: 30px; line-height: 1; } .pricing-card .price span { font-size: 1rem; - color: #666; + color: #555; font-weight: 400; } @@ -2422,7 +2422,7 @@ a:focus-visible { .pricing-card li { padding: 10px 0; - color: #666; + color: #555; border-bottom: 1px solid #f0f0f0; } @@ -2483,7 +2483,7 @@ a:focus-visible { .faq-item p { padding: 20px; margin: 0; - color: #666; + color: #555; line-height: 1.6; } @@ -2534,7 +2534,7 @@ a:focus-visible { } .category-card p { - color: #666; + color: #555; line-height: 1.4; margin: 0; } @@ -2617,7 +2617,7 @@ a:focus-visible { .faq-answer p { margin-bottom: 15px; - color: #666; + color: #555; line-height: 1.6; } @@ -2628,7 +2628,7 @@ a:focus-visible { .faq-answer li { margin-bottom: 8px; - color: #666; + color: #555; line-height: 1.5; } @@ -2761,7 +2761,7 @@ a:focus-visible { .case-study-meta span { background: #f0f0f0; - color: #666; + color: #555; padding: 5px 12px; border-radius: 15px; font-size: 14px; @@ -2778,7 +2778,7 @@ a:focus-visible { .case-study-intro { font-size: 1.1rem; - color: #666; + color: #555; margin-bottom: 30px; line-height: 1.6; } @@ -2815,14 +2815,14 @@ a:focus-visible { .result-number { font-size: 2rem; font-weight: 700; - color: #179e83; + color: #148a72; display: block; margin-bottom: 5px; } .result-label { font-size: 14px; - color: #666; + color: #555; font-weight: 500; } @@ -2855,7 +2855,7 @@ a:focus-visible { } .testimonial cite span { - color: #666; + color: #555; font-size: 14px; } @@ -2917,14 +2917,14 @@ a:focus-visible { .industry-stat .stat-number { font-size: 2.5rem; font-weight: 700; - color: #179e83; + color: #148a72; display: block; margin-bottom: 5px; } .industry-stat .stat-label { font-size: 14px; - color: #666; + color: #555; font-weight: 500; } @@ -2992,7 +2992,7 @@ aside.related-articles { .related-card h3 a:hover, .related-card h4 a:hover { - color: #179e83; + color: #148a72; } .related-card .category { @@ -3012,13 +3012,13 @@ aside.related-articles { } .related-card p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 15px; } .related-card .read-time { - color: #179e83; + color: #148a72; font-size: 14px; font-weight: 500; } @@ -3098,7 +3098,7 @@ aside.related-articles { } .expert-consultation-cta p { - color: #666; + color: #555; margin-bottom: 25px; font-size: 1.1rem; line-height: 1.6; @@ -3148,7 +3148,7 @@ aside.related-articles { top: -10px; left: 30px; font-size: 4rem; - color: #179e83; + color: #148a72; font-family: serif; line-height: 1; } @@ -3175,7 +3175,7 @@ aside.related-articles { } .author-info span { - color: #666; + color: #555; font-size: 14px; } @@ -3558,7 +3558,7 @@ aside.related-articles { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; font-size: 1rem; } @@ -4029,7 +4029,7 @@ main { } .certifications-section .section-header p { - color: #666; + color: #555; max-width: 700px; margin: 0 auto; font-size: 1.1rem; @@ -4077,7 +4077,7 @@ main { } .certification-badge p { - color: #666; + color: #555; font-size: 0.95rem; line-height: 1.6; margin: 0; @@ -4346,7 +4346,7 @@ body { font-size: 17px; } color: #333; } .quote-sidebar .testimonial-card blockquote cite { - color: #666; + color: #555; font-size: 0.9rem; } diff --git a/assets/css/main.css.bak.20260210 b/assets/css/main.css.bak.20260210 new file mode 100644 index 0000000..b355f70 --- /dev/null +++ b/assets/css/main.css.bak.20260210 @@ -0,0 +1,4372 @@ +/* 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.min.css b/assets/css/main.min.css index b355f70..9157817 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -12,7 +12,7 @@ html { body { font-family: 'Roboto Slab', 'Lato', sans-serif; line-height: 1.6; - color: #444444; + color: #333333; background-color: #ffffff; } @@ -99,7 +99,7 @@ body { .section-header p { font-size: 1.2rem; - color: #666; + color: #555; max-width: 600px; margin: 0 auto; } @@ -241,6 +241,7 @@ body { .hero-subtitle { font-size: 1.3rem; + font-weight: 500; color: #ffffff; margin-bottom: 40px; line-height: 1.6; @@ -416,7 +417,7 @@ body { } .service-card p { - color: #666; + color: #555; margin-bottom: 20px; line-height: 1.6; } @@ -436,7 +437,7 @@ body { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; } @@ -485,7 +486,7 @@ body { } .step-content p { - color: #666; + color: #555; line-height: 1.6; } @@ -526,7 +527,7 @@ body { } .feature p { - color: #666; + color: #555; line-height: 1.6; } @@ -552,7 +553,7 @@ body { .contact-info p { font-size: 1.2rem; - color: #666; + color: #555; margin-bottom: 40px; line-height: 1.6; } @@ -583,11 +584,11 @@ body { .contact-item p { margin: 0; - color: #666; + color: #555; } .contact-item a { - color: #179e83; + color: #148a72; text-decoration: none; } @@ -630,7 +631,7 @@ body { .form-group select:focus, .form-group textarea:focus { outline: none; - border-color: #179e83; + border-color: #148a72; box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1); } @@ -702,7 +703,7 @@ body { } .footer-section a:hover { - color: #179e83; + color: #148a72; } .footer-logo img { @@ -1115,12 +1116,12 @@ img { } .article-meta time { - color: #666; + color: #555; font-weight: 500; } .article-meta .read-time { - color: #666; + color: #555; font-weight: 500; } @@ -1138,11 +1139,11 @@ img { } .featured-article h3 a:hover { - color: #179e83; + color: #148a72; } .featured-article p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 20px; } @@ -1157,7 +1158,7 @@ img { } .article-footer .read-more { - color: #179e83; + color: #148a72; text-decoration: none; font-weight: 500; transition: color 0.3s ease; @@ -1216,11 +1217,11 @@ img { } .article-card h3 a:hover { - color: #179e83; + color: #148a72; } .article-card p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 20px; } @@ -1234,7 +1235,7 @@ img { } .pagination-info { - color: #666; + color: #555; font-weight: 500; } @@ -1328,7 +1329,7 @@ img { .article-subtitle { font-size: 1.3rem; - color: #666; + color: #555; margin-bottom: 30px; line-height: 1.6; } @@ -1349,13 +1350,13 @@ img { } .author-info p { - color: #666; + color: #555; margin: 0; font-size: 14px; } .article-share a { - color: #179e83; + color: #148a72; text-decoration: none; font-weight: 500; padding: 8px 16px; @@ -1411,7 +1412,7 @@ img { .article-toc li::before { content: counter(toc-counter) ". "; - color: #179e83; + color: #148a72; font-weight: 600; } @@ -1423,7 +1424,7 @@ img { } .article-toc a:hover { - color: #179e83; + color: #148a72; text-decoration: underline; } @@ -1502,7 +1503,7 @@ img { } .article-content pre:hover { - border-color: #179e83; + border-color: #148a72; box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1); } @@ -1539,7 +1540,7 @@ img { } .article-content a { - color: #179e83; + color: #148a72; text-decoration: underline; transition: color 0.3s ease; } @@ -1983,7 +1984,7 @@ a:focus-visible { .form-group input:focus + label, .form-group select:focus + label, .form-group textarea:focus + label { - color: #179e83; + color: #148a72; } /* Status indicators */ @@ -2066,7 +2067,7 @@ a:focus-visible { .breadcrumb li:not(:last-child)::after { content: '>'; margin-left: 8px; - color: #666; + color: #555; font-weight: 500; } @@ -2078,12 +2079,12 @@ a:focus-visible { } .breadcrumb a:hover { - color: #179e83; + color: #148a72; text-decoration: underline; } .breadcrumb li[aria-current="page"] span { - color: #666; + color: #555; font-weight: 500; } @@ -2168,7 +2169,7 @@ a:focus-visible { border: none; font-size: 18px; cursor: pointer; - color: #666; + color: #555; transition: color 0.3s ease; } @@ -2268,7 +2269,7 @@ a:focus-visible { } .feature-card p { - color: #666; + color: #555; margin-bottom: 20px; line-height: 1.6; } @@ -2289,7 +2290,7 @@ a:focus-visible { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; } @@ -2325,8 +2326,7 @@ a:focus-visible { .industry-card:hover { transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); - background: white; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .industry-card h3 { @@ -2337,7 +2337,7 @@ a:focus-visible { } .industry-card p { - color: #666; + color: #555; line-height: 1.6; } @@ -2374,7 +2374,7 @@ a:focus-visible { } .pricing-card.featured { - border-color: #179e83; + border-color: #148a72; transform: scale(1.05); box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15); } @@ -2403,14 +2403,14 @@ a:focus-visible { .pricing-card .price { font-size: 3rem; font-weight: 700; - color: #179e83; + color: #148a72; margin-bottom: 30px; line-height: 1; } .pricing-card .price span { font-size: 1rem; - color: #666; + color: #555; font-weight: 400; } @@ -2422,7 +2422,7 @@ a:focus-visible { .pricing-card li { padding: 10px 0; - color: #666; + color: #555; border-bottom: 1px solid #f0f0f0; } @@ -2483,7 +2483,7 @@ a:focus-visible { .faq-item p { padding: 20px; margin: 0; - color: #666; + color: #555; line-height: 1.6; } @@ -2534,7 +2534,7 @@ a:focus-visible { } .category-card p { - color: #666; + color: #555; line-height: 1.4; margin: 0; } @@ -2617,7 +2617,7 @@ a:focus-visible { .faq-answer p { margin-bottom: 15px; - color: #666; + color: #555; line-height: 1.6; } @@ -2628,7 +2628,7 @@ a:focus-visible { .faq-answer li { margin-bottom: 8px; - color: #666; + color: #555; line-height: 1.5; } @@ -2761,7 +2761,7 @@ a:focus-visible { .case-study-meta span { background: #f0f0f0; - color: #666; + color: #555; padding: 5px 12px; border-radius: 15px; font-size: 14px; @@ -2778,7 +2778,7 @@ a:focus-visible { .case-study-intro { font-size: 1.1rem; - color: #666; + color: #555; margin-bottom: 30px; line-height: 1.6; } @@ -2815,14 +2815,14 @@ a:focus-visible { .result-number { font-size: 2rem; font-weight: 700; - color: #179e83; + color: #148a72; display: block; margin-bottom: 5px; } .result-label { font-size: 14px; - color: #666; + color: #555; font-weight: 500; } @@ -2855,7 +2855,7 @@ a:focus-visible { } .testimonial cite span { - color: #666; + color: #555; font-size: 14px; } @@ -2917,14 +2917,14 @@ a:focus-visible { .industry-stat .stat-number { font-size: 2.5rem; font-weight: 700; - color: #179e83; + color: #148a72; display: block; margin-bottom: 5px; } .industry-stat .stat-label { font-size: 14px; - color: #666; + color: #555; font-weight: 500; } @@ -2992,7 +2992,7 @@ aside.related-articles { .related-card h3 a:hover, .related-card h4 a:hover { - color: #179e83; + color: #148a72; } .related-card .category { @@ -3012,13 +3012,13 @@ aside.related-articles { } .related-card p { - color: #666; + color: #555; line-height: 1.6; margin-bottom: 15px; } .related-card .read-time { - color: #179e83; + color: #148a72; font-size: 14px; font-weight: 500; } @@ -3098,7 +3098,7 @@ aside.related-articles { } .expert-consultation-cta p { - color: #666; + color: #555; margin-bottom: 25px; font-size: 1.1rem; line-height: 1.6; @@ -3148,7 +3148,7 @@ aside.related-articles { top: -10px; left: 30px; font-size: 4rem; - color: #179e83; + color: #148a72; font-family: serif; line-height: 1; } @@ -3175,7 +3175,7 @@ aside.related-articles { } .author-info span { - color: #666; + color: #555; font-size: 14px; } @@ -3558,7 +3558,7 @@ aside.related-articles { content: '✓'; position: absolute; left: 0; - color: #179e83; + color: #148a72; font-weight: bold; font-size: 1rem; } @@ -4029,7 +4029,7 @@ main { } .certifications-section .section-header p { - color: #666; + color: #555; max-width: 700px; margin: 0 auto; font-size: 1.1rem; @@ -4077,7 +4077,7 @@ main { } .certification-badge p { - color: #666; + color: #555; font-size: 0.95rem; line-height: 1.6; margin: 0; @@ -4346,7 +4346,7 @@ body { font-size: 17px; } color: #333; } .quote-sidebar .testimonial-card blockquote cite { - color: #666; + color: #555; font-size: 0.9rem; } diff --git a/blog/articles/business-intelligence-dashboard-design.php b/blog/articles/business-intelligence-dashboard-design.php index 6db425e..951c0dc 100644 --- a/blog/articles/business-intelligence-dashboard-design.php +++ b/blog/articles/business-intelligence-dashboard-design.php @@ -114,29 +114,7 @@ $read_time = 12; Skip to main content - +
diff --git a/blog/articles/cloud-native-scraping-architecture.php b/blog/articles/cloud-native-scraping-architecture.php index 78f7fae..ca15da6 100644 --- a/blog/articles/cloud-native-scraping-architecture.php +++ b/blog/articles/cloud-native-scraping-architecture.php @@ -96,29 +96,7 @@ $read_time = 11; Skip to main content - +
diff --git a/blog/articles/competitive-intelligence-roi-metrics.php b/blog/articles/competitive-intelligence-roi-metrics.php index 745f0e0..2068ae2 100644 --- a/blog/articles/competitive-intelligence-roi-metrics.php +++ b/blog/articles/competitive-intelligence-roi-metrics.php @@ -114,29 +114,7 @@ $read_time = 8; Skip to main content - +
diff --git a/blog/articles/data-automation-strategies-uk-businesses.php b/blog/articles/data-automation-strategies-uk-businesses.php index 035b7b8..c5b8bde 100644 --- a/blog/articles/data-automation-strategies-uk-businesses.php +++ b/blog/articles/data-automation-strategies-uk-businesses.php @@ -94,29 +94,7 @@ $og_image = "https://ukdataservices.co.uk/assets/images/icon-automation.svg"; Skip to main content -

Data Automation Strategies for UK Businesses: A Complete Implementation Guide

+

Data Automation Strategies for UK Businesses: A Complete Implementation Guide

Transform your operations with intelligent automation that reduces costs by up to 40% while improving accuracy and decision-making speed.

diff --git a/blog/articles/data-protection-impact-assessments.php b/blog/articles/data-protection-impact-assessments.php index f669367..61f3678 100644 --- a/blog/articles/data-protection-impact-assessments.php +++ b/blog/articles/data-protection-impact-assessments.php @@ -277,29 +277,7 @@ $read_time = 10; - +
+
+ + + + + + - + \ No newline at end of file diff --git a/blog/articles/real-time-analytics-streaming.php b/blog/articles/real-time-analytics-streaming.php index c0bee6c..02e2a73 100644 --- a/blog/articles/real-time-analytics-streaming.php +++ b/blog/articles/real-time-analytics-streaming.php @@ -29,29 +29,7 @@ $read_time = 11; - +
diff --git a/blog/articles/retail-competitor-monitoring-case.php b/blog/articles/retail-competitor-monitoring-case.php index 599dfcd..d2c737d 100644 --- a/blog/articles/retail-competitor-monitoring-case.php +++ b/blog/articles/retail-competitor-monitoring-case.php @@ -29,29 +29,7 @@ $read_time = 9; - +
diff --git a/blog/articles/retail-price-monitoring-strategies.php b/blog/articles/retail-price-monitoring-strategies.php index 331c713..686c9e4 100644 --- a/blog/articles/retail-price-monitoring-strategies.php +++ b/blog/articles/retail-price-monitoring-strategies.php @@ -96,29 +96,7 @@ $read_time = 10; Skip to main content - +
diff --git a/blog/articles/selenium-vs-playwright-comparison.php b/blog/articles/selenium-vs-playwright-comparison.php index 534d7a3..c8a864c 100644 --- a/blog/articles/selenium-vs-playwright-comparison.php +++ b/blog/articles/selenium-vs-playwright-comparison.php @@ -137,29 +137,7 @@ $read_time = 9; Skip to main content - +
diff --git a/blog/articles/sql-analytics-advanced-techniques.php b/blog/articles/sql-analytics-advanced-techniques.php index 54b3d6c..f1ae737 100644 --- a/blog/articles/sql-analytics-advanced-techniques.php +++ b/blog/articles/sql-analytics-advanced-techniques.php @@ -114,29 +114,7 @@ $read_time = 16; Skip to main content - +
diff --git a/blog/articles/uk-cookie-law-compliance.php b/blog/articles/uk-cookie-law-compliance.php index a6b0e01..2b11f8d 100644 --- a/blog/articles/uk-cookie-law-compliance.php +++ b/blog/articles/uk-cookie-law-compliance.php @@ -31,29 +31,7 @@ $read_time = 8; - +
diff --git a/blog/articles/uk-property-market-data-trends.php b/blog/articles/uk-property-market-data-trends.php index eb13a9e..ebe5d0f 100644 --- a/blog/articles/uk-property-market-data-trends.php +++ b/blog/articles/uk-property-market-data-trends.php @@ -96,29 +96,7 @@ $read_time = 8; Skip to main content - +
diff --git a/blog/articles/web-scraping-compliance-uk-guide.php b/blog/articles/web-scraping-compliance-uk-guide.php index 4a85b59..90c6ab1 100644 --- a/blog/articles/web-scraping-compliance-uk-guide.php +++ b/blog/articles/web-scraping-compliance-uk-guide.php @@ -1,761 +1,739 @@ - - - - - - - <?php echo htmlspecialchars($article_title); ?> | UK Data Services Blog - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + <?php echo htmlspecialchars($article_title); ?> | UK Data Services Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - Skip to main content - - -
-
-
- - -
-

- -

- - -
- - - - - - -
- - -
-

GDPR & Data Protection Act 2018 Compliance

-

The most significant legal consideration for web scraping activities is compliance with data protection laws. Under UK GDPR and DPA 2018, any processing of personal data must meet strict legal requirements.

- -

What Constitutes Personal Data?

-

Personal data includes any information relating to an identified or identifiable natural person. In the context of web scraping, this commonly includes:

-
    -
  • Names and contact details
  • -
  • Email addresses and phone numbers
  • -
  • Social media profiles and usernames
  • -
  • Professional information and job titles
  • -
  • Online identifiers and IP addresses
  • -
  • Behavioural data and preferences
  • -
- -

Lawful Basis for Processing

-

Before scraping personal data, you must establish a lawful basis under Article 6 of GDPR:

- -
-
-

🔓 Legitimate Interests

-

Most commonly used for web scraping. Requires balancing your interests against data subjects' rights and freedoms.

-
- Suitable for: Market research, competitive analysis, journalism -
-
-
-

✅ Consent

-

Requires explicit, informed consent from data subjects.

-
- Suitable for: Opt-in marketing lists, research participation -
-
-
-

📋 Contractual Necessity

-

Processing necessary for contract performance.

-
- Suitable for: Service delivery, customer management -
-
-
- -

Data Protection Principles

-

All web scraping activities must comply with the seven key data protection principles:

-
    -
  1. Lawfulness, Fairness, and Transparency - Process data lawfully with clear purposes
  2. -
  3. Purpose Limitation - Use data only for specified, explicit purposes
  4. -
  5. Data Minimisation - Collect only necessary data
  6. -
  7. Accuracy - Ensure data is accurate and up-to-date
  8. -
  9. Storage Limitation - Retain data only as long as necessary
  10. -
  11. Integrity and Confidentiality - Implement appropriate security measures
  12. -
  13. Accountability - Demonstrate compliance with regulations
  14. -
-
- - - - -
-

Conclusion & Next Steps

-

Web scraping compliance in the UK requires careful consideration of multiple legal frameworks and ongoing attention to regulatory developments. The landscape continues to evolve with new case law and regulatory guidance. For businesses seeking professional data services, understanding these requirements is essential for sustainable operations.

- -

Key Takeaways

-
    -
  1. Proactive Compliance: Build compliance into your scraping strategy from the outset
  2. -
  3. Risk-Based Approach: Tailor your compliance measures to the specific risks of each project
  4. -
  5. Documentation: Maintain comprehensive records to demonstrate compliance
  6. -
  7. Technical Safeguards: Implement respectful scraping practices
  8. -
  9. Legal Review: Seek professional legal advice for complex or high-risk activities
  10. -
- -
-

Need Expert Legal Guidance?

-

Our legal compliance team provides specialist advice on web scraping regulations and data protection law. We work with leading UK law firms to ensure your data collection activities remain compliant with evolving regulations. Learn more about our GDPR compliance services and comprehensive case studies showcasing successful compliance implementations.

- Request Legal Consultation -
-
-
- - -
-

Frequently Asked Questions

-
-
-

Is web scraping legal in the UK in 2025?

-

Yes, web scraping is legal in the UK when conducted in compliance with the Data Protection Act 2018, GDPR, website terms of service, and relevant intellectual property laws. The key is ensuring your scraping activities respect data protection principles and do not breach access controls.

-
- -
-

What are the main legal risks of web scraping in the UK?

-

The primary legal risks include violations of the Data Protection Act 2018/GDPR for personal data, breach of website terms of service, copyright infringement for protected content, and potential violations of the Computer Misuse Act 1990 if access controls are circumvented.

-
- -
-

Do I need consent for web scraping publicly available data?

-

For publicly available non-personal data, consent is typically not required. However, if scraping personal data, you must have a lawful basis under GDPR (such as legitimate interests) and ensure compliance with data protection principles including purpose limitation and data minimisation.

-
- -
-

How do I conduct a Data Protection Impact Assessment for web scraping?

-

A DPIA should assess the necessity and proportionality of processing, identify and mitigate risks to data subjects, and demonstrate compliance measures. Consider factors like data sensitivity, processing scale, potential impact on individuals, and technical safeguards implemented.

-
-
-
- - -
- -
-
- -
-
-
- - -
-
- - - -
-
- - -
-
-
-

Need Professional Web Scraping Services?

-

Our expert team ensures full legal compliance while delivering the data insights your business needs. Get a free consultation on your next data project.

- -
-
-
-
- - - - - - - - - - - - + + + + + + + + + + + + + + Skip to main content + + +
+
+
+ + +
+

+ +

+ + +
+ + + + + + +
+ + +
+

GDPR & Data Protection Act 2018 Compliance

+

The most significant legal consideration for web scraping activities is compliance with data protection laws. Under UK GDPR and DPA 2018, any processing of personal data must meet strict legal requirements.

+ +

What Constitutes Personal Data?

+

Personal data includes any information relating to an identified or identifiable natural person. In the context of web scraping, this commonly includes:

+
    +
  • Names and contact details
  • +
  • Email addresses and phone numbers
  • +
  • Social media profiles and usernames
  • +
  • Professional information and job titles
  • +
  • Online identifiers and IP addresses
  • +
  • Behavioural data and preferences
  • +
+ +

Lawful Basis for Processing

+

Before scraping personal data, you must establish a lawful basis under Article 6 of GDPR:

+ +
+
+

🔓 Legitimate Interests

+

Most commonly used for web scraping. Requires balancing your interests against data subjects' rights and freedoms.

+
+ Suitable for: Market research, competitive analysis, journalism +
+
+
+

✅ Consent

+

Requires explicit, informed consent from data subjects.

+
+ Suitable for: Opt-in marketing lists, research participation +
+
+
+

📋 Contractual Necessity

+

Processing necessary for contract performance.

+
+ Suitable for: Service delivery, customer management +
+
+
+ +

Data Protection Principles

+

All web scraping activities must comply with the seven key data protection principles:

+
    +
  1. Lawfulness, Fairness, and Transparency - Process data lawfully with clear purposes
  2. +
  3. Purpose Limitation - Use data only for specified, explicit purposes
  4. +
  5. Data Minimisation - Collect only necessary data
  6. +
  7. Accuracy - Ensure data is accurate and up-to-date
  8. +
  9. Storage Limitation - Retain data only as long as necessary
  10. +
  11. Integrity and Confidentiality - Implement appropriate security measures
  12. +
  13. Accountability - Demonstrate compliance with regulations
  14. +
+
+ + + + +
+

Conclusion & Next Steps

+

Web scraping compliance in the UK requires careful consideration of multiple legal frameworks and ongoing attention to regulatory developments. The landscape continues to evolve with new case law and regulatory guidance. For businesses seeking professional data services, understanding these requirements is essential for sustainable operations.

+ +

Key Takeaways

+
    +
  1. Proactive Compliance: Build compliance into your scraping strategy from the outset
  2. +
  3. Risk-Based Approach: Tailor your compliance measures to the specific risks of each project
  4. +
  5. Documentation: Maintain comprehensive records to demonstrate compliance
  6. +
  7. Technical Safeguards: Implement respectful scraping practices
  8. +
  9. Legal Review: Seek professional legal advice for complex or high-risk activities
  10. +
+ +
+

Need Expert Legal Guidance?

+

Our legal compliance team provides specialist advice on web scraping regulations and data protection law. We work with leading UK law firms to ensure your data collection activities remain compliant with evolving regulations. Learn more about our GDPR compliance services and comprehensive case studies showcasing successful compliance implementations.

+ Request Legal Consultation +
+
+
+ + +
+

Frequently Asked Questions

+
+
+

Is web scraping legal in the UK in 2025?

+

Yes, web scraping is legal in the UK when conducted in compliance with the Data Protection Act 2018, GDPR, website terms of service, and relevant intellectual property laws. The key is ensuring your scraping activities respect data protection principles and do not breach access controls.

+
+ +
+

What are the main legal risks of web scraping in the UK?

+

The primary legal risks include violations of the Data Protection Act 2018/GDPR for personal data, breach of website terms of service, copyright infringement for protected content, and potential violations of the Computer Misuse Act 1990 if access controls are circumvented.

+
+ +
+

Do I need consent for web scraping publicly available data?

+

For publicly available non-personal data, consent is typically not required. However, if scraping personal data, you must have a lawful basis under GDPR (such as legitimate interests) and ensure compliance with data protection principles including purpose limitation and data minimisation.

+
+ +
+

How do I conduct a Data Protection Impact Assessment for web scraping?

+

A DPIA should assess the necessity and proportionality of processing, identify and mitigate risks to data subjects, and demonstrate compliance measures. Consider factors like data sensitivity, processing scale, potential impact on individuals, and technical safeguards implemented.

+
+
+
+ + +
+ +
+
+ + + + + + + + + + + + + + +
+
+
+

Need Professional Web Scraping Services?

+

Our expert team ensures full legal compliance while delivering the data insights your business needs. Get a free consultation on your next data project.

+ +
+
+
+
+ + + + + + + + + + + + - + \ No newline at end of file diff --git a/blog/articles/web-scraping-rate-limiting.php b/blog/articles/web-scraping-rate-limiting.php index d6f207c..910d786 100644 --- a/blog/articles/web-scraping-rate-limiting.php +++ b/blog/articles/web-scraping-rate-limiting.php @@ -96,29 +96,7 @@ $read_time = 9; Skip to main content - +
diff --git a/blog/categories/business-intelligence.php b/blog/categories/business-intelligence.php index 1e40da6..e4e51f9 100644 --- a/blog/categories/business-intelligence.php +++ b/blog/categories/business-intelligence.php @@ -90,29 +90,7 @@ $og_image = "https://ukdataservices.co.uk/assets/images/blog/business-intelligen Skip to main content - +