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