/* Vibrant styling for workstation/physical servers page only */
.page-workstation .breadcrumb {
  position: relative;
  color: var(--white);
  background: linear-gradient(110deg, rgba(244,149,56,0.95) 0%, rgba(10,133,69,0.95) 100%);
  background-size: 200% 200%;
  animation: ws-gradientShift 12s ease infinite;
  overflow: hidden;
}
.page-workstation .breadcrumb .page-breadcrumb a,
.page-workstation .breadcrumb .page-breadcrumb span { color: rgba(255,255,255,0.9); }
.page-workstation .breadcrumb h1 { color: var(--white); }

.page-workstation .breadcrumb::before,
.page-workstation .breadcrumb::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.25;
  pointer-events: none;
}
.page-workstation .breadcrumb::before { background: var(--primary); top: -180px; left: -140px; }
.page-workstation .breadcrumb::after { background: var(--secondary); bottom: -220px; right: -160px; }

@keyframes ws-gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gradient title text */
.page-workstation .gradient-title,
.page-workstation .portfolio-details-title {
  background: linear-gradient(90deg, var(--white) 0%, #fffb 50%, var(--white) 100%),
              linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card-like info blocks */
.page-workstation .portfolio-info {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 16px 20px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-workstation .portfolio-info:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.page-workstation .portfolio-info-hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  opacity: 1;
  border: 0;
}

/* Vibrant image wrapper */
.page-workstation .vibrant-shadow {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(10,133,69,0.25), 0 6px 18px rgba(244,149,56,0.2);
}
.page-workstation .vibrant-shadow img {
  transition: transform .35s ease;
}
.page-workstation .vibrant-shadow:hover img {
  transform: scale(1.02);
}

/* Gradient WhatsApp CTA */
.page-workstation .btn-gradient {
  gap: 12px;
  padding: 14px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff !important;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border: 0;
}
.page-workstation .btn-gradient:hover {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.page-workstation .glow { box-shadow: 0 8px 24px rgba(244,149,56,0.35), 0 4px 14px rgba(10,133,69,0.25); }

/* Accent list bullets */
.page-workstation .blog-details-ul li {
  position: relative;
  padding-left: 28px;
}
.page-workstation .blog-details-ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 0 3px rgba(244,149,56,0.15);
}

/* Underline accent for h3s in content */
.page-workstation .portfolio-details-content h3 {
  position: relative;
  display: inline-block;
}
.page-workstation .portfolio-details-content h3::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
}