/* 
===================================================================
    Header's radial background rotation
===================================================================
*/

html {
  scroll-behavior: smooth;
}

/* Add this to the bottom of css/styles.css */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

/* 
  STEP 1: Define the properties for smooth animation.
  (This block remains unchanged)
*/
@property --pos-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --pos-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 3.56%;
}

@property --size1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 46.44%;
}

@property --size2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 46.44%;
}

/*
  This property will hold the angle for our new spinning gradient.
*/
@property --rotation-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/*
  Creates a simple, continuous 360-degree spin.
*/
@keyframes spin {
  to {
    --rotation-angle: 360deg;
  }
}

/* 
  STEP 2: Update the animation class for an infinite loop.
  The total duration is now 12000ms (12s).
*/
.animated-radial-gradient {
  /* Initial values are for Variant 1 */
  --pos-x: 50%;
  --pos-y: 3.56%;
  --size1: 46.44%;
  --size2: 46.44%;

  background: radial-gradient(
    var(--size1) var(--size2) at var(--pos-x) var(--pos-y),
    #011034 0%,
    #09090d 100%
  );

  /* The total duration is 12s, and it now loops forever */
  animation: radialGradientShift 6000ms ease-in-out infinite;
}

/* 
  STEP 3: Define the full keyframe sequence for all 4 variants.
*/
@keyframes radialGradientShift {
  /* === Stage 1: Animate from 1 to 2 === */
  /* Start at Variant 1 */
  0% {
    --size1: 46.44%;
    --size2: 46.44%;
    --pos-x: 50%;
    --pos-y: 3.56%;
  }
  /* End at Variant 2 (after 2000ms) */
  16.67% {
    --size1: 50%;
    --size2: 118.54%;
    --pos-x: 0%;
    --pos-y: 50%;
  }

  /* === Delay at Variant 2 for 1000ms === */
  25% {
    --size1: 50%;
    --size2: 118.54%;
    --pos-x: 0%;
    --pos-y: 50%;
  }

  /* === Stage 2: Animate from 2 to 3 === */
  /* End at Variant 3 (after 2000ms) */
  41.67% {
    --size1: 50%;
    --size2: 50%;
    --pos-x: 50%;
    --pos-y: 100%;
  }

  /* === Delay at Variant 3 for 1000ms === */
  50% {
    --size1: 50%;
    --size2: 50%;
    --pos-x: 50%;
    --pos-y: 100%;
  }

  /* === Stage 3: Animate from 3 to 4 === */
  /* End at Variant 4 (after 2000ms) */
  66.67% {
    --size1: 50%;
    --size2: 118.54%;
    --pos-x: 100%;
    --pos-y: 50%;
  }

  /* === Delay at Variant 4 for 1000ms === */
  75% {
    --size1: 50%;
    --size2: 118.54%;
    --pos-x: 100%;
    --pos-y: 50%;
  }

  /* === Stage 4: Animate from 4 back to 1 === */
  /* End at Variant 1 (after 2000ms) */
  91.67% {
    --size1: 46.44%;
    --size2: 46.44%;
    --pos-x: 50%;
    --pos-y: 3.56%;
  }

  /* === Delay at Variant 1 for 1000ms before looping === */
  100% {
    --size1: 46.44%;
    --size2: 46.44%;
    --pos-x: 50%;
    --pos-y: 3.56%;
  }
}

