*{ 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; } .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; } .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; } .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{ 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 .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{ 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{ 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{ 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{ 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; } .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-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{ 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); } @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); } } .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); } @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; } } @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; } } img{ max-width:100%; height:auto; loading:lazy; } .logo{ height:auto; max-height:50px; width:auto; } .footer-logo img{ height:40px; width:auto; } .loading{ opacity:0.6; pointer-events:none; } .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{ 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; } .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; } img{ height:auto; max-width:100%; } img[loading="lazy"]{ opacity:0; transition:opacity 0.3s ease; } img[loading="lazy"].loaded{ opacity:1; } picture img{ width:100%; height:auto; } 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{ 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{ 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{ 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-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{ 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-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; } img.loading{ background:#f0f0f0; opacity:0.7; } img.loaded{ transition:opacity 0.3s ease; opacity:1; } .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%; } @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; } } .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; } button:focus, input:focus, select:focus, textarea:focus, a:focus{ outline:2px solid #179e83; outline-offset:2px; } @media (prefers-contrast:high){ .btn-primary{ background:#000; border:2px solid #000; } .highlight{ background:#000; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } } @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; } } @media (prefers-color-scheme:dark){ :root{ --bg-primary:#1a1a1a; --bg-secondary:#2d2d2d; --text-primary:#ffffff; --text-secondary:#cccccc; } } .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{ 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; } .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-container{ position:relative; } .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-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); } } .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{ 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{ 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{ 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{ 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{ 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{ 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; } .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{ 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-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{ 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{ 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; } 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{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; width:100%; } .category-links .btn{ min-width:200px; } @media (max-width:768px){ .category-links{ flex-direction:column; align-items:center; } .category-links .btn{ width:100%; max-width:300px; } } .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{ 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{ 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{ 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); } @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{ 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; } @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{ 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; } .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); } @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; } } main{ padding-top:90px; } .legal-content{ padding-top:120px !important; } .page-content{ padding-top:90px; } .hero{ padding-top:140px; } .about-hero{ padding-top:140px; } .faq-hero{ padding-top:140px; } .page-hero{ padding-top:140px; } .grecaptcha-badge{ visibility:hidden !important; } .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 ============================================ */ :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; } .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); } .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; } .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{ 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{ 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; } @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-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; } @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; } }