body {
 font-family: "Space Grotesk", sans-serif;    }

    .floating-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
    }
    .floating-bg span {
  position: absolute;
  bottom: -30px; /* ensures they start below the screen */
  display: block;
  width: 20px;
  height: 20px;
background: rgba(255, 255, 255, 0.1); /* Increase from 0.1 to 0.3 or 0.5 */
  animation: float 10s linear infinite;
  border-radius: 50%;
}

  @keyframes float {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0.2; /* Start slightly visible */
  }
  100% {
    transform: translateY(-120vh) scale(1.5);
    opacity: 0.7; /* End with higher opacity */
  }
}


    .fade-up {
      animation: fadeUp 1s ease-out forwards;
    }
    @keyframes fadeUp {
      0% {
        transform: translateY(20px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    p,a {
  font-family: 'Poppins', sans-serif;
}

.dot-pattern {
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.6;
  width: 120px;
  height: 80px;
}















.center-v-cut-left {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      80px 50%,   /* Increased from 40px to 80px */
      0% 0%
    );
  }
   @keyframes gradientMove {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .animated-bg {
    background: #23384b;
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
  }

  @media (min-width: 768px) {
    .center-v-cut-left {
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        160px 50%,  /* Increased from 80px to 160px */
        0% 0%
      );
    }
  }



  @import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

.wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
  /* box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); */
  overflow: hidden;
  opacity: 0.4; /* 🔽 Adjust opacity for transparency */
}

.wave span {
  position: absolute;
  width: 325vh;
  height: 325vh;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
  opacity: 0.4;
}

.wave span:nth-child(1) {
  border-radius: 45%;
  background: white;
  animation: animate 5s linear infinite;
}
.wave span:nth-child(2) {
  border-radius: 40%;
  background: rgba(135, 135, 135, 0.5);
  animation: animate 10s linear infinite;
}
.wave span:nth-child(3) {
  border-radius: 42.5%;
  background: rgba(182, 180, 180, 0.5);
  animation: animate 15s linear infinite;
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}


.animate-fade-up {
  animation: fade-up 0.8s ease-out both;
}
.animate-delay-0   { animation-delay: 0s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-600 { animation-delay: 0.6s; }


@media (max-width: 1024px) {
    /* Stack cards vertically on tablets */
    .responsive-cards > div {
      position: static !important;
      margin-bottom: 1.5rem;
      width: 100% !important;
    }
  }

  @media (max-width: 768px) {
    /* Smaller devices - center cards and make them full width */
    .responsive-cards > div {
      position: static !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }



  .clip-left {
      clip-path: ellipse(70% 80% at 50% 50%);
    }

    .clip-right {
      clip-path: path("M0,0 Q0,100 100,100 L100,0 Z"); 
      mask-image: radial-gradient(ellipse 80% 100% at center, black 100%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 100% at center, black 100%, transparent 100%);
      mask-size: cover;
      -webkit-mask-size: cover;
      border-radius: 50% 50% 0 50% / 50% 50% 0 50%;
    }

    .dot {
      width: 20px;
      height: 40px;
      background-color: #7B61FF;
      border-radius: 9999px;
    }


    .highlight {
      background:#151a37;
      color:white;
    }







.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for Firefox and others */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }


  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    14% {
      transform: scale(1.1);
    }
    28% {
      transform: scale(1);
    }
    42% {
      transform: scale(1.1);
    }
    70% {
      transform: scale(1);
    }
  }

  .heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
  }





  #scrollVideo {
  transform: scale(1);
}


.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee-content {
  display: flex;
}

.logo {
  height: 5rem; /* Default logo size */
  width: auto;
  margin: 0 2rem; /* Default gap between logos */
  flex-shrink: 0;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .logo {
    height: 3.1rem; /* Smaller logo on mobile to fit 3 logos */
    margin: 0 0.5rem; /* Reduced gap between logos */
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(-1px, -1px); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0); }
}

.group:hover .vibrate-icon {
  animation: vibrate 0.3s linear infinite;
}


.active-tab {
    background-color: #151a37 !important;
    color: white !important;
    border-color: #151a37 !important;
  }





  
.hexagon {
  width: 90px;
  aspect-ratio: 1; /* Makes it perfectly proportioned */
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}



@keyframes ping-once {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-ping-once {
  animation: ping-once 0.6s ease-in-out 1;
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}
.float-bounce {
  animation: floatBounce 3s ease-in-out infinite;
}