/*
  Vector 19
*/
.animated-vector19 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  /* Apply the animation with the EXACT same timing as the gradient */
  animation: vector19 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector19 {
  /* Start at default scale */
  0%,
  100% {
    transform: scaleX(1);
  }
  /* From variant 1 to 2 scale 1.3 applied, holded it in scale 2->3 and 3->4 then rolled back to scale 1 in variant 4->1 */
  16.67%,
  25%,
  41.67%,
  66.67%,
  75% {
    transform: scaleX(1.3);
  }

  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 11
=================================================================== */
.animated-vector11 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  /* Apply the animation with the EXACT same timing as the gradient */
  animation: vector11 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector11 {
  /* Start at default scale */
  0%,
  100% {
    transform: scaleX(1);
  }
  16.67%,
  25% {
    transform: scaleX(0.9);
  }
  41.67%,
  50% {
    transform: scaleX(0.7);
  }
  66.67%,
  75% {
    transform: scaleX(0.8);
  }
  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 21
=================================================================== */
.animated-vector21 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  /* Apply the animation with the EXACT same timing as the gradient */
  animation: vector21 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector21 {
  /* Start at default scale */

  /* Variant 1 */
  0%,
  100% {
    transform: scaleX(1);
  }
  /* 1 -> 2 */
  16.67%,
  25% {
    transform: scaleX(0.8);
  }
  /* 2 -> 3 */
  41.67%,
  50% {
    transform: scaleX(0.9);
  }
  /* 3 -> 4 */
  66.67%,
  75% {
    transform: scaleX(0.8);
  }
  /* 4 -> 1 */
  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 22
=================================================================== */
/* Sets the scaling origin for the zigzag line */
.animated-vector22 {
  transform-origin: left;
}

/* 
  Sets the specific vertical position for the dot inside the vector22 container.
  Adjust the 'top' percentage to perfectly match the tail of this specific line.
*/
.vector22-container .ellipse-synced {
  top: 99%;
}

/* ===================================================================
Vector 13
=================================================================== */
/* Sets the scaling origin for the zigzag line */
.animated-vector13 {
  transform-origin: left;
}
/* 
  Sets the specific vertical position for the dot inside the vector13 container.
  Adjust the 'top' percentage to perfectly match the tail of this specific line.
*/
.vector13-container .ellipse-synced {
  top: 42%;
  right: -10%;
}

/* ===================================================================
Vector 20
=================================================================== */
/* Sets the scaling origin for the zigzag line */
.animated-vector20 {
  transform-origin: left;
}

/* 
  THIS IS NEW: A specific class for the smaller 9px dots.
*/
.ellipse-synced-sm {
  width: 9px;
  height: 9px;
}

/* 
  Sets the specific vertical position for the dot inside the vector20 container.
  Adjust the 'top' percentage to perfectly match the tail of this specific line.
*/
.vector20-container .ellipse-synced {
  top: 60%; /* <-- ADJUST THIS PERCENTAGE to align the dot vertically */
}

/* ===================================================================
Vector 23
=================================================================== */
.animated-vector23 {
  transform-origin: left;
}

.vector23-container .ellipse-synced {
  top: 99%;
}

/* ===================================================================
Vector 14
=================================================================== */
.animated-vector14 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  /* Apply the animation with the EXACT same timing as the gradient */
  animation: vector14 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector14 {
  /* Start at default scale */

  /* Variant 1 */
  0%,
  100% {
    transform: scaleX(1);
  }
  /* 1 -> 2 */
  16.67%,
  25% {
    transform: scaleX(1.1);
  }
  /* 2 -> 3 */
  41.67%,
  50% {
    transform: scaleX(1.1);
  }
  /* 3 -> 4 */
  66.67%,
  75% {
    transform: scaleX(1.1);
  }
  /* 4 -> 1 */
  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 23
=================================================================== */
.animated-vector17 {
  transform-origin: left;
}
.vector17-container .ellipse-synced {
  top: 98%;
  left: 2%;
}

/* ===================================================================
Vector 10
=================================================================== */
.animated-vector10 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  animation: vector10 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector10 {
  /* Start at default scale */

  /* Variant 1 */
  0%,
  100% {
    transform: scaleX(1);
  }
  /* 1 -> 2 */
  16.67%,
  25% {
    transform: scaleX(0.8);
  }
  /* 2 -> 3 */
  41.67%,
  50% {
    transform: scaleX(1.2);
  }
  /* 3 -> 4 */
  66.67%,
  75% {
    transform: scaleX(1.2);
  }
  /* 4 -> 1 */
  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 15
=================================================================== */
.animated-vector15 {
  /* This ensures the flip originates from the left edge */
  transform-origin: left;

  /* Apply the animation with the EXACT same timing as the gradient */
  animation: vector15 6000ms ease-in-out infinite;
}

/*
  This animation will sync with the radial gradient's movement.
*/
@keyframes vector15 {
  /* Start at default scale */

  /* Variant 1 */
  0%,
  100% {
    transform: scaleX(1);
  }
  /* 1 -> 2 */
  16.67%,
  25% {
    transform: scaleX(0.7);
  }
  /* 2 -> 3 */
  41.67%,
  50% {
    transform: scaleX(1.2);
  }
  /* 3 -> 4 */
  66.67%,
  75% {
    transform: scaleX(0.8);
  }
  /* 4 -> 1 */
  91.67%,
  100% {
    transform: scaleX(1);
  }
}

/* ===================================================================
Vector 16
=================================================================== */
/* Sets the scaling origin for the zigzag line */
.animated-vector16 {
  transform-origin: left;
}

/* 
  Sets the specific vertical position for the dot inside the vector16 container.
  Adjust the 'top' percentage to perfectly match the tail of this specific line.
*/
.vector16-container .ellipse-synced {
  top: 1%; /* <-- ADJUST THIS PERCENTAGE to align the dot vertically */
}

/* ===================================================================
Vector 9
=================================================================== */

/* Unchanged */
.animated-vector9 {
  transform-origin: left;
}

/*
  This CSS sets the initial position of the ellipse.
  The JavaScript will then take over to animate it.
*/
.ellipse-synced {
  /* Takes the ellipse out of the normal flow */
  position: absolute;

  /* 
        Y-AXIS CONTROL: Aligns the ellipse vertically.
        Adjust this percentage to perfectly match the tail of your line.
    */
  top: 99%;

  /* 
        X-AXIS ANCHOR: Sets the starting point to the left edge,
        matching the JavaScript's calculation. This is the critical fix.
    */
  left: 1%;

  /* Give the ellipse a defined size */
  width: 16px;
  height: 16px;
}

/* Add transform-origin for the new vector line */
.animated-vector10 {
  transform-origin: left;
}

/* 
  THIS IS NEW: It sets the vertical position for the dot inside vector10.
  You may need to adjust the 'top' percentage to perfectly match the tail.
*/
.vector10-container .ellipse-synced {
  top: 100%; /* <-- ADJUST THIS PERCENTAGE to align the dot vertically */
}

.independent-dot {
  opacity: 0; /* Hidden by default */
  transition: opacity 0.8s ease-in-out;
}
.independent-dot.active {
  opacity: 1; /* Show when active */
}

/*
===================================================================
    DevBlock Neural Dynamic background change
===================================================================
*/

/*
  STEP 1: Register the gradient stop positions as custom properties.
  This is the key that allows the browser to smoothly animate them.
*/
@property --stop1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0.39%;
}
@property --stop2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}
@property --stop3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 51.88%;
}

/*
  STEP 2: Define the keyframe animation that shifts these stops.
*/
@keyframes shiftDevBlockBg {
  /* Mid-point of the animation will be Variant 2 */
  50% {
    --stop1: 5.12%;
    --stop2: 47.16%;
    --stop3: 69.88%;
  }
  /* End-point of the animation will be Variant 3 */
  100% {
    --stop1: 1.03%;
    --stop2: 69.98%;
    --stop3: 84.3%;
  }
}

/*
  STEP 3: Create a class to apply the animated background.
*/
.animated-devblock-button:hover {
  background: linear-gradient(
    91.61deg,
    #0e3186 var(--stop1),
    #542b89 var(--stop2),
    rgba(238, 49, 147, 0.5) var(--stop3),
    rgba(239, 87, 95, 0.465) 100%
  );

  /* 
    The animation takes 6000ms, loops forever, and alternates direction
    (1->2->3, then 3->2->1) for a smooth, continuous effect.
  */
  animation: shiftDevBlockBg 6000ms ease-in-out infinite alternate;
}

/* base inner pill look (matches Contact Us inner) */
.devblock-btn__inner {
  background: #0B0B10;
  transition: background .35s ease, color .2s ease;
  border-radius: 9999px;
  position: relative;   /* for any future effects */
}

/* optional focus style */
.devblock-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.5); /* soft blue focus */
  border-radius: 9999px;
}

