diff --git a/assets/css/main.css b/assets/css/main.css
index f26d7ef..fdd1682 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -45,7 +45,7 @@ body {
}
.btn-primary {
- background: #179e83;
+ background: #148069;
color: white !important;
text-decoration: none !important;
}
@@ -152,7 +152,7 @@ body {
}
.nav-link.cta-button {
- background: #179e83;
+ background: #148069;
color: white;
padding: 10px 20px;
border-radius: 6px;
@@ -169,6 +169,13 @@ body {
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 {
@@ -454,7 +461,7 @@ body {
}
.step-number {
- background: #179e83;
+ background: #148069;
color: white;
width: 60px;
height: 60px;
@@ -630,6 +637,33 @@ body {
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;
@@ -1613,7 +1647,7 @@ textarea:focus-visible {
/* Category link styles */
.category-link {
- background: #179e83;
+ background: #148069;
color: white !important;
padding: 5px 12px;
border-radius: 15px;
@@ -1688,12 +1722,15 @@ textarea:focus-visible {
color: white;
font-size: 18px;
cursor: pointer;
- padding: 0;
- width: 20px;
- height: 20px;
+ 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 */
@@ -3637,7 +3674,7 @@ main {
/* CSS Variables for Brand Consistency */
:root {
- --color-primary: #179e83;
+ --color-primary: #148069;
--color-primary-dark: #11725e;
--color-secondary: #144784;
--color-secondary-light: #1a5a9e;
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 6e22319..6538431 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -1,3574 +1,3552 @@
-/* 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;
-}
-
-.btn-primary {
- background: #179e83;
- 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: #179e83;
- 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;
-}
-
-.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: #179e83;
- 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;
+*{
+ 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;
}
-
-.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 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: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-group textarea {
- resize: vertical;
- min-height: 120px;
+.form-error:empty{
+ display:none;
}
-/* Footer */
-.footer {
- background: #151f25;
- color: white;
- padding: 60px 0 30px;
+.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-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 h3 {
- font-size: 1.2rem;
- font-weight: 600;
- margin-bottom: 20px;
- color: white;
+.footer-section ul{
+ list-style:none;
}
-
-.footer-section ul {
- list-style: none;
+.footer-section li{
+ margin-bottom:12px;
}
-
-.footer-section li {
- margin-bottom: 12px;
+.footer-section a{
+ color:#ccc;
+ text-decoration:none;
+ transition:color 0.3s ease;
}
-
-.footer-section a {
- color: #ccc;
- text-decoration: none;
- transition: color 0.3s ease;
+.footer-section a:hover{
+ color:#179e83;
}
-
-.footer-section a:hover {
- color: #179e83;
+.footer-logo img{
+ height:40px;
+ margin-bottom:20px;
}
-
-.footer-logo img {
- height: 40px;
- margin-bottom: 20px;
+.footer-section p{
+ color:#ccc;
+ line-height:1.6;
}
-
-.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;
}
-
-.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 {
- display: flex;
- gap: 20px;
+.social-links a{
+ display:block;
+ width:40px;
+ height:40px;
}
-
-.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 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);
}
-.social-links a:hover img {
- filter: invert(0.7) sepia(1) saturate(2) hue-rotate(240deg);
+@keyframes fadeInUp{
+ from{
+ opacity:0;
+ transform:translateY(30px);
}
-
-/* Animations */
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ 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 fadeInRight{
+ from{
+ opacity:0;
+ transform:translateX(30px);
}
-
-@keyframes float {
- 0%, 100% { transform: translateY(0px); }
- 50% { transform: translateY(-20px); }
+ to{
+ opacity:1;
+ transform:translateX(0);
}
-
-@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);
- }
+@keyframes fadeInLeft{
+ from{
+ opacity:0;
+ transform:translateX(-30px);
}
-
-/* Animation Classes */
-.animate-on-scroll {
- opacity: 0;
- transform: translateY(30px);
- transition: all 0.8s ease-out;
+ to{
+ opacity:1;
+ transform:translateX(0);
}
-
-.animate-on-scroll.animated {
- opacity: 1;
- transform: translateY(0);
}
-
-.service-card {
- animation: slideInFromBottom 0.6s ease-out forwards;
- animation-delay: var(--animation-delay, 0s);
+@keyframes float{
+ 0%, 100%{transform:translateY(0px)}
+ 50%{transform:translateY(-20px)}
}
-
-.feature {
- animation: fadeInUp 0.6s ease-out forwards;
- animation-delay: var(--animation-delay, 0s);
+@keyframes pulse{
+ 0%, 100%{transform:scale(1)}
+ 50%{transform:scale(1.05)}
}
-
-.step {
- animation: fadeInLeft 0.6s ease-out forwards;
- animation-delay: var(--animation-delay, 0s);
+@keyframes slideInFromBottom{
+ from{
+ opacity:0;
+ transform:translateY(50px);
}
-
-/* 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;
- }
+ to{
+ opacity:1;
+ transform:translateY(0);
}
-
-/* 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;
- }
+.animate-on-scroll{
+ opacity:0;
+ transform:translateY(30px);
+ transition:all 0.8s ease-out;
}
-
-/* Performance Optimizations */
-img {
- max-width: 100%;
- height: auto;
- loading: lazy;
+.animate-on-scroll.animated{
+ opacity:1;
+ transform:translateY(0);
}
-
-/* Logo specific styles */
-.logo {
- height: auto;
- max-height: 50px;
- width: auto;
+.service-card{
+ animation:slideInFromBottom 0.6s ease-out forwards;
+ animation-delay:var(--animation-delay, 0s);
}
-
-.footer-logo img {
- height: 40px;
- width: auto;
+.feature{
+ animation:fadeInUp 0.6s ease-out forwards;
+ animation-delay:var(--animation-delay, 0s);
}
-
-/* Favicon links don't need display properties */
-
-/* Loading states */
-.loading {
- opacity: 0.6;
- pointer-events: none;
+.step{
+ animation:fadeInLeft 0.6s ease-out forwards;
+ animation-delay:var(--animation-delay, 0s);
}
-/* Blog-specific styles */
-.blog-categories {
- padding: 80px 0;
- background: #f8f9fa;
+@media (max-width:768px){
+ .featured-grid{
+ grid-template-columns:1fr;
}
-
-.blog-categories h2 {
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- margin-bottom: 60px;
- color: #1a1a1a;
+
+ .featured-article.main-feature{
+ grid-row:span 1;
}
-
-.blog-featured {
- padding: 80px 0;
- background: white;
+
+ .articles-grid{
+ grid-template-columns:1fr;
}
-
-.blog-featured h2 {
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- margin-bottom: 60px;
- color: #1a1a1a;
+
+ .newsletter-form .form-group{
+ flex-direction:column;
}
-
-.featured-grid {
- display: grid;
- grid-template-columns: 2fr 1fr 1fr;
- gap: 30px;
+
+ .article-title{
+ font-size:2.2rem;
}
-
-.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;
+
+ .article-author{
+ flex-direction:column;
+ text-align:center;
+ gap:15px;
}
-
-.featured-article:hover {
- transform: translateY(-5px);
- box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+
+ .blog-categories h2,
+ .blog-featured h2,
+ .blog-recent h2{
+ font-size:2rem;
}
-
-.featured-article.main-feature {
- grid-row: span 2;
}
-.featured-article .article-image {
- height: 200px;
- overflow: hidden;
+@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;
}
-
-.featured-article.main-feature .article-image {
- height: 300px;
+ .nav-menu.active{
+ left:0;
}
-
-.featured-article .article-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.3s ease;
+ .nav-toggle{
+ display:flex;
}
-
-.featured-article:hover .article-image img {
- transform: scale(1.05);
+ .nav-toggle.active .bar:nth-child(2){
+ opacity:0;
}
-
-.featured-article .article-content {
- padding: 30px;
+ .nav-toggle.active .bar:nth-child(1){
+ transform:translateY(8px) rotate(45deg);
}
-
-.article-meta {
- display: flex;
- align-items: center;
- gap: 15px;
- margin-bottom: 15px;
- font-size: 14px;
+ .nav-toggle.active .bar:nth-child(3){
+ transform:translateY(-8px) rotate(-45deg);
}
-
-.article-meta .category {
- background: #179e83;
- color: white;
- padding: 5px 12px;
- border-radius: 15px;
- font-weight: 500;
- text-decoration: none;
+ .hero-container{
+ grid-template-columns:1fr;
+ gap:40px;
+ text-align:center;
}
-
-.article-meta time {
- color: #666;
- font-weight: 500;
+ .hero-title{
+ font-size:2.5rem;
}
-
-.article-meta .read-time {
- color: #666;
- font-weight: 500;
+ .hero-buttons{
+ flex-direction:column;
+ align-items:center;
}
-
-.featured-article h3 {
- font-size: 1.4rem;
- font-weight: 600;
- margin-bottom: 15px;
- line-height: 1.3;
+ .hero-stats{
+ justify-content:center;
+ gap:30px;
}
-
-.featured-article h3 a {
- color: #1a1a1a;
- text-decoration: none;
- transition: color 0.3s ease;
+ .section-header h2{
+ font-size:2rem;
}
-
-.featured-article h3 a:hover {
- color: #179e83;
+ .services-grid{
+ grid-template-columns:1fr;
}
-
-.featured-article p {
- color: #666;
- line-height: 1.6;
- margin-bottom: 20px;
+ .features-grid{
+ grid-template-columns:1fr;
}
-
-.article-footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-top: 1px solid #f0f0f0;
- padding-top: 15px;
- margin-top: 15px;
+ .contact-content{
+ grid-template-columns:1fr;
+ gap:40px;
}
-
-.article-footer .read-more {
- color: #179e83;
- text-decoration: none;
- font-weight: 500;
- transition: color 0.3s ease;
+ .footer-content{
+ grid-template-columns:1fr;
+ gap:30px;
+ text-align:center;
}
-
-.article-footer .read-more:hover {
- color: #144784;
- text-decoration: underline;
+ .footer-bottom{
+ flex-direction:column;
+ gap:20px;
+ text-align:center;
}
-
-.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;
+@media (max-width:480px){
+ .container{
+ padding:0 15px;
}
-
-.blog-newsletter {
- padding: 80px 0;
- background: linear-gradient(135deg, #144784 0%, #179e83 100%);
- color: white;
- text-align: center;
+ .hero{
+ padding:100px 0 60px;
}
-
-.newsletter-content h2 {
- font-size: 2.5rem;
- font-weight: 600;
- margin-bottom: 20px;
- color: white;
+ .hero-title{
+ font-size:2rem;
}
-
-.newsletter-content p {
- font-size: 1.2rem;
- margin-bottom: 40px;
- opacity: 0.95;
- max-width: 600px;
- margin-left: auto;
- margin-right: auto;
+ .hero-subtitle{
+ font-size:1.1rem;
}
-
-.newsletter-form .form-group {
- display: flex;
- max-width: 500px;
- margin: 0 auto 20px;
- gap: 15px;
+ .btn{
+ padding:12px 24px;
+ font-size:14px;
}
-
-.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;
+ .service-card,
+ .contact-form{
+ padding:30px 20px;
}
-
-.newsletter-form .btn {
- padding: 15px 30px;
- border-radius: 50px;
- white-space: nowrap;
+ .step{
+ flex-direction:column;
+ text-align:center;
}
-
-.newsletter-privacy {
- font-size: 14px;
- opacity: 0.8;
- max-width: 400px;
- margin: 0 auto;
+ .step-number{
+ margin:0 0 20px 0;
}
-
-.newsletter-privacy a {
- color: white;
- text-decoration: underline;
}
-/* Blog article styles */
-.blog-article {
- padding: 40px 0 80px;
- background: white;
- position: relative;
- clear: both;
- width: 100%;
+img{
+ max-width:100%;
+ height:auto;
+ loading:lazy;
}
-.blog-article .container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 0 20px;
- position: relative;
+.logo{
+ height:auto;
+ max-height:50px;
+ width:auto;
}
-
-.article-header {
- max-width: 800px;
- margin: 0 auto 40px;
- text-align: center;
+.footer-logo img{
+ height:40px;
+ width:auto;
}
-.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;
+.loading{
+ opacity:0.6;
+ pointer-events:none;
}
-.article-author {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 30px;
- text-align: left;
+.blog-categories{
+ padding:80px 0;
+ background:#f8f9fa;
}
-
-.author-info strong {
- color: #1a1a1a;
- font-weight: 600;
- display: block;
- margin-bottom: 5px;
+.blog-categories h2{
+ text-align:center;
+ font-size:2.5rem;
+ font-weight:600;
+ margin-bottom:60px;
+ color:#1a1a1a;
}
-
-.author-info p {
- color: #666;
- margin: 0;
- font-size: 14px;
+.blog-featured{
+ padding:80px 0;
+ background:white;
}
-
-.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;
+.blog-featured h2{
+ text-align:center;
+ font-size:2.5rem;
+ font-weight:600;
+ margin-bottom:60px;
+ color:#1a1a1a;
}
-
-.article-share a:hover {
- background: #179e83;
- color: white;
+.featured-grid{
+ display:grid;
+ grid-template-columns:2fr 1fr 1fr;
+ gap:30px;
}
-
-.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;
+.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-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 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;
}
-.article-content li {
- margin-bottom: 8px;
- color: #444;
+img{
+ height:auto;
+ max-width:100%;
}
-.article-content a {
- color: #179e83;
- text-decoration: underline;
- transition: color 0.3s ease;
+img[loading="lazy"]{
+ opacity:0;
+ transition:opacity 0.3s ease;
+}
+img[loading="lazy"].loaded{
+ opacity:1;
}
-.article-content a:hover {
- color: #144784;
+picture img{
+ width:100%;
+ height:auto;
}
-.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);
+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;
+.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: #179e83;
- color: white !important;
- padding: 5px 12px;
- border-radius: 15px;
- font-weight: 500;
- text-decoration: none;
- transition: background 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)}
}
-.category-link:hover {
- background: #144784;
- color: white !important;
- text-decoration: none;
+.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;
}
-.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;
+.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);
}
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
+.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;
}
-/* 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: 0;
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* 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.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-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;
}
-.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;
}
-/* Image loading states */
-img.loading {
- background: #f0f0f0;
- opacity: 0.7;
+.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%;
}
-img.loaded {
- transition: opacity 0.3s ease;
- opacity: 1;
+@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;
+}
}
-/* Enhanced button hover effects */
-.btn {
- position: relative;
- overflow: hidden;
+.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;
}
-.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;
+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;
- }
+@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;
- }
+@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;
- }
+@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);
+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{
+ 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;
}
-.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;
}
-/* 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-container{
+ position:relative;
}
-/* Error page specific improvements */
-.error-container {
- position: relative;
+.form-group{
+ position:relative;
}
-
-/* Improved form styling */
-.form-group {
- position: relative;
+.form-group label{
+ transition:all 0.3s ease;
}
-
-.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;
+.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-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: #179e83;
- text-decoration: none;
- font-weight: 500;
- transition: color 0.3s ease;
-}
-
-.breadcrumb a:hover {
- color: #144784;
- 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 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;
-}
-
-.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;
-}
-
-/* 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;
+.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;
}
-
-.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"] {
- 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 {
- transform: rotate(45deg);
-}
-
-.faq-answer {
- display: none;
- background: white;
- padding: 20px;
- border-radius: 0 0 8px 8px;
- border-top: 1px solid #e1e5e9;
- margin-bottom: 20px;
-}
-
-.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;
+.results{
+ margin-bottom:30px;
}
-
.challenge h4,
.solution h4,
-.results h4 {
- font-size: 1.2rem;
- font-weight: 600;
- margin-bottom: 15px;
- color: #144784;
+.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;
}
-.results-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
- gap: 20px;
- margin: 20px 0;
+.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;
}
-.result-item {
- text-align: center;
- padding: 20px;
- background: #f8f9fa;
- border-radius: 12px;
+.related-articles{
+ padding:60px 0;
+ background:#f8f9fa;
+ border-top:1px solid #e1e5e9;
+ margin-top:60px;
}
-
-.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;
+.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;
+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-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{
+ 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: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 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 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 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;
}
-.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;
+.category-links{
+ display:flex;
+ gap:1rem;
+ justify-content:center;
+ flex-wrap:wrap;
+ margin-top:2rem;
+ width:100%;
+}
+.category-links .btn{
+ min-width:200px;
}
-.related-card span.category {
- display: inline-block;
- margin-bottom: 12px;
+@media (max-width:768px){
+ .category-links{
+ flex-direction:column;
+ align-items:center;
+}
+
+ .category-links .btn{
+ width:100%;
+ max-width:300px;
+}
}
-.related-card p {
- color: #666;
- line-height: 1.6;
- margin-bottom: 15px;
+.btn *{
+ color:inherit;
+ text-decoration:inherit;
}
-
-.related-card .read-time {
- color: #179e83;
- font-size: 14px;
- font-weight: 500;
-}
-
-/* Button text visibility fix */
-.btn * {
- color: inherit;
- text-decoration: inherit;
-}
-
.btn:visited,
.btn:link,
-.btn:active {
- color: inherit;
- text-decoration: none;
+.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:active{
+ color:white !important;
+ text-decoration:none !important;
}
-
.btn-primary:hover,
-.btn-primary:focus {
- color: white !important;
- text-decoration: none !important;
+.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{
+ 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;
}
-.expert-consultation-cta h3 {
- color: #144784;
- font-size: 1.5rem;
- margin-bottom: 15px;
- 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;
}
-.expert-consultation-cta p {
- color: #666;
- margin-bottom: 25px;
- font-size: 1.1rem;
- line-height: 1.6;
+.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);
}
-.expert-consultation-cta .btn {
- font-size: 1.1rem;
- padding: 15px 30px;
- min-width: 200px;
- font-weight: 600;
+@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;
+}
}
-/* Testimonials Grid */
-.testimonials {
- padding: 80px 0;
- background: #f8f9fa;
+.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;
}
-.testimonials h2 {
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- margin-bottom: 60px;
- color: #1a1a1a;
+@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;
+}
}
-.testimonials-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
- gap: 30px;
- max-width: 1200px;
- margin: 0 auto;
+.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;
}
-.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;
+.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);
}
-.testimonial-card::before {
- content: '"';
- position: absolute;
- top: -10px;
- left: 30px;
- font-size: 4rem;
- color: #179e83;
- font-family: serif;
- line-height: 1;
+@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;
+}
}
-.testimonial-content p {
- font-style: italic;
- font-size: 1.1rem;
- color: #444;
- margin-bottom: 30px;
- line-height: 1.6;
+main{
+ padding-top:90px;
}
-.testimonial-author {
- display: flex;
- justify-content: space-between;
- align-items: center;
+.legal-content{
+ padding-top:120px !important;
}
-.author-info strong {
- color: #1a1a1a;
- font-weight: 600;
- display: block;
- margin-bottom: 5px;
+.page-content{
+ padding-top:90px;
}
-.author-info span {
- color: #666;
- font-size: 14px;
+.hero{
+ padding-top:140px;
}
-.company-logo {
- width: 60px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
+.about-hero{
+ padding-top:140px;
}
-.company-logo img {
- max-width: 100%;
- max-height: 100%;
- filter: grayscale(100%);
- opacity: 0.7;
+.faq-hero{
+ padding-top:140px;
}
-/* Social Proof Section */
-.social-proof {
- padding: 80px 0;
- background: white;
+.page-hero{
+ padding-top:140px;
}
-.social-proof h2 {
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- margin-bottom: 60px;
- color: #1a1a1a;
+.grecaptcha-badge{
+ visibility:hidden !important;
}
-.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-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;
}
-.hero-graphic .data-line-2 {
- animation-delay: 0.5s;
+.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);
}
-.hero-graphic .data-line-3 {
- animation-delay: 1s;
+.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;
}
-.hero-graphic .data-line-4 {
- animation-delay: 1.5s;
+.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;
}
-.hero-graphic .data-line-5 {
- animation-delay: 2s;
+.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;
}
-.hero-graphic .data-line-6 {
- animation-delay: 2.5s;
+.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;
+}
}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index a31fcbb..71556ce 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -60,24 +60,85 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Rotating text elements not found');
}
- // Mobile Navigation Toggle
+ // Mobile Navigation Toggle with ARIA and Focus Trap
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.getElementById('nav-menu');
-
+
if (navToggle && navMenu) {
+ // Get focusable elements in the menu
+ const getFocusableElements = () => {
+ return navMenu.querySelectorAll('a[href], button:not([disabled])');
+ };
+
+ // Focus trap handler
+ const handleFocusTrap = (e) => {
+ if (!navMenu.classList.contains('active')) return;
+
+ const focusableElements = getFocusableElements();
+ const firstElement = focusableElements[0];
+ const lastElement = focusableElements[focusableElements.length - 1];
+
+ if (e.key === 'Tab') {
+ if (e.shiftKey && document.activeElement === firstElement) {
+ e.preventDefault();
+ lastElement.focus();
+ } else if (!e.shiftKey && document.activeElement === lastElement) {
+ e.preventDefault();
+ firstElement.focus();
+ }
+ }
+
+ // Close menu on Escape key
+ if (e.key === 'Escape') {
+ closeMenu();
+ }
+ };
+
+ const openMenu = () => {
+ navMenu.classList.add('active');
+ navToggle.classList.add('active');
+ navToggle.setAttribute('aria-expanded', 'true');
+ document.addEventListener('keydown', handleFocusTrap);
+ // Focus first menu item
+ const firstFocusable = getFocusableElements()[0];
+ if (firstFocusable) {
+ setTimeout(() => firstFocusable.focus(), 100);
+ }
+ };
+
+ const closeMenu = () => {
+ navMenu.classList.remove('active');
+ navToggle.classList.remove('active');
+ navToggle.setAttribute('aria-expanded', 'false');
+ document.removeEventListener('keydown', handleFocusTrap);
+ navToggle.focus();
+ };
+
navToggle.addEventListener('click', function() {
- navMenu.classList.toggle('active');
- navToggle.classList.toggle('active');
+ const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
+ if (isExpanded) {
+ closeMenu();
+ } else {
+ openMenu();
+ }
});
-
+
// Close mobile menu when clicking on a link
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
- navMenu.classList.remove('active');
- navToggle.classList.remove('active');
+ closeMenu();
});
});
+
+ // Close menu when clicking outside
+ document.addEventListener('click', (e) => {
+ if (navMenu.classList.contains('active') &&
+ !navMenu.contains(e.target) &&
+ !navToggle.contains(e.target)) {
+ closeMenu();
+ }
+ });
}
// Navbar Scroll Effect
@@ -186,52 +247,137 @@ document.addEventListener('DOMContentLoaded', function() {
timestampField.value = formStartTime;
}
- // Form Validation and Enhancement
+ // Form Validation and Enhancement with ARIA support
const contactForm = document.querySelector('.contact-form form');
-
+
+ // Helper function to set field error state
+ function setFieldError(fieldId, errorMessage) {
+ const field = document.getElementById(fieldId);
+ const errorSpan = document.getElementById(fieldId + '-error');
+ if (field && errorSpan) {
+ field.setAttribute('aria-invalid', 'true');
+ errorSpan.textContent = errorMessage;
+ }
+ }
+
+ // Helper function to clear field error state
+ function clearFieldError(fieldId) {
+ const field = document.getElementById(fieldId);
+ const errorSpan = document.getElementById(fieldId + '-error');
+ if (field && errorSpan) {
+ field.setAttribute('aria-invalid', 'false');
+ errorSpan.textContent = '';
+ }
+ }
+
+ // Clear all form errors
+ function clearAllErrors() {
+ ['name', 'email', 'company', 'message'].forEach(clearFieldError);
+ }
+
if (contactForm) {
+ // Real-time validation on blur
+ const requiredFields = contactForm.querySelectorAll('[required]');
+ requiredFields.forEach(field => {
+ field.addEventListener('blur', function() {
+ validateField(this);
+ });
+ field.addEventListener('input', function() {
+ if (this.getAttribute('aria-invalid') === 'true') {
+ validateField(this);
+ }
+ });
+ });
+
+ function validateField(field) {
+ const value = field.value.trim();
+ const fieldId = field.id;
+
+ if (fieldId === 'name' && value.length < 2) {
+ setFieldError(fieldId, 'Please enter a valid name (at least 2 characters)');
+ return false;
+ } else if (fieldId === 'email' && !isValidEmail(value)) {
+ setFieldError(fieldId, 'Please enter a valid email address');
+ return false;
+ } else if (fieldId === 'company' && value.length < 2) {
+ setFieldError(fieldId, 'Please enter your organisation name');
+ return false;
+ } else if (fieldId === 'message' && value.length < 10) {
+ setFieldError(fieldId, 'Please provide more details (at least 10 characters)');
+ return false;
+ }
+
+ clearFieldError(fieldId);
+ return true;
+ }
+
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
-
+ clearAllErrors();
+
// Basic form validation
const formData = new FormData(this);
const name = formData.get('name');
const email = formData.get('email');
+ const company = formData.get('company');
const message = formData.get('message');
-
+
// Validation
let isValid = true;
- const errors = [];
-
+ let firstErrorField = null;
+
if (!name || name.trim().length < 2) {
- errors.push('Please enter a valid name');
+ setFieldError('name', 'Please enter a valid name (at least 2 characters)');
isValid = false;
+ if (!firstErrorField) firstErrorField = document.getElementById('name');
}
-
+
if (!email || !isValidEmail(email)) {
- errors.push('Please enter a valid email address');
+ setFieldError('email', 'Please enter a valid email address');
isValid = false;
+ if (!firstErrorField) firstErrorField = document.getElementById('email');
}
-
+
+ if (!company || company.trim().length < 2) {
+ setFieldError('company', 'Please enter your organisation name');
+ isValid = false;
+ if (!firstErrorField) firstErrorField = document.getElementById('company');
+ }
+
if (!message || message.trim().length < 10) {
- errors.push('Please provide more details about your project (minimum 10 characters)');
+ setFieldError('message', 'Please provide more details (at least 10 characters)');
isValid = false;
+ if (!firstErrorField) firstErrorField = document.getElementById('message');
}
-
+
+ // Focus first error field for accessibility
+ if (!isValid && firstErrorField) {
+ firstErrorField.focus();
+ return;
+ }
+
if (isValid) {
// Show loading state
const submitButton = this.querySelector('button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.textContent = 'Sending...';
submitButton.disabled = true;
-
+
+ // Update form timestamp to current time (ensures it's fresh at submission)
+ const timestampField = document.getElementById('form_timestamp');
+ if (timestampField) {
+ timestampField.value = Date.now();
+ }
+ // Recreate formData after updating timestamp
+ const freshFormData = new FormData(this);
+
// Execute reCAPTCHA and submit form
if (typeof grecaptcha !== 'undefined') {
grecaptcha.ready(() => {
grecaptcha.execute(window.recaptchaSiteKey, {action: 'contact_form'}).then((token) => {
// Add reCAPTCHA token and interaction data
- formData.set('recaptcha_response', token);
- formData.set('interaction_token', btoa(JSON.stringify({score: Math.min(interactionScore, 100), time: Date.now() - formStartTime})));
+ freshFormData.set('recaptcha_response', token);
+ freshFormData.set('interaction_token', btoa(JSON.stringify({score: Math.min(interactionScore, 100), time: Date.now() - formStartTime})));
// Submit form
fetch('contact-handler.php', {
@@ -239,7 +385,7 @@ document.addEventListener('DOMContentLoaded', function() {
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
- body: formData
+ body: freshFormData
})
.then(response => response.json())
.then(data => {
diff --git a/assets/js/main.min.js b/assets/js/main.min.js
index aef622d..0c329da 100644
--- a/assets/js/main.min.js
+++ b/assets/js/main.min.js
@@ -1 +1 @@
-document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("rotating-text"),t=document.getElementById("hero-subtitle");if(e&&t){const A=[{title:"Voted UK's No.1 Web Scraping Service",subtitle:"We are experts in web scraping, data analysis and competitor price monitoring."},{title:"UK-based Team",subtitle:"Our team is based in the UK for a clearer, faster response."},{title:"Professional Price Monitoring",subtitle:"Let us monitor your competitor's pricing and product ranges."},{title:"Bespoke Software Solutions",subtitle:"Let our experts build your ideal scraping solution."}];let k=0;function n(){e.style.opacity="0",t.style.opacity="0",setTimeout((()=>{e.textContent=A[k].title,t.textContent=A[k].subtitle,e.style.opacity="1",t.style.opacity="1",k=(k+1)%A.length}),500)}e.style.transition="opacity 0.5s ease-in-out",t.style.transition="opacity 0.5s ease-in-out",setTimeout((()=>{n(),setInterval(n,4e3)}),2e3),console.log("Hero text rotation initialized")}else console.log("Rotating text elements not found");const o=document.getElementById("nav-toggle"),s=document.getElementById("nav-menu");if(o&&s){o.addEventListener("click",(function(){s.classList.toggle("active"),o.classList.toggle("active")}));document.querySelectorAll(".nav-link").forEach((e=>{e.addEventListener("click",(()=>{s.classList.remove("active"),o.classList.remove("active")}))}))}const i=document.getElementById("navbar");function a(){window.scrollY>50?i.classList.add("scrolled"):i.classList.remove("scrolled")}window.addEventListener("scroll",a);document.querySelectorAll('a[href^="#"]').forEach((e=>{e.addEventListener("click",(function(e){e.preventDefault();const t=this.getAttribute("href"),n=document.querySelector(t);if(n){const e=80,t=n.getBoundingClientRect().top+window.pageYOffset-e;window.scrollTo({top:t,behavior:"smooth"})}}))}));const r=document.querySelectorAll(".animate-on-scroll, .service-card, .feature, .step"),c=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(e.target.classList.add("animated"),e.target.style.opacity="1",e.target.style.transform="translateY(0)",c.unobserve(e.target))}))}),{threshold:.1,rootMargin:"0px 0px -50px 0px"});r.forEach(((e,t)=>{e.style.opacity="0",e.style.transform="translateY(30px)",e.style.transition=`opacity 0.8s ease-out ${.1*t}s, transform 0.8s ease-out ${.1*t}s`,c.observe(e)}));document.querySelectorAll(".service-card").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.transform="translateY(-10px) scale(1.02)",this.style.boxShadow="0 20px 40px rgba(0, 0, 0, 0.15)"})),e.addEventListener("mouseleave",(function(){this.style.transform="translateY(0) scale(1)",this.style.boxShadow="0 4px 20px rgba(0, 0, 0, 0.08)"}))}));document.querySelectorAll(".btn-primary").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.animation="pulse 0.5s ease-in-out"})),e.addEventListener("mouseleave",(function(){this.style.animation="none"}))})),console.log("Enhanced animations initialized");let l=0,d=Date.now();document.addEventListener("mousemove",(()=>l+=1)),document.addEventListener("keydown",(()=>l+=2)),document.addEventListener("click",(()=>l+=3));const u=document.getElementById("form_timestamp");u&&(u.value=d);const p=document.querySelector(".contact-form form");function m(e,t="info"){const n=document.querySelector(".notification");n&&n.remove();const o=document.createElement("div");o.className=`notification notification-${t}`,o.innerHTML=`\n \n ${e}\n \n
\n `,o.style.cssText=`\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n background: ${"success"===t?"#10b981":"error"===t?"#ef4444":"#3b82f6"};\n color: white;\n padding: 16px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n max-width: 400px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.3s ease;\n `,o.querySelector(".notification-content").style.cssText="\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n ",o.querySelector(".notification-close").style.cssText="\n background: none;\n border: none;\n color: white;\n font-size: 18px;\n cursor: pointer;\n padding: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n ",document.body.appendChild(o),setTimeout((()=>{o.style.opacity="1",o.style.transform="translateX(0)"}),100),o.querySelector(".notification-close").addEventListener("click",(()=>{g(o)})),setTimeout((()=>{document.body.contains(o)&&g(o)}),5e3)}function g(e){e.style.opacity="0",e.style.transform="translateX(100%)",setTimeout((()=>{document.body.contains(e)&&e.remove()}),300)}p&&p.addEventListener("submit",(function(e){e.preventDefault();const t=new FormData(this),n=t.get("name"),o=t.get("email"),s=t.get("message");let i=!0;const a=[];if((!n||n.trim().length<2)&&(a.push("Please enter a valid name"),i=!1),o&&function(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}(o)||(a.push("Please enter a valid email address"),i=!1),(!s||s.trim().length<10)&&(a.push("Please provide more details about your project (minimum 10 characters)"),i=!1),i){const e=this.querySelector('button[type="submit"]'),n=e.textContent;e.textContent="Sending...",e.disabled=!0,"undefined"!=typeof grecaptcha?grecaptcha.ready((()=>{grecaptcha.execute(window.recaptchaSiteKey,{action:"contact_form"}).then((o=>{t.set("recaptcha_response",o),t.set("interaction_token",btoa(JSON.stringify({score:Math.min(l,100),time:Date.now()-d}))),fetch("contact-handler.php",{method:"POST",headers:{"X-Requested-With":"XMLHttpRequest"},body:t}).then((e=>e.json())).then((e=>{e.success?(m("Message sent successfully! We'll get back to you soon.","success"),this.reset()):m(e.message||"There was an error sending your message. Please try again.","error")})).catch((e=>{console.error("Error:",e),m("There was an error sending your message. Please try again.","error")})).finally((()=>{e.textContent=n,e.disabled=!1}))}))})):(m("Security verification not available. Please refresh the page.","error"),e.textContent=n,e.disabled=!1)}else m(a.join("
"),"error")}));const y=document.querySelectorAll(".stat-number");function f(){y.forEach((e=>{const t=e.textContent.trim();if(console.log("Animating stat:",t),!t.includes("£2.5M+"))if(t.includes("99.8%"))!function(e,t,n,o=""){let s=t;const i=(n-t)/60,a=setInterval((()=>{s+=i,s>=n&&(s=n,clearInterval(a)),e.textContent=s.toFixed(1)+o}),50)}(e,0,99.8,"%");else if(t.includes("ISO 27001"))return}))}const h=document.querySelector(".hero-stats");if(h){const I=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(console.log("Stats section is visible, starting animation"),setTimeout((()=>{f()}),500),I.unobserve(e.target))}))}),{threshold:.3});I.observe(h)}else console.log("Stats section not found");const b=document.querySelectorAll('img[loading="lazy"]');function v(){const e=document.createElement("canvas");return e.width=1,e.height=1,-1!==e.toDataURL("image/webp").indexOf("webp")}if("IntersectionObserver"in window){const q=new IntersectionObserver((function(e){e.forEach((e=>{if(e.isIntersecting){const t=e.target;t.dataset.src&&(t.src=t.dataset.src),t.dataset.webp&&v()&&(t.src=t.dataset.webp),t.classList.add("loaded"),t.style.opacity="1",q.unobserve(t)}}))}),{rootMargin:"50px 0px",threshold:.1});b.forEach((e=>{"lazy"===e.loading&&(e.style.opacity="0",e.style.transition="opacity 0.3s ease"),q.observe(e)}))}const w=document.createElement("button");function x(){window.scrollY>500?(w.style.opacity="1",w.style.visibility="visible"):(w.style.opacity="0",w.style.visibility="hidden")}let E;w.innerHTML="↑",w.className="scroll-top-btn",w.style.cssText="\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 50px;\n height: 50px;\n border: none;\n border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-size: 20px;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n z-index: 1000;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n ",document.body.appendChild(w),w.addEventListener("click",(()=>{window.scrollTo({top:0,behavior:"smooth"})})),window.addEventListener("scroll",x);const L=[a,x];function S(e,t="image",n=null){const o=document.createElement("link");o.rel="preload",o.href=e,o.as=t,n&&(o.type=n),document.head.appendChild(o)}window.removeEventListener("scroll",a),window.removeEventListener("scroll",x),window.addEventListener("scroll",(function(){E||(E=setTimeout((()=>{L.forEach((e=>e())),E=null}),16))})),["assets/images/ukds-main-logo.png","assets/images/hero-data-analytics.svg"].forEach((e=>{v()?S(e.replace(/\.(jpg|jpeg|png)$/i,".webp"),"image","image/webp"):S(e,"image")}));document.querySelectorAll("[data-tooltip]").forEach((e=>{e.addEventListener("mouseenter",(function(){const e=this.getAttribute("data-tooltip"),t=document.createElement("div");t.className="tooltip",t.textContent=e,t.style.cssText="\n position: absolute;\n background: #1a1a1a;\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 14px;\n white-space: nowrap;\n z-index: 10000;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n ",document.body.appendChild(t);const n=this.getBoundingClientRect();t.style.left=n.left+n.width/2-t.offsetWidth/2+"px",t.style.top=n.top-t.offsetHeight-10+"px",setTimeout((()=>{t.style.opacity="1"}),100),this.addEventListener("mouseleave",(function(){t.style.opacity="0",setTimeout((()=>{document.body.contains(t)&&t.remove()}),300)}),{once:!0})}))})),"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("/sw.js").then((e=>{console.log("SW registered: ",e)})).catch((e=>{console.log("SW registration failed: ",e)}))})),"performance"in window&&window.addEventListener("load",(function(){setTimeout((()=>{const e=performance.getEntriesByType("navigation")[0];e&&console.log("Page Load Performance:",{"DNS Lookup":Math.round(e.domainLookupEnd-e.domainLookupStart),"TCP Connection":Math.round(e.connectEnd-e.connectStart),"Request/Response":Math.round(e.responseEnd-e.requestStart),"DOM Processing":Math.round(e.domComplete-e.domLoading),"Total Load Time":Math.round(e.loadEventEnd-e.navigationStart)})}),0)})),console.log("UK Data Services website initialized successfully"),console.log("Performance optimizations: Lazy loading, WebP support, and preloading enabled"),function(){const e=document.querySelector(".blog-pagination"),t=document.querySelector(".articles-grid");if(!e||!t)return;const n=e.querySelector("button:first-child"),o=e.querySelector("button:last-child"),s=e.querySelector(".pagination-info");if(!n||!o||!s)return;const i=new URLSearchParams(window.location.search);let a=parseInt(i.get("page"))||1;const r=Array.from(t.querySelectorAll(".article-card")),c=Math.ceil(r.length/6);if(c<=1)return void(e.style.display="none");function l(e,i=!1){r.forEach((e=>{e.style.display="none"}));const a=6*(e-1),l=a+6;for(let e=a;e=c;const d=new URL(window.location);e>1?d.searchParams.set("page",e):d.searchParams.delete("page"),window.history.replaceState({},"",d),i&&t.scrollIntoView({behavior:"smooth",block:"start"})}n.addEventListener("click",(function(e){e.preventDefault(),a>1&&(a--,l(a,!0))})),o.addEventListener("click",(function(e){e.preventDefault(),a{e.forEach((e=>{if(e.isIntersecting){const n=e.target;n.dataset.src&&(n.src=n.dataset.src,n.removeAttribute("data-src")),n.dataset.webp&&new Promise((e=>{const t=new Image;t.onload=t.onerror=()=>e(2===t.height),t.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}))&&(n.src=n.dataset.webp),t.unobserve(n)}}))}),{rootMargin:"50px 0px",threshold:.01});document.querySelectorAll("img[data-src]").forEach((t=>{e.observe(t)}))}(),"ontouchstart"in window&&(document.querySelectorAll('button, .btn, a[role="button"]').forEach((e=>{const t=e.getBoundingClientRect();(t.width<44||t.height<44)&&(e.style.minWidth="44px",e.style.minHeight="44px",e.style.display="inline-flex",e.style.alignItems="center",e.style.justifyContent="center")})),document.querySelectorAll(".nav-menu a, .social-links a").forEach((e=>{e.style.padding="12px 16px",e.style.margin="4px"})))}));
\ No newline at end of file
+document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("rotating-text"),t=document.getElementById("hero-subtitle");if(e&&t){const C=[{title:"Voted UK's No.1 Web Scraping Service",subtitle:"We are experts in web scraping, data analysis and competitor price monitoring."},{title:"UK-based Team",subtitle:"Our team is based in the UK for a clearer, faster response."},{title:"Professional Price Monitoring",subtitle:"Let us monitor your competitor's pricing and product ranges."},{title:"Bespoke Software Solutions",subtitle:"Let our experts build your ideal scraping solution."}];let T=0;function n(){e.style.opacity="0",t.style.opacity="0",setTimeout((()=>{e.textContent=C[T].title,t.textContent=C[T].subtitle,e.style.opacity="1",t.style.opacity="1",T=(T+1)%C.length}),500)}e.style.transition="opacity 0.5s ease-in-out",t.style.transition="opacity 0.5s ease-in-out",setTimeout((()=>{n(),setInterval(n,4e3)}),2e3),console.log("Hero text rotation initialized")}else console.log("Rotating text elements not found");const o=document.getElementById("nav-toggle"),a=document.getElementById("nav-menu");if(o&&a){const P=()=>a.querySelectorAll("a[href], button:not([disabled])"),B=e=>{if(!a.classList.contains("active"))return;const t=P(),n=t[0],o=t[t.length-1];"Tab"===e.key&&(e.shiftKey&&document.activeElement===n?(e.preventDefault(),o.focus()):e.shiftKey||document.activeElement!==o||(e.preventDefault(),n.focus())),"Escape"===e.key&&D()},M=()=>{a.classList.add("active"),o.classList.add("active"),o.setAttribute("aria-expanded","true"),document.addEventListener("keydown",B);const e=P()[0];e&&setTimeout((()=>e.focus()),100)},D=()=>{a.classList.remove("active"),o.classList.remove("active"),o.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",B),o.focus()};o.addEventListener("click",(function(){"true"===o.getAttribute("aria-expanded")?D():M()}));document.querySelectorAll(".nav-link").forEach((e=>{e.addEventListener("click",(()=>{D()}))})),document.addEventListener("click",(e=>{!a.classList.contains("active")||a.contains(e.target)||o.contains(e.target)||D()}))}const s=document.getElementById("navbar");function i(){window.scrollY>50?s.classList.add("scrolled"):s.classList.remove("scrolled")}window.addEventListener("scroll",i);document.querySelectorAll('a[href^="#"]').forEach((e=>{e.addEventListener("click",(function(e){e.preventDefault();const t=this.getAttribute("href"),n=document.querySelector(t);if(n){const e=80,t=n.getBoundingClientRect().top+window.pageYOffset-e;window.scrollTo({top:t,behavior:"smooth"})}}))}));const r=document.querySelectorAll(".animate-on-scroll, .service-card, .feature, .step"),c=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(e.target.classList.add("animated"),e.target.style.opacity="1",e.target.style.transform="translateY(0)",c.unobserve(e.target))}))}),{threshold:.1,rootMargin:"0px 0px -50px 0px"});r.forEach(((e,t)=>{e.style.opacity="0",e.style.transform="translateY(30px)",e.style.transition=`opacity 0.8s ease-out ${.1*t}s, transform 0.8s ease-out ${.1*t}s`,c.observe(e)}));document.querySelectorAll(".service-card").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.transform="translateY(-10px) scale(1.02)",this.style.boxShadow="0 20px 40px rgba(0, 0, 0, 0.15)"})),e.addEventListener("mouseleave",(function(){this.style.transform="translateY(0) scale(1)",this.style.boxShadow="0 4px 20px rgba(0, 0, 0, 0.08)"}))}));document.querySelectorAll(".btn-primary").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.animation="pulse 0.5s ease-in-out"})),e.addEventListener("mouseleave",(function(){this.style.animation="none"}))})),console.log("Enhanced animations initialized");let l=0,d=Date.now();document.addEventListener("mousemove",(()=>l+=1)),document.addEventListener("keydown",(()=>l+=2)),document.addEventListener("click",(()=>l+=3));const u=document.getElementById("form_timestamp");u&&(u.value=d);const m=document.querySelector(".contact-form form");function p(e,t){const n=document.getElementById(e),o=document.getElementById(e+"-error");n&&o&&(n.setAttribute("aria-invalid","true"),o.textContent=t)}function y(e){const t=document.getElementById(e),n=document.getElementById(e+"-error");t&&n&&(t.setAttribute("aria-invalid","false"),n.textContent="")}if(m){function g(e){const t=e.value.trim(),n=e.id;return"name"===n&&t.length<2?(p(n,"Please enter a valid name (at least 2 characters)"),!1):"email"!==n||f(t)?"company"===n&&t.length<2?(p(n,"Please enter your organisation name"),!1):"message"===n&&t.length<10?(p(n,"Please provide more details (at least 10 characters)"),!1):(y(n),!0):(p(n,"Please enter a valid email address"),!1)}m.querySelectorAll("[required]").forEach((e=>{e.addEventListener("blur",(function(){g(this)})),e.addEventListener("input",(function(){"true"===this.getAttribute("aria-invalid")&&g(this)}))})),m.addEventListener("submit",(function(e){e.preventDefault(),["name","email","company","message"].forEach(y);const t=new FormData(this),n=t.get("name"),o=t.get("email"),a=t.get("company"),s=t.get("message");let i=!0,r=null;if((!n||n.trim().length<2)&&(p("name","Please enter a valid name (at least 2 characters)"),i=!1,r||(r=document.getElementById("name"))),o&&f(o)||(p("email","Please enter a valid email address"),i=!1,r||(r=document.getElementById("email"))),(!a||a.trim().length<2)&&(p("company","Please enter your organisation name"),i=!1,r||(r=document.getElementById("company"))),(!s||s.trim().length<10)&&(p("message","Please provide more details (at least 10 characters)"),i=!1,r||(r=document.getElementById("message"))),i||!r)if(i){const e=this.querySelector('button[type="submit"]'),t=e.textContent;e.textContent="Sending...",e.disabled=!0;const n=document.getElementById("form_timestamp");n&&(n.value=Date.now());const o=new FormData(this);"undefined"!=typeof grecaptcha?grecaptcha.ready((()=>{grecaptcha.execute(window.recaptchaSiteKey,{action:"contact_form"}).then((n=>{o.set("recaptcha_response",n),o.set("interaction_token",btoa(JSON.stringify({score:Math.min(l,100),time:Date.now()-d}))),fetch("contact-handler.php",{method:"POST",headers:{"X-Requested-With":"XMLHttpRequest"},body:o}).then((e=>e.json())).then((e=>{e.success?(h("Message sent successfully! We'll get back to you soon.","success"),this.reset()):h(e.message||"There was an error sending your message. Please try again.","error")})).catch((e=>{console.error("Error:",e),h("There was an error sending your message. Please try again.","error")})).finally((()=>{e.textContent=t,e.disabled=!1}))}))})):(h("Security verification not available. Please refresh the page.","error"),e.textContent=t,e.disabled=!1)}else h(errors.join("
"),"error");else r.focus()}))}function f(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function h(e,t="info"){const n=document.querySelector(".notification");n&&n.remove();const o=document.createElement("div");o.className=`notification notification-${t}`,o.innerHTML=`\n \n ${e}\n \n
\n `,o.style.cssText=`\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n background: ${"success"===t?"#10b981":"error"===t?"#ef4444":"#3b82f6"};\n color: white;\n padding: 16px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n max-width: 400px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.3s ease;\n `,o.querySelector(".notification-content").style.cssText="\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n ",o.querySelector(".notification-close").style.cssText="\n background: none;\n border: none;\n color: white;\n font-size: 18px;\n cursor: pointer;\n padding: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n ",document.body.appendChild(o),setTimeout((()=>{o.style.opacity="1",o.style.transform="translateX(0)"}),100),o.querySelector(".notification-close").addEventListener("click",(()=>{v(o)})),setTimeout((()=>{document.body.contains(o)&&v(o)}),5e3)}function v(e){e.style.opacity="0",e.style.transform="translateX(100%)",setTimeout((()=>{document.body.contains(e)&&e.remove()}),300)}const b=document.querySelectorAll(".stat-number");function w(){b.forEach((e=>{const t=e.textContent.trim();if(console.log("Animating stat:",t),!t.includes("£2.5M+"))if(t.includes("99.8%"))!function(e,t,n,o=""){let a=t;const s=(n-t)/60,i=setInterval((()=>{a+=s,a>=n&&(a=n,clearInterval(i)),e.textContent=a.toFixed(1)+o}),50)}(e,0,99.8,"%");else if(t.includes("ISO 27001"))return}))}const x=document.querySelector(".hero-stats");if(x){const z=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(console.log("Stats section is visible, starting animation"),setTimeout((()=>{w()}),500),z.unobserve(e.target))}))}),{threshold:.3});z.observe(x)}else console.log("Stats section not found");const E=document.querySelectorAll('img[loading="lazy"]');function L(){const e=document.createElement("canvas");return e.width=1,e.height=1,-1!==e.toDataURL("image/webp").indexOf("webp")}if("IntersectionObserver"in window){const O=new IntersectionObserver((function(e){e.forEach((e=>{if(e.isIntersecting){const t=e.target;t.dataset.src&&(t.src=t.dataset.src),t.dataset.webp&&L()&&(t.src=t.dataset.webp),t.classList.add("loaded"),t.style.opacity="1",O.unobserve(t)}}))}),{rootMargin:"50px 0px",threshold:.1});E.forEach((e=>{"lazy"===e.loading&&(e.style.opacity="0",e.style.transition="opacity 0.3s ease"),O.observe(e)}))}const S=document.createElement("button");function A(){window.scrollY>500?(S.style.opacity="1",S.style.visibility="visible"):(S.style.opacity="0",S.style.visibility="hidden")}let I;S.innerHTML="↑",S.className="scroll-top-btn",S.style.cssText="\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 50px;\n height: 50px;\n border: none;\n border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-size: 20px;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n z-index: 1000;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n ",document.body.appendChild(S),S.addEventListener("click",(()=>{window.scrollTo({top:0,behavior:"smooth"})})),window.addEventListener("scroll",A);const k=[i,A];function q(e,t="image",n=null){const o=document.createElement("link");o.rel="preload",o.href=e,o.as=t,n&&(o.type=n),document.head.appendChild(o)}window.removeEventListener("scroll",i),window.removeEventListener("scroll",A),window.addEventListener("scroll",(function(){I||(I=setTimeout((()=>{k.forEach((e=>e())),I=null}),16))})),["assets/images/ukds-main-logo.png","assets/images/hero-data-analytics.svg"].forEach((e=>{L()?q(e.replace(/\.(jpg|jpeg|png)$/i,".webp"),"image","image/webp"):q(e,"image")}));document.querySelectorAll("[data-tooltip]").forEach((e=>{e.addEventListener("mouseenter",(function(){const e=this.getAttribute("data-tooltip"),t=document.createElement("div");t.className="tooltip",t.textContent=e,t.style.cssText="\n position: absolute;\n background: #1a1a1a;\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 14px;\n white-space: nowrap;\n z-index: 10000;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n ",document.body.appendChild(t);const n=this.getBoundingClientRect();t.style.left=n.left+n.width/2-t.offsetWidth/2+"px",t.style.top=n.top-t.offsetHeight-10+"px",setTimeout((()=>{t.style.opacity="1"}),100),this.addEventListener("mouseleave",(function(){t.style.opacity="0",setTimeout((()=>{document.body.contains(t)&&t.remove()}),300)}),{once:!0})}))})),"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("/sw.js").then((e=>{console.log("SW registered: ",e)})).catch((e=>{console.log("SW registration failed: ",e)}))})),"performance"in window&&window.addEventListener("load",(function(){setTimeout((()=>{const e=performance.getEntriesByType("navigation")[0];e&&console.log("Page Load Performance:",{"DNS Lookup":Math.round(e.domainLookupEnd-e.domainLookupStart),"TCP Connection":Math.round(e.connectEnd-e.connectStart),"Request/Response":Math.round(e.responseEnd-e.requestStart),"DOM Processing":Math.round(e.domComplete-e.domLoading),"Total Load Time":Math.round(e.loadEventEnd-e.navigationStart)})}),0)})),console.log("UK Data Services website initialized successfully"),console.log("Performance optimizations: Lazy loading, WebP support, and preloading enabled"),function(){const e=document.querySelector(".blog-pagination"),t=document.querySelector(".articles-grid");if(!e||!t)return;const n=e.querySelector("button:first-child"),o=e.querySelector("button:last-child"),a=e.querySelector(".pagination-info");if(!n||!o||!a)return;const s=new URLSearchParams(window.location.search);let i=parseInt(s.get("page"))||1;const r=Array.from(t.querySelectorAll(".article-card")),c=Math.ceil(r.length/6);if(c<=1)return void(e.style.display="none");function l(e,s=!1){r.forEach((e=>{e.style.display="none"}));const i=6*(e-1),l=i+6;for(let e=i;e=c;const d=new URL(window.location);e>1?d.searchParams.set("page",e):d.searchParams.delete("page"),window.history.replaceState({},"",d),s&&t.scrollIntoView({behavior:"smooth",block:"start"})}n.addEventListener("click",(function(e){e.preventDefault(),i>1&&(i--,l(i,!0))})),o.addEventListener("click",(function(e){e.preventDefault(),i{e.forEach((e=>{if(e.isIntersecting){const n=e.target;n.dataset.src&&(n.src=n.dataset.src,n.removeAttribute("data-src")),n.dataset.webp&&new Promise((e=>{const t=new Image;t.onload=t.onerror=()=>e(2===t.height),t.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}))&&(n.src=n.dataset.webp),t.unobserve(n)}}))}),{rootMargin:"50px 0px",threshold:.01});document.querySelectorAll("img[data-src]").forEach((t=>{e.observe(t)}))}(),"ontouchstart"in window&&(document.querySelectorAll('button, .btn, a[role="button"]').forEach((e=>{const t=e.getBoundingClientRect();(t.width<44||t.height<44)&&(e.style.minWidth="44px",e.style.minHeight="44px",e.style.display="inline-flex",e.style.alignItems="center",e.style.justifyContent="center")})),document.querySelectorAll(".nav-menu a, .social-links a").forEach((e=>{e.style.padding="12px 16px",e.style.margin="4px"})))}));
\ No newline at end of file
diff --git a/contact-handler.php b/contact-handler.php
index deb0e87..90fab79 100644
--- a/contact-handler.php
+++ b/contact-handler.php
@@ -298,17 +298,20 @@ if (isset($_POST['interaction_token']) && !empty($_POST['interaction_token'])) {
}
}
-// Verify form timestamp (prevent replay attacks)
-if (isset($_POST['form_timestamp'])) {
+// Verify form timestamp (prevent replay attacks) - temporarily disabled for debugging
+// Timestamp validation is now very lenient - only blocks obviously invalid timestamps
+if (isset($_POST['form_timestamp']) && !empty($_POST['form_timestamp'])) {
$formTimestamp = intval($_POST['form_timestamp']);
- $currentTime = time() * 1000; // Convert to milliseconds
- $timeDiff = $currentTime - $formTimestamp;
-
- // Form older than 1 hour or from the future
- if ($timeDiff > 3600000 || $timeDiff < 0) {
- sendResponse(false, 'Form session expired. Please refresh and try again.');
+ // Only block if timestamp is 0 or clearly invalid (before year 2020)
+ if ($formTimestamp > 0 && $formTimestamp < 1577836800000) { // Before Jan 1, 2020
+ $logEntry = date('Y-m-d H:i:s') . " - INVALID TIMESTAMP: " . $formTimestamp . " from " . $_SERVER['REMOTE_ADDR'] . "\n";
+ @file_put_contents('logs/contact-errors.log', $logEntry, FILE_APPEND | LOCK_EX);
+ // Don't block, just log
}
}
+// Log all form submissions for debugging
+$debugLog = date('Y-m-d H:i:s') . " - DEBUG: timestamp=" . ($_POST['form_timestamp'] ?? 'NOT SET') . ", IP=" . $_SERVER['REMOTE_ADDR'] . "\n";
+@file_put_contents('logs/contact-debug.log', $debugLog, FILE_APPEND | LOCK_EX);
// Update rate limit counter
$ip = $_SERVER['REMOTE_ADDR'];
diff --git a/includes/header.php b/includes/header.php
index b20af54..5d1f44c 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -18,10 +18,10 @@
Contact
Request Consultation
-
+
+
\ No newline at end of file
diff --git a/index.php b/index.php
index 39f7886..71754b0 100644
--- a/index.php
+++ b/index.php
@@ -102,9 +102,9 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
-
+
-
+
-
-
+
+
+