/* Section Background */
.heroo-section {
  font-family: sans-serif;
  position: relative;
  padding: 100px 20px;
  background: radial-gradient(circle at center, #0a0f2c, #000);
  overflow: hidden;
  text-align: center;
  color: #fff;
  height: 595px;
}

.heroo-overlay {
  position: absolute;
  inset: 0;
  background-image: url("grid-pattern.png");
  background-size: cover;
  opacity: 0.2;
  z-index: 1;
}

/* Container */
.heroo-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

/* Headings */
.heroo-title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

#typewritero {
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #fff;
  padding-right: 5px;
  animation: blink 1s infinite;
  color: #a855f7;
}

@keyframes blink {
  0%,
  50%,
  100% {
    border-color: transparent;
  }

  25%,
  75% {
    border-color: #fff;
  }
}

.heroo-subtitle {
  font-size: 14px;
  max-width: 700px;
  margin: 20px auto;
  line-height: 1.6;
}

/* Buttons */
.heroo-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btno {
  padding: 9px 30px;
  border-radius: 30px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.btno-explore {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
}

.btno-explore:hover {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
}

.btno-demos {
  border: 2px solid #8b5cf6;
  color: #8b5cf6;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.btno-demos:hover {
  background: #8b5cf6;
  color: #fff;
}

/* Floating elements - NO animation by default */
.floatingo {
  position: absolute;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.7));
}

/* Individual Image Sizes */
.floatingo-left img {
  width: 170px;
  max-width: 18vw;
}

.floatingo-right img {
  width: 165px;
  max-width: 20vw;
  /* height: 260px; */
}

.floatingo-center img {
  width: 450px;
  /* max-width: 30vw; */
}

.floatingo-bottom-left img {
  width: 200px;
  max-width: 15vw;
}

.floatingo-bottom-right img {
  width: 240px;
  max-width: 22vw;
}

.floatingo-badge img {
  width: 130px;
  max-width: 8vw;
}

/* Positions */
.floatingo-left {
  top: 5%;
  left: 2%;
}

.floatingo-right {
  top: 5%;
  right: 3%;
}

.floatingo-center {
  top: 125%;
  left: 51%;
  transform: translateX(-50%);
  z-index: 5;
}

.floatingo-bottom-left {
  bottom: -113%;
  left: 3%;
}

.floatingo-bottom-right {
  bottom: -122%;
  right: 3%;
}

/* ✅ Only Badge has animation */
.floatingo-badge {
  bottom: 55%;
  right: 17%;
  animation: float 6s ease-in-out infinite, pulse 3s infinite;
  z-index: 6;
}

/* Floating Animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* Badge Pulse */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Glow Ring Behind Center Image */
/* .glowo-ring {
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 900px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
      z-index: 3;
      filter: blur(60px);
    } */

/* Responsive Adjustments */
/* @media (max-width: 1024px) {
      .heroo-title {
        font-size: 42px;
      }

      .floatingo-center img {
        width: 320px;
        max-width: 35vw;
      }
    } */

/* @media (max-width: 768px) {
      .heroo-section {
        height: auto;
        padding: 60px 15px;
      }

      .heroo-title {
        font-size: 34px;
      }

      .heroo-subtitle {
        font-size: 16px;
      }

      .floatingo-left img,
      .floatingo-right img {
        width: 160px;
      }

      .floatingo-center img {
        width: 260px;
      }

      .floatingo-bottom-left img,
      .floatingo-bottom-right img {
        width: 140px;
      }

      .floatingo-badge img {
        width: 60px;
      }
    } */

@media (max-width: 480px) {
  .floatingo-center {
    top: 159%;
    left: 51%;
    transform: translateX(-50%);
    z-index: 5;
  }

  .floatingo-left {
    top: 109%;
    left: 0%;
  }

  .floatingo-right {
    top: 106%;
    right: 0%;
  }

  .floatingo-bottom-left {
    bottom: -79%;
    left: 0%;
  }

  .floatingo-bottom-right {
    bottom: -82%;
    right: -5%;
  }

  .floatingo-badge {
    bottom: -42%;
    right: 37%;
    animation: float 6s ease-in-out infinite, pulse 3s infinite;
    z-index: 6;
  }

  .heroo-title {
    font-size: 26px;
  }

  .heroo-subtitle {
    font-size: 14px;
    max-width: 367px;
    margin: 20px auto;
    line-height: 1.6;
  }

  .floatingo-left img,
  .floatingo-right img {
    width: 120px;
  }

  .floatingo-center img {
    width: 150px;
  }

  .floatingo-bottom-left img,
  .floatingo-bottom-right img {
    width: 100px;
  }

  .floatingo-badge img {
    width: 75px;
    max-width: 22vw;
  }
}

@media (max-width: 768px) {
  .heroo-subtitle {
    font-size: 14px;
    max-width: 367px;
    margin: 20px auto;
    line-height: 1.6;
  }

  /* .floatingo-center img {
         width: 353px;
     } */

  .floatingo-bottom-right {
    bottom: -85%;
    right: 0%;
  }

  .floatingo-bottom-right img {
    width: 197px;
    max-width: 22vw;
  }

  .floatingo-bottom-left {
    bottom: -80%;
    left: 3%;
  }

  .floatingo-right img {
    width: 161px;
    max-width: 14vw;
  }
}