.elementor-1492 .elementor-element.elementor-element-64bdbf5{width:100%;max-width:100%;}.elementor-1492 .elementor-element.elementor-element-64bdbf5 > .elementor-widget-container{margin:-10px -10px -10px -10px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-64bdbf5 *//* =========================================================
   CREATIVE ANIMATED HERO UPGRADE
========================================================= */

.dts-services .services-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
}


/* Animated grid */

.dts-services .hero-grid-lines {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.045) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  animation: heroGridMove 18s linear infinite;
}


/* Glowing background */

.dts-services .hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}

.dts-services .hero-glow-one {
  width: 420px;
  height: 420px;

  background: #6D28D9;

  top: -120px;
  left: 25%;

  animation: glowFloat 9s ease-in-out infinite;
}

.dts-services .hero-glow-two {
  width: 350px;
  height: 350px;

  background: #A78BFA;

  right: -100px;
  bottom: -100px;

  animation: glowFloat 11s ease-in-out infinite reverse;
}


/* New hero layout */

.dts-services .hero-layout {
  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;

  align-items: center;
}


/* Floating shapes */

.dts-services .floating-shape {
  position: absolute;

  border: 1px solid rgba(167,139,250,0.3);

  border-radius: 20px;

  animation: shapeFloat 8s ease-in-out infinite;
}

.dts-services .shape-one {
  width: 70px;
  height: 70px;

  left: 4%;
  top: 18%;

  transform: rotate(25deg);
}

.dts-services .shape-two {
  width: 45px;
  height: 45px;

  right: 42%;
  bottom: 12%;

  border-radius: 50%;

  animation-delay: 2s;
}

.dts-services .shape-three {
  width: 90px;
  height: 90px;

  right: 5%;
  top: 10%;

  transform: rotate(45deg);

  animation-delay: 4s;
}


/* Hero entrance animation */

.dts-services .hero-animate {
  opacity: 0;
  transform: translateY(30px);

  animation: heroReveal 0.9s forwards ease;
}

.dts-services .hero-delay-1 {
  animation-delay: 0.2s;
}

.dts-services .hero-delay-2 {
  animation-delay: 0.4s;
}

.dts-services .hero-delay-3 {
  animation-delay: 0.6s;
}

.dts-services .hero-delay-4 {
  animation-delay: 0.8s;
}

.dts-services .hero-delay-5 {
  animation-delay: 1s;
}


/* Right visual */

.dts-services .hero-visual {
  position: relative;

  min-height: 510px;
}


/* Main dashboard */

.dts-services .visual-main-card {
  position: absolute;

  width: 100%;
  max-width: 450px;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  padding: 25px;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.04)
    );

  border: 1px solid rgba(255,255,255,0.18);

  backdrop-filter: blur(18px);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.3);

  animation: dashboardFloat 7s ease-in-out infinite;
}


/* Dashboard top */

.dts-services .visual-top {
  display: flex;
  align-items: center;
  gap: 12px;

  padding-bottom: 24px;

  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dts-services .visual-logo {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #A78BFA;

  font-weight: 900;

  color: #1E0B4B !important;
}

.dts-services .visual-top span {
  flex: 1;

  font-size: 12px;
  font-weight: 700;

  color: #FFFFFF !important;
}

.dts-services .visual-status {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #A78BFA;

  box-shadow: 0 0 15px #A78BFA;

  animation: statusPulse 2s infinite;
}


/* Dashboard content */

.dts-services .visual-content {
  padding-top: 30px;
}

.dts-services .visual-small-text {
  font-size: 10px;
  letter-spacing: 1.5px;

  color: #C4B5FD !important;
}


/* Chart */

.dts-services .visual-chart {
  position: relative;

  height: 190px;

  margin: 30px 0;

  border-bottom: 1px solid rgba(255,255,255,0.12);

  overflow: hidden;
}

.dts-services .chart-line {
  position: absolute;

  width: 13%;
  bottom: 0;

  border-radius: 8px 8px 0 0;

  background:
    linear-gradient(
      to top,
      #6D28D9,
      #C4B5FD
    );

  animation: chartGrow 1.4s ease forwards;
}

.dts-services .chart-line-one {
  left: 2%;
  height: 30%;
}

.dts-services .chart-line-two {
  left: 20%;
  height: 45%;
  animation-delay: 0.15s;
}

.dts-services .chart-line-three {
  left: 38%;
  height: 55%;
  animation-delay: 0.3s;
}

.dts-services .chart-line-four {
  left: 56%;
  height: 75%;
  animation-delay: 0.45s;
}

.dts-services .chart-line-five {
  left: 74%;
  height: 100%;
  animation-delay: 0.6s;
}


/* Bottom dashboard */

.dts-services .visual-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dts-services .visual-bottom small {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;

  color: #BDB2D0 !important;
}

.dts-services .visual-bottom strong {
  font-size: 19px;

  color: #FFFFFF !important;
}

.dts-services .visual-growth {
  padding: 8px 12px;

  border-radius: 8px;

  background: rgba(167,139,250,0.15);

  font-size: 11px;
  font-weight: 700;

  color: #C4B5FD !important;
}


/* Floating cards */

.dts-services .hero-floating-card {
  position: absolute;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 17px;

  border-radius: 15px;

  background: #FFFFFF;

  box-shadow:
    0 20px 45px rgba(0,0,0,0.2);

  animation: cardFloat 6s ease-in-out infinite;
}

.dts-services .floating-card-one {
  left: -30px;
  top: 14%;
}

.dts-services .floating-card-two {
  right: -25px;
  bottom: 12%;

  animation-delay: 1.5s;
}

.dts-services .floating-card-three {
  left: 5%;
  bottom: 5%;

  animation-delay: 3s;
}

.dts-services .floating-icon {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #EDE9FE;

  color: #6D28D9 !important;
}

.dts-services .hero-floating-card small {
  display: block;

  font-size: 9px;

  color: #777085 !important;
}

.dts-services .hero-floating-card strong {
  display: block;

  margin-top: 3px;

  font-size: 12px;

  color: #1E0B4B !important;
}


/* Pulse dot */

.dts-services .pulse-dot {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #6D28D9;

  box-shadow: 0 0 0 0 rgba(109,40,217,0.5);

  animation: pulseDot 2s infinite;
}


/* Hero animations */

@keyframes heroReveal {

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes heroGridMove {

  from {
    background-position: 0 0;
  }

  to {
    background-position: 60px 60px;
  }

}

@keyframes glowFloat {

  0%, 100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(30px, 35px);
  }

}

@keyframes shapeFloat {

  0%, 100% {
    transform: translateY(0) rotate(25deg);
  }

  50% {
    transform: translateY(-20px) rotate(45deg);
  }

}

@keyframes dashboardFloat {

  0%, 100% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 12px));
  }

}

@keyframes cardFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

}

@keyframes chartGrow {

  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }

}

@keyframes statusPulse {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

}

@keyframes pulseDot {

  70% {
    box-shadow:
      0 0 0 12px rgba(109,40,217,0);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(109,40,217,0);
  }

}/* End custom CSS */