@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");
:root {
  --cyber-indigo: #E9C56B;
  --security-blue: #E9C56B;
  --deep-trust-navy: #12172F;
  --aqua-signal: #E9C56B;
  --soft-lavender: #EEF0FF;
  --cloud-white: #FFFFFF;
  --cool-grey: #F5F7FB;
  --text-charcoal: #1E2433;
  --bee-yellow: #FFC93D;
  --honey-gold: #F5A623;
  --active-accent: var(--cyber-indigo);
  --bg: var(--deep-trust-navy);
  --bg-deep: #080B1E;
  --ink: var(--cloud-white);
  --muted: #C8CEE8;
  --line: rgba(255, 255, 255, 0.12);
  --panel: rgba(18, 23, 47, 0.62);
  color-scheme: dark;
  font-family: 'Outfit', sans-serif !important;
}

.beeinfosec-slider-widget-wrapper {
  z-index: 1 !important;

  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(233, 197, 107, 0.18), transparent 34%),
    radial-gradient(circle at 72% 26%, rgba(233, 197, 107, 0.24), transparent 29%),
    radial-gradient(circle at 90% 78%, rgba(233, 197, 107, 0.12), transparent 32%),
    radial-gradient(circle at 66% 12%, rgba(255, 201, 61, 0.045), transparent 22%),
    linear-gradient(145deg, var(--deep-trust-navy) 0%, #171D42 50%, #080B1E 100%);
  isolation: isolate;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 44px);
  min-height: 84px;
  padding: 18px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(18, 23, 47, 0.92), rgba(18, 23, 47, 0.36));
  backdrop-filter:
    drop-shadow(0 0 20px rgba(233, 197, 107, 0.35))
    drop-shadow(0 0 8px rgba(255, 201, 61, 0.12))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3)) !important;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  width: clamp(168px, 18vw, 244px);
  padding: 8px 11px;
  border: 1px solid rgba(233, 197, 107, 0.35);
  border-radius: 8px;
  background: var(--cloud-white);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 3vw, 36px);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.78rem, 0.9vw, 0.94rem);
}

.site-nav a {
  position: relative;
  white-space: nowrap;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  background: var(--active-accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 112px clamp(18px, 5vw, 72px) 120px;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 72% 50%, black 0 44%, transparent 77%);
  content: "";
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 23, 47, 0.94), rgba(18, 23, 47, 0.64) 36%, rgba(18, 23, 47, 0.08) 74%),
    radial-gradient(circle at 76% 48%, rgba(233, 197, 107, 0.13), transparent 36%);
  content: "";
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  z-index: 0 !important;
  border-radius: 999px;
  filter: blur(72px);
  opacity: 0.68;
  pointer-events: none;
}

.hero-glow-one {
  top: 20%;
  right: 12%;
  width: 34vw;
  height: 34vw;
  background: rgba(233, 197, 107, 0.25);
}

.hero-glow-two {
  right: 26%;
  bottom: 4%;
  width: 24vw;
  height: 24vw;
  background: rgba(233, 197, 107, 0.16);
}

.slide-out-left {
  transform: translateX(-40px);
  opacity: 0;
}

.slide-out-right {
  transform: translateX(40px);
  opacity: 0;
}

.slide-in-right {
  transform: translateX(40px);
  opacity: 0;
  transition: none !important;
}

.slide-in-left {
  transform: translateX(-40px);
  opacity: 0;
  transition: none !important;
}

.service-eyebrow {
  margin: 0 0 18px;
  color: rgba(233, 197, 107, 0.88);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-content .hero-content h1 {
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--cloud-white) !important;
  font-size: 65px !important;
  font-weight: 850 !important;
  line-height: 0.91 !important;
  letter-spacing: 0 !important;
}

.service-description {
  max-width: 54ch !important;
  margin: 26px 0 0 !important;
  color: rgba(238, 240, 255, 0.78) !important;
  font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
  line-height: 1.72 !important;
}

.learn-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: fit-content !important;
  min-height: 48px !important;
  margin-top: 34px !important;
  padding: 0 32px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f59e0b, #fde047) !important;
  color: #111 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.learn-more:hover,
