.bg-pattern-grid {
  --bs-primary-rgb: 53, 96, 166;
  --grid-size: 60px;
  --grid-thikness: 1px;
  --grid-color-alpha: 0.07;
  --grid-color-alpha-1: 0.115;
  --grid-color: rgba(var(--bs-primary-rgb), var(--grid-color-alpha));
  --grid-color-light: rgba(var(--bs-primary-rgb), var(--grid-color-alpha-1));
  --grid-lines:
    linear-gradient(
      var(--angle, 90deg),
      var(--grid-color) var(--grid-thikness),
      transparent var(--grid-thikness)
    ),
    linear-gradient(
      180deg,
      var(--grid-color) var(--grid-thikness),
      transparent var(--grid-thikness)
    );
  --grid-lines-light:
    linear-gradient(
      var(--angle, 90deg),
      var(--grid-color-light) var(--grid-thikness),
      transparent var(--grid-thikness)
    ),
    linear-gradient(
      180deg,
      var(--grid-color-light) var(--grid-thikness),
      transparent var(--grid-thikness)
    );
  --grid-lines-position: 50% 50%, 50% 50%;
  --grid-lines-size:
    var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  --grid-lines-repeat: repeat, repeat;
  --grid-meteor-color: rgba(var(--bs-primary-rgb), 1);
  --grid-meteor-1-location: calc(var(--grid-size) * -1);
  --grid-meteor-2-location: calc(var(--grid-size) * -1);
  --grid-meteor-3-location: calc(var(--grid-size) * -1);
  --grid-meteor-4-location: calc(var(--grid-size) * -1);
  --grid-meteor-5-location: calc(var(--grid-size) * -1);
  --grid-meteor-6-location: calc(var(--grid-size) * -1);
  --grid-meteor-7-location: calc(var(--grid-size) * -1);
  --grid-meteors:
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-1-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-1-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-1-location) + var(--grid-size) + 1px)
    ),
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-2-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-2-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-2-location) + var(--grid-size) + 1px)
    ),
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-3-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-3-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-3-location) + var(--grid-size) + 1px)
    ),
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-4-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-4-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-4-location) + var(--grid-size) + 1px)
    ),
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-5-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-5-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-5-location) + var(--grid-size) + 1px)
    ),
    linear-gradient(
      180deg,
      transparent var(--grid-meteor-6-location),
      var(--grid-meteor-color)
        calc(var(--grid-meteor-6-location) + var(--grid-size)),
      transparent calc(var(--grid-meteor-6-location) + var(--grid-size) + 1px)
    );
  --grid-meteor-1-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2
    )
    0;
  --grid-meteor-2-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2 + var(--grid-size) *
        3
    )
    0;
  --grid-meteor-3-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2 - var(--grid-size) *
        4
    )
    0;
  --grid-meteor-4-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2 + var(--grid-size) *
        5
    )
    0;
  --grid-meteor-5-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2 - var(--grid-size) *
        6
    )
    0;
  --grid-meteor-6-position: calc(
      50% - var(--grid-size) / 2 + var(--grid-thikness) / 2 + var(--grid-size) *
        3
    )
    0;
  --grid-meteors-position:
    var(--grid-meteor-1-position), var(--grid-meteor-2-position),
    var(--grid-meteor-3-position), var(--grid-meteor-4-position),
    var(--grid-meteor-5-position), var(--grid-meteor-6-position);
  --grid-meteors-size:
    var(--grid-thikness) 100%, var(--grid-thikness) 100%,
    var(--grid-thikness) 100%, var(--grid-thikness) 100%,
    var(--grid-thikness) 100%, var(--grid-thikness) 100%;
  --grid-meteors-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.bg-pattern-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  --grid-meteor-speed: 15s;
  --grid-meteor-delay: 2s;
  background-image: var(--grid-lines), var(--grid-meteors);
  background-size: var(--grid-lines-size), var(--grid-meteors-size);
  background-position: var(--grid-lines-position), var(--grid-meteors-position);
  background-repeat: var(--grid-lines-repeat), var(--grid-meteors-repeat);
}
.bg-pattern-grid.bg-pattern-grid-light {
  background-image: var(--grid-lines-light), var(--grid-meteors);
}
.bg-pattern-grid.pattern-grid-width-full {
  top: 0;
  margin: auto;
  max-width: 100%;
  --grid-size: 2rem;
}
.bg-pattern-grid.pattern-grid-size-xs {
  top: -60px;
  margin: auto;
  max-width: 720px;
  --grid-size: 1.5rem;
}
.bg-pattern-grid-hero-animations {
  animation: pattern-grid-meteors var(--grid-meteor-speed) linear
    var(--grid-meteor-delay) infinite normal forwards;
}
.bg-mask-grid {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      #000 35%,
      #000 65%,
      transparent 100%
    ),
    linear-gradient(90deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      #000 35%,
      #000 65%,
      transparent 100%
    ),
    linear-gradient(90deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 0;
}

