/* Ensure the heading wrapper creates a positioning context */
.ak-section-heading {
  position: relative;            /* critical */
  overflow: visible;             /* avoid clipping the big text */
}

/* Shimmering background word behind the H2 */
.background-text {
  position: absolute;
  inset: 0;                      /* fill the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;          /* don’t block clicks/hover */
  user-select: none;

  /* Make it big and centered like a watermark */
  font-family: "Oxanium", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(36px, 14vw, 80px);

  /* Put it BEHIND the H2 but ABOVE the background */
  z-index: 0;
  opacity: 0.15;                 /* raise a bit so it’s visible */

  /* Shimmer gradient */
  background: linear-gradient(to right, #222 0%, #fff 50%, #222 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;

  /* Clip the gradient into the text */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;            /* Firefox */

  animation: shimmer 2.5s ease-in-out infinite alternate;
}

/* Ensure the H2 sits above the watermark */
.ak-section-heading h2 {
  position: relative;            /* create new stacking context */
  z-index: 1;                    /* above .background-text */
}

/* The shimmer motion */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



/* why choose animation start */
.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 
linear;
    animation-timing-function: 
linear;
}

@keyframes float-bob-y
{
  0% {
    transform: translateY(-20px);
}

50% {
    transform: translateY(-10px);
}
100% {
    transform: translateY(-20px);
}
}
/* why choose animation end */