.learn-more:focus-visible {
  background: linear-gradient(90deg, #fabc21, #fabc21) !important;
  box-shadow: none;
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 54px;
}

.arrow-button {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--cloud-white) !important;
  cursor: pointer !important;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

.arrow-button:hover,
.arrow-button:focus-visible {
  border-color: rgba(233, 197, 107, 0.58);
  background: rgba(233, 197, 107, 0.16);
  transform: translateY(-1px);
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent !important;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-dots {
  display: flex;
  gap: 9px;
}

.dot {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  margin: 0 6px !important;
  transition: width 260ms ease, background 260ms ease, border-color 260ms ease !important;
}

.dot.is-active {
  width: 32px !important;
  border-radius: 99px !important;
  border-color: rgba(233, 197, 107, 0.82) !important;
  background: #E9C56B !important;
  box-shadow: 0 0 12px rgba(233,197,107,0.6) !important;
}

.visual-stage {
  --bee-x: 67%;
  --bee-y: 26%;
  --bee-rotate: -11deg;
  --bee-scale: 1.04;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--bee-x) var(--bee-y), rgba(233, 197, 107, 0.2), transparent 29%),
    radial-gradient(circle at 78% 72%, rgba(233, 197, 107, 0.08), transparent 34%);
  z-index: 0;
}

.field-canvas,
.hive-grid,
.circuit-lines,
.service-nodes,
.bee-orbit {
  position: absolute;
  inset: 0;
}

.field-canvas {
  z-index: 1;
  opacity: 0.92;
}

.hive-grid {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 22px;
  padding: clamp(32px, 5vw, 72px);
  opacity: 0.24;
  transform: perspective(900px) rotateX(62deg) rotateZ(-17deg) translate3d(7%, -12%, -80px);
  transform-origin: center;
}

.hive-grid span {
  aspect-ratio: 1;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  border: 1px solid rgba(233, 197, 107, 0.45);
  background: linear-gradient(145deg, rgba(238, 240, 255, 0.08), transparent);
}

.circuit-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 197, 107, 0.66), rgba(233, 197, 107, 0.62), rgba(245, 166, 35, 0.26), transparent);
  opacity: 0.42;
  transform-origin: right center;
  animation: circuitPulse 3.8s ease-in-out infinite;

  border: 1px solid rgba(233,197,107,0.15) !important;
}

.line-a {
  top: 24%;
  right: 16%;
  width: 44%;
  transform: rotate(-12deg);
}

.line-b {
  top: 48%;
  right: 7%;
  width: 58%;
  transform: rotate(8deg);
  animation-delay: -1.3s;
}

.line-c {
  bottom: 25%;
  right: 19%;
  width: 40%;
  transform: rotate(-24deg);
  animation-delay: -2.2s;
}

.line-d {
  bottom: 13%;
  right: 3%;
  width: 62%;
  transform: rotate(16deg);
  animation-delay: -0.8s;
}

.service-node {
  position: absolute;
  z-index: 7;
  top: var(--node-y);
  left: var(--node-x);
  display: grid;
  place-items: center;
  width: clamp(70px, 7vw, 94px);
  height: clamp(70px, 7vw, 94px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
    rgba(18, 23, 47, 0.5);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    transform 520ms cubic-bezier(0.2, 0.7, 0.1, 1),
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

.service-node::before {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(233, 197, 107, 0.12);
  border-radius: 8px;
  content: "";
}

.service-node.is-active {
  border-color: color-mix(in srgb, var(--node-accent), white 10%);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--node-accent), transparent 58%), transparent 63%),
    rgba(18, 23, 47, 0.3);
  box-shadow:
    0 0 32px color-mix(in srgb, var(--node-accent), transparent 58%),
    inset 0 0 24px color-mix(in srgb, var(--node-accent), transparent 76%);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.12);
}

.node-core,
.node-label,
.node-pulse {
  transform: rotate(-45deg);
}

.node-core {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--node-accent);
}