@keyframes pattern-grid-meteors {
  0% {
    --grid-meteor-1-location: calc(var(--grid-size) * -1);
    --grid-meteor-2-location: calc(var(--grid-size) * -1);
    --grid-meteor-3-location: calc(var(--grid-size) * -1);
    --grid-meteor-4-location: calc(var(--grid-size) * -1);
    --grid-meteor-5-location: calc(var(--grid-size) * -1);
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  14.2857% {
    --grid-meteor-1-location: 50%;
    --grid-meteor-2-location: calc(var(--grid-size) * -1);
    --grid-meteor-3-location: calc(var(--grid-size) * -1);
    --grid-meteor-4-location: calc(var(--grid-size) * -1);
    --grid-meteor-5-location: calc(var(--grid-size) * -1);
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  28.5714% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 50%;
    --grid-meteor-3-location: calc(var(--grid-size) * -1);
    --grid-meteor-4-location: calc(var(--grid-size) * -1);
    --grid-meteor-5-location: calc(var(--grid-size) * -1);
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  42.8571% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 100%;
    --grid-meteor-3-location: 50%;
    --grid-meteor-4-location: calc(var(--grid-size) * -1);
    --grid-meteor-5-location: calc(var(--grid-size) * -1);
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  57.1429% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 100%;
    --grid-meteor-3-location: 100%;
    --grid-meteor-4-location: 50%;
    --grid-meteor-5-location: calc(var(--grid-size) * -1);
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  71.4286% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 100%;
    --grid-meteor-3-location: 100%;
    --grid-meteor-4-location: 100%;
    --grid-meteor-5-location: 50%;
    --grid-meteor-6-location: calc(var(--grid-size) * -1);
  }

  85.7143% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 100%;
    --grid-meteor-3-location: 100%;
    --grid-meteor-4-location: 100%;
    --grid-meteor-5-location: 100%;
    --grid-meteor-6-location: 50%;
  }

  100% {
    --grid-meteor-1-location: 100%;
    --grid-meteor-2-location: 100%;
    --grid-meteor-3-location: 100%;
    --grid-meteor-4-location: 100%;
    --grid-meteor-5-location: 100%;
    --grid-meteor-6-location: 100%;
  }
}

@property --grid-meteor-6-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --gradient-bg-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --grid-meteor-3-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --grid-meteor-7-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --grid-meteor-5-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --counter-number {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --grid-meteor-2-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --line-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --grid-meteor-1-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --grid-meteor-4-location {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}

/* colourful dots Animations */
.enc-star-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.enc-star-field .star {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  box-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor;
  animation: starTwinkle var(--duration) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
.star.star-streak {
  z-index: 5;
  overflow: visible;
  animation:
    starTwinkle var(--duration) ease-in-out infinite,
    starFlash 1.2s ease-out;
}

.star.star-streak::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 0;
  height: 2px;

  transform: translate(-50%, -50%) rotate(-25deg);
  transform-origin: left center;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    #0b325e,
    #178fff,
    #0b325e,
    transparent
  );

  box-shadow:
    0 0 6px rgba(32, 142, 255, 0.8),
    0 0 14px rgba(32, 142, 255, 0.45),
    0 0 28px rgba(32, 142, 255, 0.25);

  opacity: 0;

  animation: starTrail 1.2s ease-out;
}

@keyframes starFlash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  20% {
    transform: scale(1.8);
    filter: brightness(2.2);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes starTrail {
  0% {
    width: 0;
    opacity: 0;
  }

  15% {
    width: 20px;
    opacity: 0.8;
  }

  50% {
    width: 80px;
    opacity: 1;
  }

  100% {
    width: 140px;
    opacity: 0;
  }
}

/* Glow Line Animation Cards */
.glow-hover {
  position: relative;
  overflow: hidden;
}
.glow-hover::before,
.glow-hover::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 26%;
  height: 2px;
  border-radius: 999px;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(53, 96, 166, 0.15) 15%,
    rgba(53, 96, 166, 1) 50%,
    rgba(53, 96, 166, 0.15) 85%,
    transparent 100%
  );

  box-shadow:
    0 0 6px rgba(6, 189, 204, 0.45),
    0 0 14px rgba(6, 189, 204, 0.25);

  will-change: width, opacity;
}

.glow-hover::before {
  left: 35%;
}
.glow-hover::after {
  right: 35%;
}
.glow-hover:hover::before {
  animation: leftGlow 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
.glow-hover:hover::after {
  animation: rightGlow 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
.reveal-cards .card {
  opacity: 0;
  transform: translate3d(0px, 100%, 0px);
  transition: 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-cards .card.animate {
  animation: 1s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal forwards running fadeInUp;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0px, 100%, 0px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes leftGlow {
  from {
    width: 25%;
  }
  to {
    width: 58%;
  }
}
@keyframes rightGlow {
  from {
    width: 25%;
  }
  to {
    width: 58%;
  }
}