/* your existing hover gradient + animation applies to the INNER span */
.animated-devblock-button:hover {
  background: linear-gradient(
    91.61deg,
    #0e3186 var(--stop1),
    #542b89 var(--stop2),
    rgba(238, 49, 147, 0.5) var(--stop3),
    rgba(239, 87, 95, 0.465) 100%
  );
  animation: shiftDevBlockBg 6000ms ease-in-out infinite alternate;
}

/* (only if not already declared somewhere) */
@keyframes shiftDevBlockBg {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* nice-to-have: stop the animation when not hovered (saves GPU) */
.animated-devblock-button { animation: none; background-size: 300% 300%; }

/* the outer wrapper (the gradient ring) */
.devblock-btn{
  border-radius:9999px;
  padding:2px;                                  /* matches p-[2px] */
  background: linear-gradient(to bottom right, #3b82f6, #ec4899);
  transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
}

/* HOVER: hide the ring completely */
.devblock-btn:hover{
  background: transparent !important;           /* no ring */
  padding: 2px !important;                        /* remove the 2px gap */
  box-shadow: none !important;
}

/* compensate for the removed 2px so the pill keeps its presence */
.devblock-btn:hover .devblock-btn__inner{
  transform: scale(1.02);                       /* subtle, looks natural */
  transition: transform .25s ease;
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.05);
}

.clipped-card {
  clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
}

/* This is the new, static wrapper that anchors the line. */
.timeline-heading-wrapper {
  position: relative;
}

/*
  This media query ensures the line only appears on desktop,
  where the vertical timeline is visible.
*/
@media (min-width: 640px) {
  /*
    The ::before pseudo-element is attached to the STATIC wrapper,
    so it WILL NOT MOVE when the h1 animates.
  */
  .timeline-heading-wrapper::before {
    content: "";
    position: absolute;
    background-color: rgba(156, 163, 175, 0.6); /* bg-gray-400/60 */
    height: 2px; /* Line thickness */
    width: 56px; /* Line length (this is 3.5rem) */
    top: 50%;
    transform: translateY(-50%);

    /*
      THIS IS THE KEY:
      Your content has padding of "sm:pl-24" (which is 6rem).
      Your vertical line is positioned at "left-10" (which is 2.5rem).
      To make the horizontal line bridge that gap, we position it
      -3.5rem (or -56px) to the left of the wrapper.
    */
    left: -72px;
  }
}

/* 1. INITIAL STATE: Make paragraphs invisible and slightly moved down */
.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. FINAL STATE: When the 'visible' class is added, fade them in and move them up */
.reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. SEQUENTIAL DELAY: Animate each paragraph one after another */
.reveal-text:nth-child(1) { transition-delay: 0.3s; }
.reveal-text:nth-child(2) { transition-delay: 0.5s; }
.reveal-text:nth-child(3) { transition-delay: 0.7s; }
.reveal-text:nth-child(4) { transition-delay: 0.9s; }
.reveal-text:nth-child(5) { transition-delay: 1.1s; }

/* Optional: Add spacing between paragraphs */
#who-we-are-text p+p, #what-we-do-text p + p {
  margin-top: 1.5em;
}