.node-label {
  position: absolute;
  right: -14px;
  bottom: -26px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.node-pulse {
  position: absolute;
  inset: -16px;
  border: 1px solid color-mix(in srgb, var(--node-accent), transparent 68%);
  border-radius: 999px;
  opacity: 0;
}

.service-node.is-active .node-pulse {
  animation: nodePulse 1.8s ease-out infinite;
}

.bee-orbit {
  z-index: 6;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  top: var(--bee-y);
  left: var(--bee-x);
  border: 1px solid rgba(233, 197, 107, 0.28);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(var(--bee-rotate));
  transition:
    top 860ms cubic-bezier(0.2, 0.74, 0.1, 1),
    left 860ms cubic-bezier(0.2, 0.74, 0.1, 1),
    transform 860ms cubic-bezier(0.2, 0.74, 0.1, 1);
}

.orbit-ring-one {
  width: clamp(300px, 35vw, 520px);
  height: clamp(300px, 35vw, 520px);
  border-top-color: rgba(233, 197, 107, 0.82);
  animation: orbitSpin 18s linear infinite;
}

.orbit-ring-two {
  width: clamp(230px, 27vw, 420px);
  height: clamp(150px, 18vw, 290px);
  border-right-color: rgba(233, 197, 107, 0.66);
  transform: translate(-50%, -50%) rotate(calc(var(--bee-rotate) + 58deg));
  animation: orbitSpinReverse 13s linear infinite;
}

.orbit-ring-three {
  width: clamp(360px, 43vw, 630px);
  height: clamp(155px, 21vw, 310px);
  border-left-color: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) rotate(calc(var(--bee-rotate) - 32deg));
  animation: orbitSpin 23s linear infinite;
}

.cyber-bee {
  position: absolute;
  top: var(--bee-y, 50%);
  left: var(--bee-x, 50%);
  width: clamp(165px, 17vw, 290px);
    z-index: 5;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) perspective(800px) rotateX(8deg) rotateY(-16deg) rotate(var(--bee-rotate, 0deg)) scale(var(--bee-scale, 1)) !important;
  transform-origin: center;
  filter:
    drop-shadow(0 0 22px rgba(233, 197, 107, 0.42))
    drop-shadow(0 0 10px rgba(255, 201, 61, 0.18))
    drop-shadow(0 30px 42px rgba(0, 0, 0, 0.4));
  z-index: 5;
  transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: top, left, transform;
  animation: beeFloat 4.8s ease-in-out infinite;
}

.bee-core {
  position: absolute;
  inset: 18%;
  z-index: 4;
  width: 64%;
  height: 64%;
  object-fit: contain;
  transform: translateZ(52px);
}

.bee-aura {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(233, 197, 107, 0.26), transparent 58%),
    conic-gradient(from 110deg, rgba(233, 197, 107, 0.56), rgba(233, 197, 107, 0.2), rgba(255, 201, 61, 0.2), rgba(233, 197, 107, 0.56));
  filter: blur(2px);
  opacity: 0.78;
}


.bee-stripe {
  position: absolute;
  z-index: 5;
  left: 50%;
  width: 26%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 61, 0.88), transparent);
  box-shadow: 0 0 18px rgba(255, 201, 61, 0.54);
}

.stripe-one {
  top: 47%;
  transform: translateX(-50%) rotate(-3deg);
}

.stripe-two {
  top: 56%;
  transform: translateX(-50%) rotate(4deg);
}

.bee-shadow {
  position: absolute;
  top: var(--bee-y);
  left: var(--bee-x);
  width: clamp(210px, 24vw, 380px);
  height: clamp(34px, 4vw, 62px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 72%);
  transform: translate(-50%, 160px) scale(var(--bee-scale));
  opacity: 0.8;
  transition:
    top 860ms cubic-bezier(0.2, 0.74, 0.1, 1),
    left 860ms cubic-bezier(0.2, 0.74, 0.1, 1),
    transform 860ms cubic-bezier(0.2, 0.74, 0.1, 1);
}

.svg-failed .bee-core {
  display: none;
}

.svg-failed::after {
  position: absolute;
  inset: 30%;
  border-radius: 46% 46% 52% 52%;
  background: linear-gradient(180deg, var(--deep-trust-navy), #080B1E 54%, var(--bee-yellow) 55%, var(--bee-yellow) 70%, #080B1E 71%);
  box-shadow: inset 0 0 28px rgba(255, 201, 61, 0.22), 0 0 42px rgba(233, 197, 107, 0.26);
  content: "";
}

.fallback-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  padding: 8px 10px;
  border: 1px solid rgba(233, 197, 107, 0.28);
  border-radius: 8px;
  background: rgba(18, 23, 47, 0.76);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.fallback-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes beeFloat {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -18px;
  }
}

@keyframes wingBeat {
  0%,
  100% {
    opacity: 0.64;
    filter: blur(0.1px) drop-shadow(0 0 16px rgba(233, 197, 107, 0.16));
  }
  50% {
    opacity: 0.94;
    filter: blur(1px) drop-shadow(0 0 26px rgba(233, 197, 107, 0.26));
  }
}

