/* tech-pages.css - Modern dark theme for technology pages */

:root {
  /* Updated colors to match style.css dark theme */
  --primary-color: #3498db;
  --primary-dark: #2980b9;
  --primary-light: #4dabf7;
  --primary-gradient: linear-gradient(135deg, #3498db, #2980b9);
  
  --secondary-color: #071c42;
  --secondary-dark: #05142f;
  --secondary-light: #173a9c;
  
  --success-color: #2ecc71;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  
  --text-dark: #f8f9fa;
  --text-medium: #e2e8f0;
  --text-muted: #a1a1aa;
  --text-light: #ffffff;
  
  --bg-light: #121212;
  --bg-lighter: #1e1e1e;
  --bg-dark: #0f0f10;
  
  --border-radius: 0.75rem;
  --border-radius-sm: 0.5rem;
  --border-radius-lg: 1rem;
  
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease-in-out;
  
  /* Technology-specific gradients - updated for darker theme */
  --k8s-gradient: linear-gradient(135deg, #070f1f, #173a9c);
  --docker-gradient: linear-gradient(135deg, #0DB7ED, #384D68);
  --terraform-gradient: linear-gradient(135deg, #7B42BC, #5E32AB);
  --aws-gradient: linear-gradient(135deg, #FF9900, #FFC400);
  --gcp-gradient: linear-gradient(135deg, #4285F4, #34A853);
  --ansible-gradient: linear-gradient(135deg, #EE0000, #CC0000);
  --ai-gradient: linear-gradient(135deg, #6366f1, #ec4899);
  --postgres-gradient: linear-gradient(135deg, #336791, #4B8BBE);
  --linux-gradient: linear-gradient(135deg, #FCC624, #FF9900);
  --jenkins-gradient: linear-gradient(135deg, #335061, #D33833);
  --prometheus-gradient: linear-gradient(135deg, #E6522C, #B30000);
  --grafana-gradient: linear-gradient(135deg, #FF9830, #F15A29);
  --redhat-gradient: linear-gradient(135deg, #CC0000, #820000);
  --github-gradient: linear-gradient(135deg, #2B3137, #404448);
  --bitbucket-gradient: linear-gradient(135deg, #0052CC, #2684FF);
  --gitlab-gradient: linear-gradient(135deg, #FCA326, #FC6D26);
  --mysql-gradient: linear-gradient(135deg, #00758F, #F29111);
  --nodejs-gradient: linear-gradient(135deg, #83CD29, #43853D);
  --python-gradient: linear-gradient(135deg, #FFD43B, #306998);
  --php-gradient: linear-gradient(135deg, #777BB3, #4F5B93);
  --apache-gradient: linear-gradient(135deg, #D22128, #8B0000);
  --mongodb-gradient: linear-gradient(135deg, #13AA52, #006548);
  --redis-gradient: linear-gradient(135deg, #DC382D, #A41E11);
  --vault-gradient: linear-gradient(135deg, #FFEC98, #F9C003);
  --argocd-gradient: linear-gradient(135deg, #2A62FF, #0039CB);
}

body {
  color: var(--text-dark);
  background-color: var(--bg-dark);
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  font-size: 16px;
  min-height: 100vh;
  position: relative;
}

/* Mouse move effect */
#mouse-move-effect {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Background gradients */
.background-gradients {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg-dark), rgba(15, 15, 16, 0.02), var(--bg-dark));
}

.gradient-blue {
  position: absolute;
  right: 0;
  top: 0;
  height: 500px;
  width: 500px;
  background-color: rgba(52, 152, 219, 0.1);
  filter: blur(100px);
}

.gradient-purple {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 500px;
  width: 500px;
  background-color: rgba(46, 204, 113, 0.1);
  filter: blur(100px);
}

section {
  padding: 5rem 0;
  position: relative;
}

/* ================ ANIMATIONS ================ */
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 0.8s ease-out 0.2s forwards;
}

.animate-slide-up-delay {
  opacity: 0;
  animation: slideUp 0.8s ease-out 0.4s forwards;
}

.pulse-animation {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moveBackground {
  0% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  25%, 75% {
    transform: translateY(-50px) translateX(30px);
  }
}

/* ================ SECTION HEADERS ================ */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.section-divider {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.section-divider span {
  height: 4px;
  width: 70px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* Technology-specific section divider colors */
.k8s-page .section-divider span { background: var(--k8s-gradient); }
.docker-page .section-divider span { background: var(--docker-gradient); }
.terraform-page .section-divider span { background: var(--terraform-gradient); }
.aws-page .section-divider span { background: var(--aws-gradient); }
.gcp-page .section-divider span { background: var(--gcp-gradient); }
.ansible-page .section-divider span { background: var(--ansible-gradient); }
.ai-page .section-divider span { background: var(--ai-gradient); }
.postgres-page .section-divider span { background: var(--postgres-gradient); }
.linux-page .section-divider span { background: var(--linux-gradient); }
.jenkins-page .section-divider span { background: var(--jenkins-gradient); }
.prometheus-page .section-divider span { background: var(--prometheus-gradient); }
.grafana-page .section-divider span { background: var(--grafana-gradient); }
.redhat-page .section-divider span { background: var(--redhat-gradient); }
.github-page .section-divider span { background: var(--github-gradient); }
.bitbucket-page .section-divider span { background: var(--bitbucket-gradient); }
.gitlab-page .section-divider span { background: var(--gitlab-gradient); }
.mysql-page .section-divider span { background: var(--mysql-gradient); }
.nodejs-page .section-divider span { background: var(--nodejs-gradient); }
.python-page .section-divider span { background: var(--python-gradient); }
.php-page .section-divider span { background: var(--php-gradient); }
.apache-page .section-divider span { background: var(--apache-gradient); }
.mongodb-page .section-divider span { background: var(--mongodb-gradient); }
.redis-page .section-divider span { background: var(--redis-gradient); }
.vault-page .section-divider span { background: var(--vault-gradient); }
.tech-banner.argocd-banner { background-image: var(--argocd-gradient); }

.section-description {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================ HERO BANNER ================ */
.tech-banner {
  width: 100%;
  min-height: 60vh;
  position: relative;
  background-image: var(--primary-gradient);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
  padding: 4rem 0;
}

/* Technology-specific banner backgrounds */
.tech-banner.k8s-banner { background-image: var(--k8s-gradient); }
.tech-banner.docker-banner { background-image: var(--docker-gradient); }
.tech-banner.terraform-banner { background-image: var(--terraform-gradient); }
.tech-banner.aws-banner { background-image: var(--aws-gradient); }
.tech-banner.gcp-banner { background-image: var(--gcp-gradient); }
.tech-banner.ansible-banner { background-image: var(--ansible-gradient); }
.tech-banner.ai-banner { background-image: var(--ai-gradient); }
.tech-banner.postgres-banner { background-image: var(--postgres-gradient); }
.tech-banner.linux-banner { background-image: var(--linux-gradient); }
.tech-banner.jenkins-banner { background-image: var(--jenkins-gradient); }
.tech-banner.prometheus-banner { background-image: var(--prometheus-gradient); }
.tech-banner.grafana-banner { background-image: var(--grafana-gradient); }
.tech-banner.redhat-banner { background-image: var(--redhat-gradient); }
.tech-banner.github-banner { background-image: var(--github-gradient); }
.tech-banner.bitbucket-banner { background-image: var(--bitbucket-gradient); }
.tech-banner.gitlab-banner { background-image: var(--gitlab-gradient); }
.tech-banner.mysql-banner { background-image: var(--mysql-gradient); }
.tech-banner.nodejs-banner { background-image: var(--nodejs-gradient); }
.tech-banner.python-banner { background-image: var(--python-gradient); }
.tech-banner.php-banner { background-image: var(--php-gradient); }
.tech-banner.apache-banner { background-image: var(--apache-gradient); }
.tech-banner.mongodb-banner { background-image: var(--mongodb-gradient); }
.tech-banner.redis-banner { background-image: var(--redis-gradient); }
.tech-banner.vault-banner { background-image: var(--vault-gradient); }
.argocd-page .section-divider span { background: var(--argocd-gradient); }

.tech-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(7, 28, 66, 0.95), rgba(7, 28, 66, 0.7));
  opacity: 0.8;
  z-index: 1;
  animation: moveBackground 60s linear infinite;
}

.tech-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 2rem;
}

.tech-icon {
  width: 130px;
  height: 130px;
  margin: 0 auto 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tech-icon img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  transition: var(--transition);
}

.tech-banner-content h1 {
  color: white;
  font-size: 3.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.5px;
  line-height: 1.1;
  background: linear-gradient(to bottom right, var(--text-light) 30%, rgba(255, 255, 255, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
}

.tech-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ================ KEY METRICS SECTION ================ */
.tech-metrics {
  margin-top: -60px;
  position: relative;
  z-index: 10;
  padding: 0;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 0;
}





.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  background-color: rgba(28, 37, 54, 0.95);
  border-color: rgba(77, 171, 247, 0.3);
}

.metric-card:hover::before {
  opacity: 1;
}

/* Make metric values more readable with solid colors instead of gradients */
.metric-value {
  font-size: 3.5rem;
  font-weight: 700;
  color: #ffffff; /* Solid white as base color */
  margin-bottom: 0.8rem;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
  -webkit-text-fill-color: initial; /* Override the transparent gradient fill */
}

/* Technology-specific metric value colors using solid bright colors */
.k8s-metrics .metric-value { color: #5ac8ff; } /* Brighter blue for Kubernetes */
.docker-metrics .metric-value { color: #0DB7ED; }
.terraform-metrics .metric-value { color: #a374e0; }
.aws-metrics .metric-value { color: #ffb84d; }
.gcp-metrics .metric-value { color: #66a5ff; }
.ansible-metrics .metric-value { color: #ff6666; }
.ai-metrics .metric-value { color: #8f90ff; }
.postgres-metrics .metric-value { color: #4f9ed6; }
.linux-metrics .metric-value { color: #ffdf80; }
.jenkins-metrics .metric-value { color: #D33833; }
.prometheus-metrics .metric-value { color: #E6522C; }
.grafana-metrics .metric-value { color: #FF9830; }
.redhat-metrics .metric-value { color: #CC0000; }
.github-metrics .metric-value { color: #6e788a; }
.bitbucket-metrics .metric-value { color: #2684FF; }
.gitlab-metrics .metric-value { color: #FC6D26; }
.mysql-metrics .metric-value { color: #00758F; }
.nodejs-metrics .metric-value { color: #83CD29; }
.python-metrics .metric-value { color: #FFD43B; }
.php-metrics .metric-value { color: #777BB3; }
.apache-metrics .metric-value { color: #D22128; }
.mongodb-metrics .metric-value { color: #13AA52; }
.redis-metrics .metric-value { color: #DC382D; }
.vault-metrics .metric-value { color: #F9C003; }
.argocd-metrics .metric-value { color: #4E7BFF; }

/* Enhance the metric cards for better visibility */
.metric-card {
  background: rgba(22, 28, 36, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(77, 171, 247, 0.2);
  transition: var(--transition);
}


/* Enhance the hover effect for metric cards */
.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(77, 171, 247, 0.2);
  background-color: rgba(28, 37, 54, 0.95);
  border-color: rgba(77, 171, 247, 0.4);
}
.k8s-metrics .metric-card::before { 
  background: var(--k8s-gradient);
}
.terraform-metrics .metric-card::before { 
  background: var(--terraform-gradient);
}
/* Make the metric label more readable */
.metric-label {
  font-size: 1.1rem;
  color: #e2e8f0; /* Lighter color for better contrast */
  font-weight: 500;
}

/* ================ SUCCESS STORIES SECTION ================ */
.tech-examples {
  background-color: var(--bg-dark);
  padding: 7rem 0;
  position: relative;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}

.example-card {
  background-color: var(--bg-lighter);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: 0;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.example-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(48, 46, 46, 0.3);
}

.example-tag {
  position: absolute;
  top: 7px; /* Move it up above the title */
  right: 1.5rem;
  padding: 0.4rem 1rem;
  background: var(--primary-gradient);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 30px;
  z-index: 3; /* Ensure it's above other elements */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Add shadow to separate it visually */
}

/* Technology-specific example tag colors */
.k8s-page .example-tag { background: var(--k8s-gradient); }
.docker-page .example-tag { background: var(--docker-gradient); }
.terraform-page .example-tag { background: var(--terraform-gradient); }
.aws-page .example-tag { background: var(--aws-gradient); }
.gcp-page .example-tag { background: var(--gcp-gradient); }
.ansible-page .example-tag { background: var(--ansible-gradient); }
.ai-page .example-tag { background: var(--ai-gradient); }
.postgres-page .example-tag { background: var(--postgres-gradient); }
.linux-page .example-tag { background: var(--linux-gradient); }
.jenkins-page .example-tag { background: var(--jenkins-gradient); }
.prometheus-page .example-tag { background: var(--prometheus-gradient); }
.grafana-page .example-tag { background: var(--grafana-gradient); }
.redhat-page .example-tag { background: var(--redhat-gradient); }
.github-page .example-tag { background: var(--github-gradient); }
.bitbucket-page .example-tag { background: var(--bitbucket-gradient); }
.gitlab-page .example-tag { background: var(--gitlab-gradient); }
.mysql-page .example-tag { background: var(--mysql-gradient); }
.nodejs-page .example-tag { background: var(--nodejs-gradient); }
.python-page .example-tag { background: var(--python-gradient); }
.php-page .example-tag { background: var(--php-gradient); }
.apache-page .example-tag { background: var(--apache-gradient); }
.mongodb-page .example-tag { background: var(--mongodb-gradient); }
.redis-page .example-tag { background: var(--redis-gradient); }
.vault-page .example-tag { background: var(--vault-gradient); }
.argocd-page .example-tag { background: var(--argocd-gradient); }

.example-card h3 {
  margin: 0;
  padding: 2rem 2.5rem;
  padding-top: 2.5rem; /* Extra padding at top to avoid tag overlap */
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.example-content {
  padding: 0 2.5rem 2.5rem;
}

.example-challenge,
.example-solution {
  margin-top: 2rem;
}

.example-challenge h4,
.example-solution h4,
.example-results h4 {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--text-light);
}

.example-challenge h4 i,
.example-solution h4 i,
.example-results h4 i {
  margin-right: 0.8rem;
  font-size: 1.1rem;
}

.example-challenge h4 i {
  color: var(--warning-color);
}

.example-solution h4 i {
  color: var(--primary-color);
}

.example-results h4 i {
  color: var(--success-color);
}

.example-challenge p,
.example-solution p {
  font-size: 1.05rem;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.example-solution ul {
  padding-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.example-solution ul li {
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
  color: var(--text-medium);
}

.example-results {
  margin-top: 2rem;
  background-color: rgba(22, 28, 36, 0.6);
  border-radius: var(--border-radius);
  padding: 2rem;
  border: 1px solid rgba(77, 171, 247, 0.1);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
}

.result-item {
  text-align: center;
}

.result-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff; /* Solid white text instead of gradient */
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Add shadow for better readability */
  -webkit-text-fill-color: initial; /* Override the transparent fill */
}

/* Technology-specific result number colors */
.k8s-page .result-number { color: #5ac8ff; }
.docker-page .result-number { color: #0DB7ED; }
.terraform-page .result-number { color: #a374e0; }
.aws-page .result-number { color: #ffb84d; }
.gcp-page .result-number { color: #66a5ff; }
.ansible-page .result-number { color: #ff6666; }
.ai-page .result-number { color: #8f90ff; }
.postgres-page .result-number { color: #4f9ed6; }
.linux-page .result-number { color: #ffdf80; }
.jenkins-page .result-number { color: #D33833; }
.prometheus-page .result-number { color: #E6522C; }
.grafana-page .result-number { color: #FF9830; }
.redhat-page .result-number { color: #CC0000; }
.github-page .result-number { color: #6e788a; }
.bitbucket-page .result-number { color: #2684FF; }
.gitlab-page .result-number { color: #FC6D26; }
.mysql-page .result-number { color: #00758F; }
.nodejs-page .result-number { color: #83CD29; }
.python-page .result-number { color: #FFD43B; }
.php-page .result-number { color: #777BB3; }
.apache-page .result-number { color: #D22128; }
.mongodb-page .result-number { color: #13AA52; }
.redis-page .result-number { color: #DC382D; }
.vault-page .result-number { color: #F9C003; }
.argocd-page .process-number  { background: var(--argocd-gradient); }

.result-text {
  display: block;
  font-size: 1rem;
  color: var(--text-medium);
  font-weight: 500;
}

.client-testimonial {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
}

.testimonial-quote {
  position: relative;
  padding-left: 2rem;
}

.testimonial-quote i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  color: rgba(77, 171, 247, 0.3);
}

/* Technology-specific quote icon colors */
.k8s-page .testimonial-quote i { color: rgba(50, 109, 230, 0.3); }
.docker-page .testimonial-quote i { color: rgba(13, 183, 237, 0.3); }
.terraform-page .testimonial-quote i { color: rgba(123, 66, 188, 0.3); }
.aws-page .testimonial-quote i { color: rgba(255, 153, 0, 0.3); }
.gcp-page .testimonial-quote i { color: rgba(66, 133, 244, 0.3); }
.ansible-page .testimonial-quote i { color: rgba(238, 0, 0, 0.3); }
.ai-page .testimonial-quote i { color: rgba(99, 102, 241, 0.3); }
.postgres-page .testimonial-quote i { color: rgba(51, 103, 145, 0.3); }
.linux-page .testimonial-quote i { color: rgba(252, 198, 36, 0.3); }
.jenkins-page .testimonial-quote i { color: rgba(211, 56, 51, 0.3); }
.prometheus-page .testimonial-quote i { color: rgba(230, 82, 44, 0.3); }
.grafana-page .testimonial-quote i { color: rgba(255, 152, 48, 0.3); }
.redhat-page .testimonial-quote i { color: rgba(204, 0, 0, 0.3); }
.github-page .testimonial-quote i { color: rgba(110, 120, 138, 0.3); }
.bitbucket-page .testimonial-quote i { color: rgba(38, 132, 255, 0.3); }
.gitlab-page .testimonial-quote i { color: rgba(252, 109, 38, 0.3); }
.mysql-page .testimonial-quote i { color: rgba(0, 117, 143, 0.3); }
.nodejs-page .testimonial-quote i { color: rgba(131, 205, 41, 0.3); }
.python-page .testimonial-quote i { color: rgba(48, 105, 152, 0.3); }
.php-page .testimonial-quote i { color: rgba(119, 123, 179, 0.3); }
.apache-page .testimonial-quote i { color: rgba(210, 33, 40, 0.3); }
.mongodb-page .testimonial-quote i { color: rgba(19, 170, 82, 0.3); }
.redis-page .testimonial-quote i { color: rgba(220, 56, 45, 0.3); }
.vault-page .testimonial-quote i { color: rgba(249, 192, 3, 0.3); }
.argocd-page .timeline-tools span { color: #4E7BFF; border-color: rgba(42, 98, 255, 0.2); }

.testimonial-quote p {
  font-size: 1.05rem;
  color: var(--text-medium);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.testimonial-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
  border: 2px solid var(--primary-color);
}

/* Technology-specific author image border colors */
.k8s-page .testimonial-author img { border-color: #326DE6; }
.docker-page .testimonial-author img { border-color: #0DB7ED; }
.terraform-page .testimonial-author img { border-color: #7B42BC; }
.aws-page .testimonial-author img { border-color: #FF9900; }
.gcp-page .testimonial-author img { border-color: #4285F4; }
.ansible-page .testimonial-author img { border-color: #EE0000; }
.ai-page .testimonial-author img { border-color: #6366f1; }
.postgres-page .testimonial-author img { border-color: #336791; }
.linux-page .testimonial-author img { border-color: #FCC624; }
.jenkins-page .testimonial-author img { border-color: #D33833; }
.prometheus-page .testimonial-author img { border-color: #E6522C; }
.grafana-page .testimonial-author img { border-color: #FF9830; }
.redhat-page .testimonial-author img { border-color: #CC0000; }
.github-page .testimonial-author img { border-color: #6e788a; }
.bitbucket-page .testimonial-author img { border-color: #2684FF; }
.gitlab-page .testimonial-author img { border-color: #FC6D26; }
.mysql-page .testimonial-author img { border-color: #00758F; }
.nodejs-page .testimonial-author img { border-color: #83CD29; }
.python-page .testimonial-author img { border-color: #306998; }
.php-page .testimonial-author img { border-color: #777BB3; }
.apache-page .testimonial-author img { border-color: #D22128; }
.mongodb-page .testimonial-author img { border-color: #13AA52; }
.redis-page .testimonial-author img { border-color: #DC382D; }
.vault-page .testimonial-author img { border-color: #F9C003; }

.testimonial-author h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
}

.testimonial-author span {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ================ IMPLEMENTATION APPROACH ================ */
.tech-implementation {
  background-color: var(--bg-lighter);
  padding: 7rem 0 5rem;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 4rem 0 2rem;
  padding-left: 80px;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-gradient);
  border-radius: 4px;
}

/* Technology-specific timeline colors */
.timeline-item {
  position: relative;
  margin-bottom: 3.5rem;
  padding: 2rem 2.5rem;
  background-color: var(--bg-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  border: 1px solid rgba(77, 171, 247, 0.1);
  transform: translateX(0);
}

.timeline-item:hover {
  transform: translateX(15px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(27, 61, 87, 0.3);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -60px;
  top: 2rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-gradient);
  box-shadow: 0 0 0 8px rgba(77, 171, 247, 0.2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Technology-specific timeline point colors */

.timeline-item::after {
  content: '';
  position: absolute;
  left: -36px;
  top: 2.5rem;
  width: 30px;
  height: 2px;
  background: rgba(77, 171, 247, 0.3);
}

.timeline-item h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-light);
  display: flex;
  align-items: center;
}

.process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary-gradient);
  border-radius: var(--border-radius-sm);
  color: white;
  font-size: 1rem;
  margin-right: 1rem;
  font-weight: 700;
}

/* Technology-specific process number colors */
.k8s-page .process-number { background: var(--k8s-gradient); }
.docker-page .process-number { background: var(--docker-gradient); }
.terraform-page .process-number { background: var(--terraform-gradient); }
.aws-page .process-number { background: var(--aws-gradient); }
.gcp-page .process-number { background: var(--gcp-gradient); }
.ansible-page .process-number { background: var(--ansible-gradient); }
.ai-page .process-number { background: var(--ai-gradient); }
.postgres-page .process-number { background: var(--postgres-gradient); }
.linux-page .process-number { background: var(--linux-gradient); }
.jenkins-page .process-number { background: var(--jenkins-gradient); }
.prometheus-page .process-number { background: var(--prometheus-gradient); }
.grafana-page .process-number { background: var(--grafana-gradient); }
.redhat-page .process-number { background: var(--redhat-gradient); }
.github-page .process-number { background: var(--github-gradient); }
.bitbucket-page .process-number { background: var(--bitbucket-gradient); }
.gitlab-page .process-number { background: var(--gitlab-gradient); }
.mysql-page .process-number { background: var(--mysql-gradient); }
.nodejs-page .process-number { background: var(--nodejs-gradient); }
.python-page .process-number { background: var(--python-gradient); }
.php-page .process-number { background: var(--php-gradient); }
.apache-page .process-number { background: var(--apache-gradient); }
.mongodb-page .process-number { background: var(--mongodb-gradient); }
.redis-page .process-number { background: var(--redis-gradient); }
.vault-page .process-number { background: var(--vault-gradient); }

.timeline-item p {
  font-size: 1.05rem;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.timeline-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.timeline-tools span {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background-color: rgba(77, 171, 247, 0.1);
  border-radius: 30px;
  font-size: 0.85rem;
  color: #4dabf7;
  font-weight: 450;
  transition: var(--transition-fast);
}

/* Technology-specific timeline tool colors */
.k8s-page .timeline-tools span { color: #4dabf7; border-color: rgba(77, 171, 247, 0.2); }
.docker-page .timeline-tools span { color: #0DB7ED; border-color: rgba(13, 183, 237, 0.2); }
.terraform-page .timeline-tools span { color: #7B42BC; border-color: rgba(123, 66, 188, 0.2); }
.aws-page .timeline-tools span { color: #FF9900; border-color: rgba(255, 153, 0, 0.2); }
.gcp-page .timeline-tools span { color: #4285F4; border-color: rgba(66, 133, 244, 0.2); }
.ansible-page .timeline-tools span { color: #EE0000; border-color: rgba(238, 0, 0, 0.2); }
.ai-page .timeline-tools span { color: #6366f1; border-color: rgba(99, 102, 241, 0.2); }
.postgres-page .timeline-tools span { color: #336791; border-color: rgba(51, 103, 145, 0.2); }
.linux-page .timeline-tools span { color: #FCC624; border-color: rgba(252, 198, 36, 0.2); }
.jenkins-page .timeline-tools span { color: #D33833; border-color: rgba(211, 56, 51, 0.2); }
.prometheus-page .timeline-tools span { color: #E6522C; border-color: rgba(230, 82, 44, 0.2); }
.grafana-page .timeline-tools span { color: #FF9830; border-color: rgba(255, 152, 48, 0.2); }
.redhat-page .timeline-tools span { color: #CC0000; border-color: rgba(204, 0, 0, 0.2); }
.github-page .timeline-tools span { color: #6e788a; border-color: rgba(110, 120, 138, 0.2); }
.bitbucket-page .timeline-tools span { color: #2684FF; border-color: rgba(38, 132, 255, 0.2); }
.gitlab-page .timeline-tools span { color: #FC6D26; border-color: rgba(252, 109, 38, 0.2); }
.mysql-page .timeline-tools span { color: #00758F; border-color: rgba(0, 117, 143, 0.2); }
.nodejs-page .timeline-tools span { color: #83CD29; border-color: rgba(131, 205, 41, 0.2); }
.python-page .timeline-tools span { color: #306998; border-color: rgba(48, 105, 152, 0.2); }
.php-page .timeline-tools span { color: #777BB3; border-color: rgba(119, 123, 179, 0.2); }
.apache-page .timeline-tools span { color: #D22128; border-color: rgba(210, 33, 40, 0.2); }
.mongodb-page .timeline-tools span { color: #13AA52; border-color: rgba(19, 170, 82, 0.2); }
.redis-page .timeline-tools span { color: #DC382D; border-color: rgba(220, 56, 45, 0.2); }
.vault-page .timeline-tools span { color: #F9C003; border-color: rgba(249, 192, 3, 0.2); }

.timeline-tools span:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  background-color: rgba(77, 171, 247, 0.2);
}

/* ================ BENEFITS SECTION ================ */
.tech-benefits {
  background-color: var(--bg-dark);
  padding: 7rem 0;
  position: relative;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.benefit-item {
  background: rgba(22, 28, 36, 0.8);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
  transition: var(--transition);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(77, 171, 247, 0.1);
}

.benefit-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(77, 171, 247, 0.3);
  background-color: rgba(28, 37, 54, 0.95);
}

.benefit-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  font-size: 1.8rem;
  box-shadow: 0 0 0 8px rgba(77, 171, 247, 0.1);
}

/* Technology-specific benefit icon colors */
/* .k8s-page .benefit-icon { background: var(--k8s-gradient); }
.docker-page .benefit-icon { background: var(--docker-gradient); }
.terraform-page .benefit-icon { background: var(--terraform-gradient); }
.aws-page .benefit-icon { background: var(--aws-gradient); }
.gcp-page .benefit-icon { background: var(--gcp-gradient); }
.ansible-page .benefit-icon { background: var(--ansible-gradient); }
.ai-page .benefit-icon { background: var(--ai-gradient); }
.postgres-page .benefit-icon { background: var(--postgres-gradient); }
.linux-page .benefit-icon { background: var(--linux-gradient); }
.jenkins-page .benefit-icon { background: var(--jenkins-gradient); }
.prometheus-page .benefit-icon { background: var(--prometheus-gradient); }
.grafana-page .benefit-icon { background: var(--grafana-gradient); }
.redhat-page .benefit-icon { background: var(--redhat-gradient); }
.github-page .benefit-icon { background: var(--github-gradient); }
.bitbucket-page .benefit-icon { background: var(--bitbucket-gradient); }
.gitlab-page .benefit-icon { background: var(--gitlab-gradient); }
.mysql-page .benefit-icon { background: var(--mysql-gradient); }
.nodejs-page .benefit-icon { background: var(--nodejs-gradient); }
.python-page .benefit-icon { background: var(--python-gradient); }
.php-page .benefit-icon { background: var(--php-gradient); }
.apache-page .benefit-icon { background: var(--apache-gradient); }
.mongodb-page .benefit-icon { background: var(--mongodb-gradient); }
.redis-page .benefit-icon { background: var(--redis-gradient); }
.vault-page .benefit-icon { background: var(--vault-gradient); } */

.benefit-item:hover .benefit-icon {
  box-shadow: 0 0 0 10px rgba(77, 171, 247, 0.2);
}

.benefit-item h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-light);
}

.benefit-item p {
  color: var(--text-medium);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ================ TEAM EXPERTISE SECTION ================ */
.tech-expertise {
  background-color: var(--bg-lighter);
  padding: 7rem 0;
  position: relative;
}

.expertise-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.expertise-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-medium);
  margin-bottom: 1.5rem;
}

.expertise-text h3 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-light);
  position: relative;
  display: inline-block;
}

.expertise-text h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--primary-gradient);
  border-radius: 2px;
}

/* Technology-specific expertise title underline colors */
/* .k8s-page .expertise-text h3::after { background: var(--k8s-gradient); }
.docker-page .expertise-text h3::after { background: var(--docker-gradient); }
.terraform-page .expertise-text h3::after { background: var(--terraform-gradient); }
.aws-page .expertise-text h3::after { background: var(--aws-gradient); }
.gcp-page .expertise-text h3::after { background: var(--gcp-gradient); }
.ansible-page .expertise-text h3::after { background: var(--ansible-gradient); }
.ai-page .expertise-text h3::after { background: var(--ai-gradient); }
.postgres-page .expertise-text h3::after { background: var(--postgres-gradient); }
.linux-page .expertise-text h3::after { background: var(--linux-gradient); }
.jenkins-page .expertise-text h3::after { background: var(--jenkins-gradient); }
.prometheus-page .expertise-text h3::after { background: var(--prometheus-gradient); }
.grafana-page .expertise-text h3::after { background: var(--grafana-gradient); }
.redhat-page .expertise-text h3::after { background: var(--redhat-gradient); }
.github-page .expertise-text h3::after { background: var(--github-gradient); }
.bitbucket-page .expertise-text h3::after { background: var(--bitbucket-gradient); }
.gitlab-page .expertise-text h3::after { background: var(--gitlab-gradient); }
.mysql-page .expertise-text h3::after { background: var(--mysql-gradient); }
.nodejs-page .expertise-text h3::after { background: var(--nodejs-gradient); }
.python-page .expertise-text h3::after { background: var(--python-gradient); }
.php-page .expertise-text h3::after { background: var(--php-gradient); }
.apache-page .expertise-text h3::after { background: var(--apache-gradient); }
.mongodb-page .expertise-text h3::after { background: var(--mongodb-gradient); }
.redis-page .expertise-text h3::after { background: var(--redis-gradient); }
.vault-page .expertise-text h3::after { background: var(--vault-gradient); } */

.expertise-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.expertise-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  color: var(--text-medium);
  position: relative;
  transition: var(--transition-fast);
  padding-left: 0.5rem;
}

.expertise-list li:hover {
  transform: translateX(5px);
  color: var(--text-light);
}

.expertise-list li i {
  color: var(--primary-color);
  margin-right: 1rem;
  min-width: 16px;
  margin-top: 5px;
}

/* Technology-specific list icon colors
.k8s-page .expertise-list li i { color: #4dabf7; }
.docker-page .expertise-list li i { color: #0DB7ED; }
.terraform-page .expertise-list li i { color: #7B42BC; }
.aws-page .expertise-list li i { color: #FF9900; }
.gcp-page .expertise-list li i { color: #4285F4; }
.ansible-page .expertise-list li i { color: #EE0000; }
.ai-page .expertise-list li i { color: #6366f1; }
.postgres-page .expertise-list li i { color: #336791; }
.linux-page .expertise-list li i { color: #FCC624; }
.jenkins-page .expertise-list li i { color: #D33833; }
.prometheus-page .expertise-list li i { color: #E6522C; }
.grafana-page .expertise-list li i { color: #FF9830; }
.redhat-page .expertise-list li i { color: #CC0000; }
.github-page .expertise-list li i { color: #6e788a; }
.bitbucket-page .expertise-list li i { color: #2684FF; }
.gitlab-page .expertise-list li i { color: #FC6D26; }
.mysql-page .expertise-list li i { color: #00758F; }
.nodejs-page .expertise-list li i { color: #83CD29; }
.python-page .expertise-list li i { color: #FFD43B; }
.php-page .expertise-list li i { color: #777BB3; }
.apache-page .expertise-list li i { color: #D22128; }
.mongodb-page .expertise-list li i { color: #13AA52; }
.redis-page .expertise-list li i { color: #DC382D; }
.vault-page .expertise-list li i { color: #F9C003; } */

.expertise-image {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
  border: 1px solid rgba(77, 171, 247, 0.1);
}

.expertise-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  z-index: 1;
  pointer-events: none;
}

.expertise-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.expertise-image:hover img {
  transform: scale(1.03);
}

.certification-badges {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.cert-badge {
  height: 80px;
  width: auto;
  transition: var(--transition);
}

.cert-badge:hover {
  transform: scale(1.1);
}

/* ================ TECH STACK SECTION ================ */
.tech-stack {
  background-color: var(--bg-dark);
  padding: 7rem 0;
  position: relative;
}

.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.framework-card {
  background-color: rgba(22, 28, 36, 0.8);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  border: 1px solid rgba(77, 171, 247, 0.1);
  position: relative;
  overflow: hidden;
}

.framework-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
  border-color: rgba(77, 171, 247, 0.3);
  background-color: rgba(28, 37, 54, 0.95);
}

.framework-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* Technology-specific framework card top border colors
.k8s-page .framework-card::before { background: var(--k8s-gradient); }
.docker-page .framework-card::before { background: var(--docker-gradient); }
.terraform-page .framework-card::before { background: var(--terraform-gradient); }
.aws-page .framework-card::before { background: var(--aws-gradient); }
.gcp-page .framework-card::before { background: var(--gcp-gradient); }
.ansible-page .framework-card::before { background: var(--ansible-gradient); }
.ai-page .framework-card::before { background: var(--ai-gradient); }
.postgres-page .framework-card::before { background: var(--postgres-gradient); }
.linux-page .framework-card::before { background: var(--linux-gradient); }
.jenkins-page .framework-card::before { background: var(--jenkins-gradient); }
.prometheus-page .framework-card::before { background: var(--prometheus-gradient); }
.grafana-page .framework-card::before { background: var(--grafana-gradient); }
.redhat-page .framework-card::before { background: var(--redhat-gradient); }
.github-page .framework-card::before { background: var(--github-gradient); }
.bitbucket-page .framework-card::before { background: var(--bitbucket-gradient); }
.gitlab-page .framework-card::before { background: var(--gitlab-gradient); }
.mysql-page .framework-card::before { background: var(--mysql-gradient); }
.nodejs-page .framework-card::before { background: var(--nodejs-gradient); }
.python-page .framework-card::before { background: var(--python-gradient); }
.php-page .framework-card::before { background: var(--php-gradient); }
.apache-page .framework-card::before { background: var(--apache-gradient); }
.mongodb-page .framework-card::before { background: var(--mongodb-gradient); }
.redis-page .framework-card::before { background: var(--redis-gradient); }
.vault-page .framework-card::before { background: var(--vault-gradient); } */

.framework-card:hover::before {
  transform: scaleX(1);
}

.framework-icon {
  height: 70px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.framework-icon img {
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
  transition: var(--transition);
}

.framework-card:hover .framework-icon img {
  transform: scale(1.1);
}

.framework-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
}

.framework-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ================ FAQ SECTION ================ */
.tech-faq {
  background-color: var(--bg-lighter);
  padding: 7rem 0;
  position: relative;
}

.faq-container {
  max-width: 900px;
  margin: 3rem auto 0;
}

.faq-item {
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
  background-color: var(--bg-dark);
  border: 1px solid rgba(77, 171, 247, 0.1);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(77, 171, 247, 0.3);
}

.faq-question {
  padding: 1.8rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 4px solid var(--primary-color);
}

/* Technology-specific FAQ border colors
.k8s-page .faq-question { border-left-color: #4dabf7; }
.docker-page .faq-question { border-left-color: #0DB7ED; }
.terraform-page .faq-question { border-left-color: #7B42BC; }
.aws-page .faq-question { border-left-color: #FF9900; }
.gcp-page .faq-question { border-left-color: #4285F4; }
.ansible-page .faq-question { border-left-color: #EE0000; }
.ai-page .faq-question { border-left-color: #6366f1; }
.postgres-page .faq-question { border-left-color: #336791; }
.linux-page .faq-question { border-left-color: #FCC624; }
.jenkins-page .faq-question { border-left-color: #D33833; }
.prometheus-page .faq-question { border-left-color: #E6522C; }
.grafana-page .faq-question { border-left-color: #FF9830; }
.redhat-page .faq-question { border-left-color: #CC0000; }
.github-page .faq-question { border-left-color: #6e788a; }
.bitbucket-page .faq-question { border-left-color: #2684FF; }
.gitlab-page .faq-question { border-left-color: #FC6D26; }
.mysql-page .faq-question { border-left-color: #00758F; }
.nodejs-page .faq-question { border-left-color: #83CD29; }
.python-page .faq-question { border-left-color: #306998; }
.php-page .faq-question { border-left-color: #777BB3; }
.apache-page .faq-question { border-left-color: #D22128; }
.mongodb-page .faq-question { border-left-color: #13AA52; }
.redis-page .faq-question { border-left-color: #DC382D; }
.vault-page .faq-question { border-left-color: #F9C003; } */

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
}

.faq-toggle {
  color: var(--primary-color);
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

/* Technology-specific toggle colors */
/* .k8s-page .faq-toggle { color: #4dabf7; }
.docker-page .faq-toggle { color: #0DB7ED; }
.terraform-page .faq-toggle { color: #7B42BC; }
.aws-page .faq-toggle { color: #FF9900; }
.gcp-page .faq-toggle { color: #4285F4; }
.ansible-page .faq-toggle { color: #EE0000; }
.ai-page .faq-toggle { color: #6366f1; }
.postgres-page .faq-toggle { color: #336791; }
.linux-page .faq-toggle { color: #FCC624; }
.jenkins-page .faq-toggle { color: #D33833; }
.prometheus-page .faq-toggle { color: #E6522C; }
.grafana-page .faq-toggle { color: #FF9830; }
.redhat-page .faq-toggle { color: #CC0000; }
.github-page .faq-toggle { color: #6e788a; }
.bitbucket-page .faq-toggle { color: #2684FF; }
.gitlab-page .faq-toggle { color: #FC6D26; }
.mysql-page .faq-toggle { color: #00758F; }
.nodejs-page .faq-toggle { color: #83CD29; }
.python-page .faq-toggle { color: #306998; }
.php-page .faq-toggle { color: #777BB3; }
.apache-page .faq-toggle { color: #D22128; }
.mongodb-page .faq-toggle { color: #13AA52; }
.redis-page .faq-toggle { color: #DC382D; }
.vault-page .faq-toggle { color: #F9C003; } */

.faq-answer {
  background-color: rgba(77, 171, 247, 0.05);
  padding: 0 2rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Technology-specific answer background colors */
/* .k8s-page .faq-answer { background-color: rgba(77, 171, 247, 0.05); }
.docker-page .faq-answer { background-color: rgba(13, 183, 237, 0.05); }
.terraform-page .faq-answer { background-color: rgba(123, 66, 188, 0.05); }
.aws-page .faq-answer { background-color: rgba(255, 153, 0, 0.05); }
.gcp-page .faq-answer { background-color: rgba(66, 133, 244, 0.05); }
.ansible-page .faq-answer { background-color: rgba(238, 0, 0, 0.05); }
.ai-page .faq-answer { background-color: rgba(99, 102, 241, 0.05); }
.postgres-page .faq-answer { background-color: rgba(51, 103, 145, 0.05); }
.linux-page .faq-answer { background-color: rgba(252, 198, 36, 0.05); }
.jenkins-page .faq-answer { background-color: rgba(211, 56, 51, 0.05); }
.prometheus-page .faq-answer { background-color: rgba(230, 82, 44, 0.05); }
.grafana-page .faq-answer { background-color: rgba(255, 152, 48, 0.05); }
.redhat-page .faq-answer { background-color: rgba(204, 0, 0, 0.05); }
.github-page .faq-answer { background-color: rgba(110, 120, 138, 0.05); }
.bitbucket-page .faq-answer { background-color: rgba(38, 132, 255, 0.05); }
.gitlab-page .faq-answer { background-color: rgba(252, 109, 38, 0.05); }
.mysql-page .faq-answer { background-color: rgba(0, 117, 143, 0.05); }
.nodejs-page .faq-answer { background-color: rgba(131, 205, 41, 0.05); }
.python-page .faq-answer { background-color: rgba(48, 105, 152, 0.05); }
.php-page .faq-answer { background-color: rgba(119, 123, 179, 0.05); }
.apache-page .faq-answer { background-color: rgba(210, 33, 40, 0.05); }
.mongodb-page .faq-answer { background-color: rgba(19, 170, 82, 0.05); }
.redis-page .faq-answer { background-color: rgba(220, 56, 45, 0.05); }
.vault-page .faq-answer { background-color: rgba(249, 192, 3, 0.05); } */

.faq-item.active .faq-answer {
  padding: 1.5rem 2rem 2rem;
  max-height: 1000px;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer p {
  margin: 0;
  color: var(--text-medium);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ================ CTA SECTION ================ */
.cta-section {
  background: var(--primary-gradient);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

/* Technology-specific CTA backgrounds */
.k8s-page .cta-section { background: var(--k8s-gradient); }
.docker-page .cta-section { background: var(--docker-gradient); }
.terraform-page .cta-section { background: var(--terraform-gradient); }
.aws-page .cta-section { background: var(--aws-gradient); }
.gcp-page .cta-section { background: var(--gcp-gradient); }
.ansible-page .cta-section { background: var(--ansible-gradient); }
.ai-page .cta-section { background: var(--ai-gradient); }
.postgres-page .cta-section { background: var(--postgres-gradient); }
.linux-page .cta-section { background: var(--linux-gradient); }
.jenkins-page .cta-section { background: var(--jenkins-gradient); }
.prometheus-page .cta-section { background: var(--prometheus-gradient); }
.grafana-page .cta-section { background: var(--grafana-gradient); }
.redhat-page .cta-section { background: var(--redhat-gradient); }
.github-page .cta-section { background: var(--github-gradient); }
.bitbucket-page .cta-section { background: var(--bitbucket-gradient); }
.gitlab-page .cta-section { background: var(--gitlab-gradient); }
.mysql-page .cta-section { background: var(--mysql-gradient); }
.nodejs-page .cta-section { background: var(--nodejs-gradient); }
.python-page .cta-section { background: var(--python-gradient); }
.php-page .cta-section { background: var(--php-gradient); }
.apache-page .cta-section { background: var(--apache-gradient); }
.mongodb-page .cta-section { background: var(--mongodb-gradient); }
.redis-page .cta-section { background: var(--redis-gradient); }
.vault-page .cta-section { background: var(--vault-gradient); }
.argocd-page .cta-section { background: var(--argocd-gradient); }

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  opacity: 0.7;
  z-index: 1;
}

.cta-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cta-section h2 {
  color: white;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
  margin-bottom: 2.5rem;
}

.cta-section .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  background-color: rgb(24, 195, 218);
  color: var(--primary-color);
  font-weight: 600;
  border-radius: var(--border-radius);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  font-size: 1.1rem;
}

/* Technology-specific button colors */
.k8s-page .primary-button { color: #326DE6; }
.docker-page .primary-button { color: #0DB7ED; }
.terraform-page .primary-button { color: #7B42BC; }
.aws-page .primary-button { color: #FF9900; }
.gcp-page .primary-button { color: #4285F4; }
.ansible-page .primary-button { color: #EE0000; }
.ai-page .primary-button { color: #6366f1; }
.postgres-page .primary-button { color: #336791; }
.linux-page .primary-button { color: #FCC624; }
.jenkins-page .primary-button { color: #D33833; }
.prometheus-page .primary-button { color: #E6522C; }
.grafana-page .primary-button { color: #FF9830; }
.redhat-page .primary-button { color: #CC0000; }
.github-page .primary-button { color: #6e788a; }
.bitbucket-page .primary-button { color: #2684FF; }
.gitlab-page .primary-button { color: #FC6D26; }
.mysql-page .primary-button { color: #00758F; }
.nodejs-page .primary-button { color: #83CD29; }
.python-page .primary-button { color: #306998; }
.php-page .primary-button { color: #777BB3; }
.apache-page .primary-button { color: #D22128; }
.mongodb-page .primary-button { color: #13AA52; }
.redis-page .primary-button { color: #DC382D; }
.vault-page .primary-button { color: #F9C003; }

.primary-button:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.primary-button span {
  margin-right: 0.8rem;
}

.primary-button i {
  transition: transform 0.2s ease;
}

.primary-button:hover i {
  transform: translateX(4px);
}

/* ================ RELATED TECHNOLOGIES ================ */
.related-technologies {
  background-color: var(--bg-lighter);
  padding: 7rem 0;
  position: relative;
}

.related-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  max-width: 900px;
  margin: 0 auto;
}

.solution-item {
  text-decoration: none;
  display: block;
  transition: var(--transition);
}

.solution-item-content {
  background-color: rgba(46, 51, 56, 0.8);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}


/* Technology-specific related tech hover effects */

.solution-item:hover .solution-item-content::before {
  transform: scaleX(1);
}

.solution-item-content img {
  height: 70px;
  width: 70px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.solution-item:hover img {
  transform: scale(1.1);
}

.solution-item-content h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-light);
}

/* ================ RESPONSIVE STYLES ================ */
@media (max-width: 1200px) {
  .tech-banner-content h1 {
    font-size: 3.2rem;
  }
  
  .tech-subtitle {
    font-size: 1.3rem;
  }
  
  .cta-section h2 {
    font-size: 2.4rem;
  }
}

@media (max-width: 992px) {
  .tech-banner {
    height: auto;
    min-height: 50vh;
  }
  
  .expertise-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .expertise-image {
    order: -1;
  }
  
  .tech-banner-content h1 {
    font-size: 2.8rem;
  }
  
  .section-header h2 {
    font-size: 2.2rem;
  }
  
  .examples-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .framework-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tech-banner {
    min-height: 40vh;
    padding: 4rem 0;
  }
  
  .tech-metrics {
    margin-top: 0;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tech-icon {
    width: 110px;
    height: 110px;
    margin-bottom: 1.5rem;
  }
  
  .tech-icon img {
    width: 70px;
    height: 70px;
  }
  
  .tech-banner-content h1 {
    font-size: 2.4rem;
  }
  
  .tech-subtitle {
    font-size: 1.2rem;
  }
  
  .process-timeline {
    padding-left: 60px;
  }
  
  .timeline-item::before {
    left: -40px;
    width: 30px;
    height: 30px;
  }
  
  .framework-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .results-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .cta-section h2 {
    font-size: 2rem;
  }
  
  .cta-section p {
    font-size: 1.1rem;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 576px) {
  .tech-banner {
    height: auto;
    min-height: 300px;
    padding: 6rem 0;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-banner-content h1 {
    font-size: 2rem;
  }
  
  .tech-subtitle {
    font-size: 1.1rem;
  }
  
  .section-header h2 {
    font-size: 1.8rem;
  }
  
  .process-timeline {
    padding-left: 45px;
  }
  
  .timeline-item {
    padding: 1.5rem;
  }
  
  .timeline-item::before {
    left: -32px;
    width: 24px;
    height: 24px;
  }
  
  .timeline-item h3 {
    font-size: 1.3rem;
    display: block;
  }
  
  .process-number {
    margin-bottom: 0.5rem;
  }
  
  .framework-grid {
    grid-template-columns: 1fr;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .example-card h3 {
    padding: 1.5rem;
    font-size: 1.4rem;
  }
  
  .example-content {
    padding: 0 1.5rem 1.5rem;
  }
  
  .faq-question {
    padding: 1.5rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
  
  .related-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cta-section .primary-button {
    display: block;
    width: 100%;
  }
}


.argocd-page .timeline-tools span { color: #4E7BFF; border-color: rgba(42, 98, 255, 0.2); }

/* Add these to your existing benefit icon colors */
.argocd-page .benefit-icon { background: var(--argocd-gradient); }

/* Add these to your existing expertise title underline colors */
.argocd-page .expertise-text h3::after { background: var(--argocd-gradient); }

/* Add these to your existing list icon colors */
.argocd-page .expertise-list li i { color: #4E7BFF; }

/* Add these to your existing author image border colors */
.argocd-page .testimonial-author img { border-color: #2A62FF; }

/* Add these to your existing framework card top border colors */
.argocd-page .framework-card::before { background: var(--argocd-gradient); }

/* Add these to your existing FAQ border colors */
.argocd-page .faq-question { border-left-color: #2A62FF; }

/* Add these to your existing toggle colors */
.argocd-page .faq-toggle { color: #2A62FF; }

/* Add these to your existing answer background colors */
.argocd-page .faq-answer { background-color: rgba(42, 98, 255, 0.05); }

/* Add these to your existing CTA backgrounds */
.argocd-page .cta-section { background: var(--argocd-gradient); }

/* Add these to your existing button colors */
.argocd-page .primary-button { color: #2A62FF; }