.perspective-\[1200px\] {
  perspective: 1200px;
  transition: height 0.3s ease;
}

/* CAROUSEL cards only */
#track .carousel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), 
              opacity 0.4s,
              filter 0.4s,
              height 0.3s ease;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  filter: saturate(0.8) brightness(0.9);
}

#track.no-transition .carousel-card {
  transition: none;
}

.card-inner {
  height: 100%;
  border-radius: 20px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  opacity: 0.35;
}
.card--active .card-inner {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15),
    0 12px 50px rgba(49, 96, 255, 0.35),
    0 0 120px 20px rgba(255, 0, 122, 0.12) inset,
    0px 4px 28px rgba(255, 255, 255, 0.3);
  background: linear-gradient(
      180deg,
      rgba(1, 16, 52, 0.95) 0%,
      rgba(84, 43, 137, 0.95) 43.8%,
      rgba(238, 49, 147, 0.85) 84.8%,
      rgba(239, 87, 95, 0.85) 99.96%
    ),
    rgba(19, 30, 55, 0.8);
  opacity: 1;
}

/* Gradient ring for carousel arrows */
.arrow-gradient-border {
  border: 1px solid transparent; /* required so border-image can paint */
  border-image-source: linear-gradient(134.63deg, #0E3186 22.5%, #FFFFFF 100%);
  border-image-slice: 1; /* must be 1 for border-image to show */
  border-radius: 50%;
}

/* Circular gradient ring for the carousel arrows */
.arrow-gradient-ring {
  border-radius: 9999px;       /* ensure the button itself is circular */
}

.arrow-gradient-ring::before {
  content: "";
  position: absolute;
  inset: 0;                    /* full size of the button */
  padding: 1px;                /* ring thickness */
  border-radius: 9999px;       /* circle */
  background: linear-gradient(134.63deg, #0E3186 22.5%, #FFFFFF 100%);
  /* Punch a hole so only the ring shows */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;        /* don't block clicks */
}

/* === NEW CASE STUDY VIEWER STYLES === */
#caseStudyViewer {
  scroll-margin-top: 90px;
  overflow-anchor: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(30px);
  transition: max-height 0.7s ease-out, opacity 0.5s ease-out,
    transform 0.6s ease-out, padding 0.5s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}
#caseStudyViewer.active {
  max-height: 100vh; /* A value larger than the content's expected height */
  opacity: 1;
  transform: translateY(0);

}
.view-case-study {
  position: relative;
  padding: 0.25em 1.5em; /* Space for brackets */
}