@keyframes orbitSpin {
  to {
    rotate: 360deg;
  }
}

@keyframes orbitSpinReverse {
  to {
    rotate: -360deg;
  }
}

@keyframes circuitPulse {
  0%,
  100% {
    opacity: 0.18;
    translate: -16px 0;
  }
  50% {
    opacity: 0.72;
    translate: 18px 0;
  }
}

@keyframes nodePulse {
  0% {
    opacity: 0.72;
    transform: rotate(-45deg) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: rotate(-45deg) scale(1.45);
  }
}

@media (max-width: 980px) {
  

  .site-header {
    min-height: 74px;
    padding: 14px 18px;
  }

  .brand-mark {
    width: 156px;
  }

  .site-nav {
    gap: 14px;
    font-size: 0.74rem;
  }

  .hero {
    min-height: 100vh;
    padding-top: 96px;
  }

  .hero-content {
    display: block;
    min-height: calc(100vh - 116px);
  }

  .service-panel {
    width: min(68vw, 520px);
    min-height: auto;
    max-width: none;
    padding: 18px 0 0;
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(32px, 8vw, 48px);
  }

  .visual-stage {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    opacity: 0.98;
    z-index: 0;
    pointer-events: auto;
  }

  .visual-stage::before {
    display: none;
  }
}

@media (max-width: 680px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
  }

  .site-nav a {
    white-space: normal;
  }

  .hero {
    padding-top: 136px;
  }

  .service-panel {
    width: min(72vw, 430px);
  }

  .service-meta {
    margin-bottom: 20px;
  }

  .slider-controls {
    margin-top: 34px;
  }

  .visual-stage {
    inset: 0;
  }

  .node-label {
    display: none;
  }

  .cyber-bee {
    width: clamp(140px, 43vw, 225px);
      z-index: 5;
  }

	.learn-more {
	width: 100% !important;align-content
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}



.visual-stage {
  transform: translateY(calc(var(--scroll-offset, 0) * -0.15px));
  transition: transform 0.1s ease-out;
}

.service-icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(233, 197, 107, 0.52) !important;
  border-radius: 8px !important;
  background: rgba(238, 240, 255, 0.1) !important;
  box-shadow: 0 0 32px rgba(233, 197, 107, 0.22) !important;
}
.service-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
}

/* Block Elementor Hovers & Apply React Hover */
.service-node:hover, .service-node a:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)), rgba(18, 23, 47, 0.5) !important;
  border-color: rgba(233, 197, 107, 0.4) !important;
  box-shadow: 0 0 16px rgba(233, 197, 107, 0.15) !important;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.05) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.service-node.is-active:hover {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.12) !important;
}
.service-node:hover svg, .service-node svg, .node-core svg {
  stroke: #E9C56B !important;
  fill: none !important;
}


/* 1. Typography & Spacing Overlap */
.slider-content-col {
  max-width: 550px !important;
  padding-right: 2rem !important; /* Extra breathing room */
}

/* 2. Number + Icon Alignment */
.service-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.service-number {
  line-height: 1 !important;
  margin: 0 !important;
}

/* 3. Service Icon Box */
.service-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(229, 195, 90, 0.5) !important;
  border-radius: 8px !important;
  background: rgba(18, 23, 47, 0.4) !important;
  box-shadow: 0 0 20px rgba(229, 195, 90, 0.15) !important;
  margin: 0 !important;
}
.service-icon svg {
  stroke: #ffffff !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
}

