.banner-section {
  position: relative;
  background-color: #0b1220;
  background-image:
    radial-gradient(1200px 700px at 18% 22%, rgba(0, 212, 255, 0.22), transparent 60%),
    radial-gradient(900px 600px at 88% 12%, rgba(255, 0, 170, 0.16), transparent 58%),
    radial-gradient(760px 560px at 74% 88%, rgba(0, 255, 190, 0.14), transparent 55%),
    linear-gradient(120deg, #0b1220, #102a43, #140b2f, #042f3a);
  background-size: 240% 240%;
  animation: tm-hero-gradient 22s ease-in-out infinite;
}

.banner-section::before,
.banner-section::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  filter: blur(40px);
  transform: translate3d(0, 0, 0);
}

.banner-section::before {
  background:
    radial-gradient(420px 320px at 15% 30%, rgba(59, 130, 246, 0.55), transparent 60%),
    radial-gradient(520px 380px at 75% 25%, rgba(168, 85, 247, 0.42), transparent 62%),
    radial-gradient(520px 420px at 70% 85%, rgba(34, 211, 238, 0.34), transparent 62%);
  animation: tm-hero-blobs-1 18s ease-in-out infinite;
}

.banner-section::after {
  background:
    radial-gradient(520px 420px at 30% 75%, rgba(16, 185, 129, 0.30), transparent 62%),
    radial-gradient(520px 420px at 92% 62%, rgba(245, 158, 11, 0.18), transparent 62%);
  animation: tm-hero-blobs-2 24s ease-in-out infinite;
  opacity: 0.7;
}

.banner-section .slide-item .bg-image:before {
  background-color: rgba(24, 25, 28, 0.55);
}

.banner-section .bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banner-section .tm-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
}

.banner-section .banner-carousel,
.banner-section > .auto-container {
  position: relative;
  z-index: 2;
}

@keyframes tm-hero-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes tm-hero-blobs-1 {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(5%, 3%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
}

@keyframes tm-hero-blobs-2 {
  0% {
    transform: translate3d(4%, 3%, 0) scale(1);
  }
  50% {
    transform: translate3d(-5%, -2%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(4%, 3%, 0) scale(1);
  }
}

.tm-home1-slider-hidden {
  display: none !important;
}

.tm-typing-hero {
  overflow: hidden;
}

.tm-typing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.tm-typing-hero .tm-hero-mesh {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  filter: saturate(1.15);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.tm-typing-hero .tm-hero-mesh::before,
.tm-typing-hero .tm-hero-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tm-typing-hero .tm-hero-mesh::before {
  background-image:
    radial-gradient(circle, rgba(34, 211, 238, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(168, 85, 247, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(16, 185, 129, 0.22) 0 2px, transparent 4px),
    radial-gradient(circle, rgba(245, 158, 11, 0.18) 0 2px, transparent 4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 1px, transparent 3px);
  background-size: 520px 520px, 640px 640px, 740px 740px, 860px 860px, 54px 54px;
  background-position: 10% 20%, 70% 10%, 55% 75%, 18% 82%, 0 0;
  opacity: 0.75;
  animation: tm-hero-mesh-dots 67s linear infinite alternate;
}

.tm-typing-hero .tm-hero-mesh::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(closest-side, rgba(59, 130, 246, 0.22), transparent 72%),
    radial-gradient(closest-side, rgba(168, 85, 247, 0.18), transparent 72%);
  background-size: 110px 110px, 110px 110px, 900px 700px, 900px 700px;
  background-position: 0 0, 0 0, 15% 25%, 85% 75%;
  opacity: 0.28;
  animation: tm-hero-mesh-grid 89s ease-in-out infinite alternate;
}

.tm-typing-hero .auto-container {
  position: relative;
  z-index: 3;
}

#tm-typewriter {
  white-space: nowrap;
}

.tm-typewriter-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 6px;
  background: currentColor;
  transform: translateY(0.12em);
  animation: tm-typewriter-blink 1s steps(1) infinite;
}

@keyframes tm-typewriter-blink {
  50% {
    opacity: 0;
  }
}

@keyframes tm-hero-mesh-dots {
  0% {
    transform: translate3d(-2.2%, -1.6%, 0) rotate(0deg);
    background-position: 10% 20%, 70% 10%, 55% 75%, 18% 82%, 0 0;
  }
  17% {
    transform: translate3d(1.2%, -0.8%, 0) rotate(1.1deg);
    background-position: calc(10% + 180px) calc(20% + 90px),
      calc(70% + 80px) calc(10% + 210px),
      calc(55% - 140px) calc(75% + 120px),
      calc(18% + 260px) calc(82% - 160px),
      120px 180px;
  }
  33% {
    transform: translate3d(-0.6%, 1.1%, 0) rotate(-0.6deg);
    background-position: calc(10% + 40px) calc(20% + 220px),
      calc(70% + 260px) calc(10% + 40px),
      calc(55% - 320px) calc(75% + 210px),
      calc(18% + 120px) calc(82% - 280px),
      240px 40px;
  }
  57% {
    transform: translate3d(1.8%, 0.2%, 0) rotate(1.8deg);
    background-position: calc(10% + 260px) calc(20% + 170px),
      calc(70% + 120px) calc(10% + 330px),
      calc(55% - 420px) calc(75% + 80px),
      calc(18% + 360px) calc(82% - 90px),
      40px 260px;
  }
  76% {
    transform: translate3d(-1.4%, -0.3%, 0) rotate(-1.3deg);
    background-position: calc(10% + 110px) calc(20% + 310px),
      calc(70% + 390px) calc(10% + 170px),
      calc(55% - 230px) calc(75% + 260px),
      calc(18% + 440px) calc(82% - 240px),
      300px 220px;
  }
  100% {
    transform: translate3d(2.4%, 1.7%, 0) rotate(2.2deg);
    background-position: calc(10% + 320px) calc(20% + 260px),
      calc(70% + 420px) calc(10% + 360px),
      calc(55% - 520px) calc(75% + 300px),
      calc(18% + 560px) calc(82% - 420px),
      420px 340px;
  }
}

@keyframes tm-hero-mesh-grid {
  0% {
    transform: translate3d(-0.8%, 0.9%, 0) rotate(0deg);
    background-position: 0 0, 0 0, 15% 25%, 85% 75%;
  }
  22% {
    transform: translate3d(0.9%, 0.2%, 0) rotate(1.4deg);
    background-position: 110px 70px, 70px 110px, calc(15% + 120px) calc(25% + 40px), calc(85% - 140px) calc(75% - 50px);
  }
  49% {
    transform: translate3d(-0.3%, -0.7%, 0) rotate(-1.2deg);
    background-position: 60px 170px, 170px 60px, calc(15% + 40px) calc(25% + 130px), calc(85% - 60px) calc(75% - 140px);
  }
  71% {
    transform: translate3d(1.1%, -0.4%, 0) rotate(2.1deg);
    background-position: 190px 110px, 110px 190px, calc(15% + 180px) calc(25% + 90px), calc(85% - 170px) calc(75% - 80px);
  }
  100% {
    transform: translate3d(0.8%, -0.9%, 0) rotate(0deg);
    background-position: 260px 200px, 200px 260px, calc(15% + 240px) calc(25% + 170px), calc(85% - 260px) calc(75% - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-section {
    animation: none;
    background-size: cover;
  }

  .banner-section::before,
  .banner-section::after {
    animation: none;
  }

  .tm-typing-hero .tm-hero-mesh::before,
  .tm-typing-hero .tm-hero-mesh::after {
    animation: none;
  }
}