.showcase-card {
  position: relative;
  border-radius: 2%;
  overflow: hidden; /* ensure pseudo-element fits circle */
}

.showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.6px; /* border thickness */
  border-radius: 2%;
  border-image: linear-gradient(
    111.42deg,
    rgba(14, 49, 134, 0.75) 0%,
    rgba(102, 102, 102, 0.4) 100.96%
  ) 1;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* so it doesn’t block hover */
}

/* start hidden */
.fade-in {
  opacity: 0;
  transform: translateX(-150px); /* start 40px left */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in.show {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-cards {
  opacity: 0;
  transform: translateX(150px); /* start 40px right */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-cards.show {
  opacity: 1;
  transform: translateX(0);
}

/* ADD THIS CLASS FOR FADE-IN FROM BOTTOM */
.fade-in-bottom {
  opacity: 0;
  transform: translateY(150px); /* start 40px below */
  transition: opacity 1s ease-out, transform 1s ease-out;
  animation-fill-mode: forwards; 
}

.fade-in-bottom.show {
  opacity: 1;
  transform: translateY(0);
}

.puzzle-mission {
  aspect-ratio: 1.198;
  clip-path: shape(
    from 94.12% 0%,
    curve to 100% 7.05% with 97.37% 0%/100% 3.16%,
    vline to 19.82%,
    curve to 99.44% 20.47% with 100% 20.18%/99.74% 20.47%,
    curve to 89.64% 32.21% with 94.03% 20.47%/89.64% 25.73%,
    curve to 99.44% 43.96% with 89.64% 38.7%/94.03% 43.96%,
    curve to 100% 44.61% with 99.74% 43.96%/100% 44.25%,
    vline to 92.95%,
    curve to 94.12% 100% with 100% 96.84%/97.37% 100%,
    hline to 71.57%,
    curve to 64.39% 94.23% with 68.58% 100%/66.2% 97.08%,
    curve to 56.58% 89.6% with 62.6% 91.42%/59.77% 89.6%,
    curve to 48.78% 94.23% with 53.4% 89.6%/50.57% 91.42%,
    curve to 41.59% 100% with 46.97% 97.08%/44.58% 100%,
    hline to 20.31%,
    curve to 14.43% 92.95% with 17.06% 100%/14.43% 96.84%,
    vline to 52.84%,
    curve to 13.51% 52.76% with 14.13% 52.83%/13.82% 52.8%,
    curve to 13.34% 52.73% with 13.45% 52.75%/13.39% 52.74%,
    curve to 6.86% 58.22% with 12.4% 55.93%/9.86% 58.22%,
    curve to 0% 50% with 3.07% 58.22%/0% 54.54%,
    curve to 6.86% 41.78% with 0% 45.46%/3.07% 41.78%,
    curve to 13.38% 47.41% with 9.9% 41.78%/12.47% 44.14%,
    curve to 13.62% 47.37% with 13.46% 47.39%/13.54% 47.38%,
    curve to 14.43% 47.32% with 13.89% 47.34%/14.16% 47.33%,
    vline to 7.05%,
    curve to 20.31% 0% with 14.43% 3.16%/17.06% 0%,
    hline to 94.12%,
    close
  );
  background: linear-gradient(
    180deg,
    rgba(14, 49, 134, 0.12) 0%,
    rgba(84, 43, 137, 0.12) 50%,
    rgba(238, 49, 147, 0.06) 75%,
    rgba(239, 87, 95, 0.0558) 100%
  );
}

.services-clipped-card {
  aspect-ratio: 2.07;
  clip-path: shape(
    from 97.36% 0%,
    curve to 100% 5.35% with 98.82% 0%/100% 2.4%,
    vline to 94.65%,
    curve to 97.36% 100% with 100% 97.6%/98.82% 100%,
    hline to 2.64%,
    curve to 0% 94.65% with 1.18% 100%/0% 97.6%,
    vline to 23.3%,
    curve to 1.33% 22.16% with 0% 22.03%/0.84% 21.38%,
    curve to 6.44% 25.75% with 2.73% 24.41%/4.51% 25.75%,
    curve to 14.69% 9.03% with 10.99% 25.75%/14.69% 18.27%,
    curve to 13.96% 2.15% with 14.69% 6.58%/14.43% 4.25%,
    curve to 14.59% 0% with 13.74% 1.19%/14.07% 0%,
    hline to 97.36%,
    close
  );
}

/* Style the glow path to be invisible by default and add a smooth transition */
.webdev-card-glow {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* On hover of the parent card, make the glow path visible */
.webdev-card:hover .webdev-card-glow {
  opacity: 1;
}

/* Style the glow path to be invisible by default and add a smooth transition */
.appdev-card-glow {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* On hover of the parent card, make the glow path visible */
.appdev-svg-card:hover .appdev-card-glow {
  opacity: 1;
}

/* Style the glow path to be invisible by default and add a smooth transition */
.arvr-card-glow {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* On hover of the parent card, make the glow path visible */
.arvr-svg-card:hover .arvr-card-glow {
  opacity: 1;
}

/* Style the glow path to be invisible by default and add a smooth transition */
.cloud-card-glow {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* On hover of the parent card, make the glow path visible */
.cloud-svg-card:hover .cloud-card-glow {
  opacity: 1;
}

/* ============================================= */
/* CAROUSEL STYLES                             */
/* ============================================= */

/* This creates the container that holds the absolutely positioned slides */
#slides-container {
  position: relative;
  /* Height is set dynamically by JS to match the active slide */
  min-height: 0;
}

/* This is the style for EVERY slide in the carousel */
.carousel-slide {
  /* Position all slides on top of each other */
  position: absolute;
  top: 0;
  /* Center the absolutely positioned slide so max-width doesn't stick to the left */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  
  /* Make all slides invisible by default */
  opacity: 0;
  
  /* This creates the smooth fade effect when opacity changes */
  transition: opacity 0.7s ease-in-out;

  /* This prevents invisible slides from being accidentally clicked */
  pointer-events: none;
}

/* hidden state for service buttons */
.service-btn {
  opacity: 0;
  transform: translateX(-12px);
  transition: transform 400ms cubic-bezier(.2,.9,.2,1), opacity 400ms cubic-bezier(.2,.9,.2,1);
}

/* visible state */
.service-btn.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* optional small stagger scale on hover */
.service-btn .inner {
  transition: transform 150ms ease;
}
.service-btn:hover .inner { transform: scale(1.02); }

/* This style is applied ONLY to the currently visible slide */
.carousel-slide.active {
  /* Make the active slide visible */
  opacity: 1;
  /* Make the active slide clickable */
  pointer-events: auto;
}

.services-clipped-card > * {
  position: relative;
  z-index: 1; /* keep content above overlay */
}

.typewriter-paragraph {
  overflow: hidden; /* This is crucial to hide the text while the container grows */
  transition: max-height 0.3s ease-out; /* Controls the smoothness of the height change */
  max-height: 0; /* Start with the paragraph collapsed */
  will-change: max-height; /* A small performance hint for the browser */
}

.arrow-fill {
  fill: white;
  transition: fill 0.8s ease-in-out;
}

/* on hover, use the 270deg gradient */
.journey-card:hover .arrow-fill {
  fill: url(#arrow-gradient-hover);
}

/* Journey card: 2px vertical gradient ring on hover */
.journey-card:hover .border-gradient::before {
  padding: 1px; /* 2px ring thickness */
  background: linear-gradient(
    180deg,
    #0E3186 14.58%,
    rgba(138, 56, 245, 0.5) 34.29%,
    rgba(238, 49, 147, 0.5) 69.39%,
    rgba(239, 87, 95, 0.465) 77.56%
  );
}

/* badge positioning */
.logo-badge {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.border-gradient {
  position: relative;
  /* Important for positioning the pseudo-element */
  /* Ensure a background is set here if the inner content needs one */
  background: rgba(255, 255, 255, 0.05); /* Example background for the div */
  border-radius: 0.5rem; /* Ensure this matches your rounded-lg */
  overflow: hidden; /* This can help clip the border if it's slightly off */
}

.border-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px; /* This creates the border thickness */
  background: linear-gradient(
    180deg,
    #011034 14.58%,
    rgba(255, 255, 255, 0.1) 86.22%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* This creates the cut-out effect for the border */
  border-radius: inherit; /* This makes the border inherit the parent's border-radius */
  transition: 2s ease-in-out;
}

.border-gradient:hover::before {
  padding: 1px; /* Thicker border on hover */
  transition: 2s ease-in-out;
  background: linear-gradient(
    226.42deg,
    #0e3186 0%,
    #542b89 50%,
    rgba(238, 49, 147, 0.5) 75%,
    rgba(239, 87, 95, 0.465) 100%
  );
}

.shadow-wrapper::before {
  content: "";
  position: absolute;
  /* Position it to match the inner container perfectly */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Apply the drop-shadow filter HERE */
  filter: drop-shadow(0 0 35px rgba(0, 153, 255, 0.6));
  
  /* Send it behind the actual content */
  z-index: -1; 
}

.redefining-gradient {
  position: relative;
  border-radius: 1rem; /* rounded corners */
  background: rgba(89, 114, 175, 0.07); /* translucent background */
  backdrop-filter: blur(22px); /* frosted glass blur */
  box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.3); /* soft shadow */
  overflow: hidden; /* ensures border clipping */
}

.redefining-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.1px; /* border thickness */
  border-radius: inherit;
  background: linear-gradient(
    122.69deg,
    rgba(14, 49, 134, 0.5) 0%,
    rgba(255, 255, 255, 0.1) 97.16%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.circle-gradient {
  position: relative;
  border-radius: 50%;
  overflow: hidden; /* ensure pseudo-element fits circle */
}

.circle-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px; /* border thickness */
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.375) 0%,
    rgba(102, 102, 102, 0) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* so it doesn’t block hover */
}

/* Inactive gradient */
.tab-btn {
  background: linear-gradient(94.94deg, #0E3186 0%, #030C20 100%);
  transition: all 0.3s ease;
}

/* Active gradient */
.active-tab {
  background: linear-gradient(
    94.94deg,
    #0E3186 0%,
    #542B89 37.02%,
    rgb(238, 49, 147) 74.52%,
    rgb(239, 87, 95) 100%
  );
  transform: translateY(-2px); /* tiny lift effect */
}

#heroSubtitle, #faqSubtitle, #contactSubtitle, #neutralSubtitle {
  min-height: 3rem;
}

/* Reusable helper: hides scrollbar visuals, preserves scroll */
.no-scrollbar {
  -ms-overflow-style: none;   /* IE & old Edge */
  scrollbar-width: none;      /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { /* Chrome/Safari/Opera */
  display: none;
}

/* Animation for tab content */
.content-fade-in {
  animation: fadeIn 0.4s ease-in-out forwards;
}

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

.footer-border-gradient {
  position: relative;
  background-color: transparent;
  border-radius: 1rem; /* Equivalent to rounded-2xl */
  overflow: hidden; /* clip child borders */
}

.footer-border-gradient::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; left:0; right:0; bottom:0 */
  padding: 1.4px; /* border thickness */
  background: linear-gradient(
    to bottom right,
    #ee3193 0%,
    #542b89 50%,
    #0e3186 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit; /* ✅ Now matches parent’s radius */
  pointer-events: none;   /* prevent blocking interactions */
}

/* circle badge styles */
.circle-badge {
  --badge-size: 46px; /* matches the requested line-height */
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 9999px; /* full circle */
  display: inline-grid;
  place-items: center;
  background: linear-gradient(
    180deg,
    #07215D 0.95%,
    #542B89 31.7%,
    rgba(238, 49, 147, 1) 73.6%,
    rgba(239, 87, 95, 1) 100%
  );
  /* optional subtle inner shadow for depth */
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(16,24,40,0.06);
}

/* Add this to your global CSS file */
.timeline-gradient-line {
  background-image: linear-gradient(to right, #0E3186, #542B89, rgb(238, 49, 147), rgb(239, 87, 95));
}

.project-showcase-gradient {
  position: relative;
  background-color: transparent;
  border-radius: 20px; /* You can adjust (e.g., 1px, 10px, or 20px for curves) */
  overflow: hidden; /* Ensures the border is clipped at the corners */
}

.project-showcase-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1px; /* Border thickness */
  background: linear-gradient(
    111.42deg,
    rgba(14, 49, 134, 0.75) 0%,
    rgba(102, 102, 102, 0.4) 100.96%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit; /* Inherits the parent’s radius */
}

/* The tabs wrapper already has the baseline via Tailwind classes.
   We just make sure overflow allows the pseudo underline to sit over it. */
.tabs-bar{
  overflow: visible;
}

/* Base tab: create a slot for a custom underline */
.faq-tab{
  position: relative;         /* ensure ::after is positioned to the tab */
  line-height: 1.2;
}

/* Active gradient underline that sits ON TOP of the baseline */
.faq-tab.faq-active-tab::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;                /* thickness of the gradient underline */
  bottom: -3px;               /* slightly overlaps the baseline below */
  border-radius: 9999px;
  background: linear-gradient(90deg,#0E3186 0%, #542B89 34.13%, #EE3193 70.19%, #EF575F 100%);
  z-index: 1;                 /* ensure it sits above the baseline */
}

/* Optional: show a faint underline on hover for inactive tabs */
.faq-tab:not(.faq-active-tab):hover::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -3px;
  border-radius: 9999px;
  background: rgba(255,255,255,.35);
}

.forms-svg-card {
  position: relative;
  width: 100%;
  border-radius: 11.5px;
}
/* border ring */
.forms-svg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1.5px; /* thickness of the border */
  background: linear-gradient(
    90.27deg,
    #0E3186 0.06%,
    #542B89 31.77%,
    rgba(238, 49, 147, 0.5) 70.69%,
    rgba(239, 87, 95, 0.465) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

#heroSubtitle, #faqSubtitle, #contactSubtitle, #neutralSubtitle {
  min-height: 3.5rem; 
}

.faq-svg-card {
  position: relative;
  width: 100%;
  border-radius: 11.5px;
  background: linear-gradient(
      90.31deg,
      rgba(14, 49, 134, 0.10) 0%,
      rgba(84, 43, 137, 0.10) 50%,
      rgba(238, 49, 147, 0.05) 75%,
      rgba(239, 87, 95, 0.0465) 100%
    );
}

/* border ring */
.faq-svg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1.5px; /* thickness of the border */
  background: linear-gradient(
    90.27deg,
    #0E3186 0.06%,
    #542B89 31.77%,
    rgba(238, 49, 147, 0.5) 70.69%,
    rgba(239, 87, 95, 0.465) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.faq-svg-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  color: white;
  width: 100%;
}

/* Keep gradient border shell, but neutralize Chrome autofill paint */
.faq-header:-webkit-autofill,
.faq-header:-webkit-autofill:hover,
.faq-header:-webkit-autofill:focus,
.faq-header:-webkit-autofill:active {
  -webkit-text-fill-color: #e5e7eb;     /* text color on autofill */
  caret-color: #ffffff;
  /* paint our own inset bg so autofill yellow/blue is hidden */
  -webkit-box-shadow: 0 0 0 1000px rgba(14,49,134,0.07) inset;
          box-shadow: 0 0 0 1000px rgba(14,49,134,0.07) inset;
  border-radius: inherit;               /* match outer rounding */
  transition: background-color 9999s ease, color 9999s ease; /* prevent flash */
}