/* 4. Pagination Scaling */
.dot {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 0 5px !important;
  transition: all 260ms ease !important;
  padding: 0 !important;
}
.dot.is-active {
  width: 26px !important;
  height: 8px !important;
  border-color: #E5C35A !important;
  background: #E5C35A !important;
  box-shadow: 0 0 10px rgba(229, 195, 90, 0.4) !important;
}
.arrow-button {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 5. Card Glassmorphism & Glow */
/* Base Inactive Card */
.service-node {
  background: linear-gradient(145deg, rgba(18, 23, 47, 0.8), rgba(18, 23, 47, 0.4)) !important;
  border: 1px solid rgba(229, 195, 90, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.service-node .node-core svg {
  stroke: rgba(255, 255, 255, 0.9) !important;
  fill: none !important;
}

/* Base Active Card */
.service-node.is-active {
  background: linear-gradient(145deg, rgba(18, 23, 47, 0.7), rgba(18, 23, 47, 0.2)) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important; /* Remove square box shadow */
  position: relative !important;
}
.service-node.is-active .node-core svg {
  stroke: #E5C35A !important;
}

/* Circular Radial Glow (Behind the active card) */
.service-node.is-active::after {
  content: "" !important;
  position: absolute !important;
  inset: -25px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(229, 195, 90, 0.3) 0%, rgba(229, 195, 90, 0) 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 6. Node Labels */
.node-label {
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  position: absolute !important;
  right: -14px !important;
  bottom: -26px !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
}


/* 1. Hero Content Width Issue & Grid */
.hero-content {
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 40% 1fr !important;
  align-items: center !important;
  gap: 8vw !important;
  pointer-events: none !important;
}

/* 2. Left Content Position & Z-index / pointer-events for slider functionality */
.service-panel {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100 !important; /* Ensure buttons are clickable */
  max-width: 100% !important;
  width: 100% !important;
}
.visual-stage {
  pointer-events: none !important; /* Prevent blocking clicks on left side */
  z-index: 1 !important;
}

/* 3. Heading Width */
.hero-content .hero-content h1 {
  max-width: 650px !important;
  width: 100% !important;
}
.service-description {
  max-width: 520px !important;
  width: 100% !important;
}

/* 5. Number + Icon Row Alignment */
.service-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* 6. Number Color */
.service-number {
  color: #E5C35A !important;
  text-shadow: 0 0 10px rgba(229, 195, 90, 0.4) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* 7. Service Icon Box */
.service-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid #E5C35A !important;
  border-radius: 8px !important;
  background: rgba(18, 23, 47, 0.4) !important;
  box-shadow: 0 0 20px rgba(229, 195, 90, 0.15) !important;
  margin: 0 !important;
}
.service-icon svg {
  stroke: #ffffff !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
}

/* 8 & 9. Pagination & Arrows Alignment/Size */
.slider-controls {
  display: flex !important;
  align-items: center !important; /* Perfect vertical centering */
  gap: 16px !important;
  margin-top: 40px !important;
}
.pagination-dots {
  display: flex !important;
  align-items: center !important; /* Align dots baseline */
  gap: 8px !important;
}
.dot {
  width: 6px !important;
  height: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 260ms ease !important;
}
.dot.is-active {
  width: 24px !important;
  height: 6px !important;
  border-color: #E5C35A !important;
  background: #E5C35A !important;
  box-shadow: 0 0 8px rgba(229, 195, 90, 0.5) !important;
}
.arrow-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  background: transparent !important;
  padding: 0 !important;
}
.arrow-button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Ensure no overlap of text */
.slider-content-col {
  width: 100% !important;
}

/* 10. Card Fixes (re-affirm from last step to ensure perfectly circular glow) */
.service-node.is-active::after {
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(229, 195, 90, 0.35) 0%, rgba(229, 195, 90, 0) 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}


/* Final Vertical Centering */
.hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.hero-content {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* =========================================
   RESPONSIVE TABLET & MOBILE FIXES
   ========================================= */

@media (max-width: 1024px) {
  /* 1. Hide Visual Section */
  .visual-stage {
    display: none !important;
  }
  
  /* 2. Center Hero Content */
  .hero-content {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-left {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Keep text left aligned */
    width: 100% !important;
  }

  /* 3 & 4. Keep Text Left Aligned & Typography */
  .service-title {
    font-size: clamp(32px, 5vw, 42px) !important;
    text-align: left !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
  }
  .service-description {
    font-size: 16px !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .service-number, .service-icon, .btn-primary, .pagination-controls {
    text-align: left !important;
  }
  .service-meta {
    justify-content: flex-start !important;
  }

  /* 5. Header Optimization (Targets standard Elementor Header) */
  
  
  
}

@media (max-width: 767px) {
  /* Mobile Specific Adjustments */
  .hero-content {
    padding: 0 20px !important;
  }
  .service-title {
    font-size: clamp(28px, 7vw, 34px) !important;
  }
  .service-description {
    font-size: 15px !important;
  }
  
  .pagination-dots {
    gap: 10px !important;
  }
  .dot {
    width: 5px !important;
    height: 5px !important;
  }
  .dot.is-active {
    width: 20px !important;
  }

  /* Header Optimization */
  
  
}

/* =========================================
   HEADING SIZE & WRAP FIX
   ========================================= */
.hero-content h1, .service-title {
  font-size: 58px !important;
  color: #ffffff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  .hero-content h1, .service-title {
    /* Prevent overflow on very narrow devices while matching React visual hierarchy */
    font-size: clamp(32px, 8vw, 58px) !important;
  }
}

@media (max-width: 1024px) {
  .hero {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 100vh !important;
  }
}

/* =========================================
   CUSTOM BACKGROUND GRADIENT
   ========================================= */
.hero {
  background: linear-gradient(27deg, #000000 0%, #00437F 100%) !important;
}


/* =========================================
   ULTIMATE ANTI-GRAVITY GLOW REFINEMENT
   ========================================= */

/* 1. Ensure overflow behaves as expected */
.hero {
  overflow: hidden !important; /* Restore normal hidden overflow so horizontal isn't a problem */
}

/* 2. Base Glow Properties */
.hero-glow {
  filter: blur(60px) !important;
  opacity: 0.9 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  mix-blend-mode: screen !important;
}

/* 3. Glow One (Main light behind bee)
   - Using transparent 75% ensures the visible light stops WELL BEFORE the bounding box edge,
     making it impossible to hit a straight line container cutoff.
*/
.hero-glow-one {
  width: 40vw !important;
  height: 40vw !important;
  top: 10% !important;
  right: 8% !important;
  background: radial-gradient(circle at 50% 50%, rgba(233, 197, 107, 0.35) 0%, rgba(233, 197, 107, 0.15) 35%, rgba(233, 197, 107, 0.04) 55%, transparent 75%) !important;
}

/* 4. Glow Two (Secondary ambient bottom light)
   - Moved UP significantly (bottom: 12%) so it doesn't bleed into the white section.
*/
.hero-glow-two {
  width: 32vw !important;
  height: 32vw !important;
  bottom: 12% !important;
  right: 18% !important;
  background: radial-gradient(circle at 50% 50%, rgba(233, 197, 107, 0.25) 0%, rgba(233, 197, 107, 0.10) 35%, rgba(233, 197, 107, 0.02) 55%, transparent 75%) !important;
}

/* 5. Inner Bee Aura
   - Tighter gradient stop to prevent bounding box issues.
*/
.bee-aura {
  filter: blur(40px) !important;
  background: radial-gradient(circle at 50% 50%, rgba(233, 197, 107, 0.4) 0%, rgba(233, 197, 107, 0.1) 45%, transparent 70%) !important;
  mix-blend-mode: screen !important;
  inset: -30% !important;
}

/* =========================================
   SCROLLING BACKGROUND CARD FIX
   ========================================= */

/* The .visual-stage element translates on scroll for parallax. 
   Because it had its own background gradients, scrolling would expose its rectangular bounding box,
   breaking the illusion of an ambient light field. Making it completely transparent 
   forces only the static .hero-glow lights to be visible. */
.visual-stage {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Also ensure no box-shadow or borders are creating edges */
.visual-stage::before, .visual-stage::after {
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================
   CROSS LAYOUT & DEPTH REFINEMENT
   ========================================= */
/* The user wants the boxes "upper side" and the bee "backside" */
.service-node {
    z-index: 10 !important;
}

.cyber-bee {
    z-index: 5 !important;
}

/* 6. Node Labels Alignment Fix */
.node-label {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: 55% !important;
    transform: translate(-50%, -50%) rotate(-45deg) translateY(85px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}


/* Strict reset for dots and arrows to ensure perfect vertical center alignment */
.slider-controls {
    align-items: center !important;
}
.pagination-dots {
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
.dot {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    min-width: 0 !important;
    vertical-align: middle !important;
    outline: none !important;
}
.arrow-button {
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    outline: none !important;
}

/* Remove the 3D background shapes behind the bee */
.hive-grid {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure aura is a circle and not a square patch */
.bee-aura {
    border-radius: 50% !important;
}


.service-node.is-active .node-pulse {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* Visually center the arrow icons which naturally sit lower due to font baseline metrics */
.arrow-button span {
    transform: translateY(-1.5px) !important;
}

/* Layout for two buttons side by side */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}
.hero-buttons .learn-more {
    margin-top: 0 !important; /* Override the default margin-top so they align perfectly */
}

/* Secondary Button styling */
.learn-more.btn-secondary {
    background: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}
.learn-more.btn-secondary:hover,
.learn-more.btn-secondary:focus-visible {
    background: #fabc21 !important;
    border-color: #fabc21 !important;
    color: #fff !important;
}