.name{
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-style: normal;
}

.nab{
     font-family: "Poppins", sans-serif;
     font-weight: 500;
     font-style: normal;
}

.typppe{
     font-family: "Poppins", sans-serif;
     font-weight: 700;
     font-style: normal;
}

.slim{
     font-family: "Poppins", sans-serif;
     font-weight: 300;
     font-style: normal;
}

.fat{
     font-family: "Poppins", sans-serif;
     font-weight: 900;
     font-style: normal;
}


/* know us button */ 
.abtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  overflow: visible;
clip-path: inset(0 round 5rem);

  cursor: pointer;

  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, 0% 50%;
  animation: gradient_301 5s ease infinite;

  border: double 4px transparent;

  /* LIGHT BACKGROUND */
  background-image:
    linear-gradient(#f8fafc, #f8fafc),
    linear-gradient(
      137.48deg,
      #3be5ff 10%,
      #9d01ff 45%,
      #c49cff 67%,
      #0044ff 87%
    );

  background-origin: border-box;
  background-clip: content-box, border-box;
}


/* TEXT */
.cta {
  z-index: 2;
  font-family: "Poppins";
  font-size: 12px;
  letter-spacing: 5px;
  color: #111827; /* dark text */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* =========================
   DARK STARS
========================= */

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;

  /* DARK STARS */
  background-image: radial-gradient(#1f2933 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;

  /* DARK STARS (FADED) */
  background-image: radial-gradient(#374151 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.4;
}

/* =========================
   ANIMATIONS (UNCHANGED)
========================= */

@keyframes animStar {
  from { transform: translateY(0); }
  to { transform: translateY(-135rem); }
}

@keyframes animStarRotate {
  from { transform: rotate(360deg); }
  to { transform: rotate(0); }
}

@keyframes gradient_301 {
  0% {
    background-position: 0 0, 0% 50%;
  }
  50% {
    background-position: 0 0, 100% 50%;
  }
  100% {
    background-position: 0 0, 0% 50%;
  }
}


@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


/* Starfield & Shooting Stars */

/* Shooting stars */
.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(-90deg, #9d7eff, transparent);
  animation: shoot 3s infinite ease-in;
}

.shooting-star:nth-child(1) { top: 20%; left: -100px; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 35%; left: -100px; animation-delay: 1s; }
.shooting-star:nth-child(3) { top: 50%; left: -100px; animation-delay: 2s; }
.shooting-star:nth-child(4) { top: 50%; left: -100px; animation-delay: 3s; }
.shooting-star:nth-child(5) { top: 50%; left: -100px; animation-delay: 4s; }
.shooting-star:nth-child(6) { top: 50%; left: -100px; animation-delay: 5s; }
.shooting-star:nth-child(7) { top: 50%; left: -100px; animation-delay: 6s; }

/* Animations */
@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.2; }
}

@keyframes shoot {
  0% { transform: translateX(0) translateY(0) rotate(25deg); opacity: 1; }
  100% { transform: translateX(120vw) translateY(50vh) rotate(45deg); opacity: 0; }
}

/* loader */
.loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fdfdfd; /* optional background color while loading */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader {
        width: 45px;
        height: 40px;
        background: 
          linear-gradient(#5100ff00 calc(1*100%/6), #9d7eff 0 calc(3*100%/6), #5100ff00 0),
          linear-gradient(#5100ff00 calc(2*100%/6), #7c63ff 0 calc(4*100%/6), #5100ff00 0),
          linear-gradient(#5100ff00 calc(3*100%/6), #b399ff 0 calc(5*100%/6), #5100ff00 0);
        background-size: 10px 400%;
        background-repeat: no-repeat;
        animation: matrix 1s infinite linear;
      }

      @keyframes matrix {
        0% {
          background-position: 0% 100%, 50% 100%, 100% 100%;
        }
        100% {
          background-position: 0% 0%, 50% 0%, 100% 0%;
        }
      }


.circleptrn {
  width: 100%;
  height: 100%;
  position: relative;

  /* Size of one wave segment */
  --s: 100px;
  --c-inner: rgb(199, 144, 255);
  --c-outer: rgb(130, 38, 223);
  --c-outer2: white;

  /* Make it a horizontal line at the bottom */
background: radial-gradient( circle at 50% 99%, transparent 10%, var(--c-inner) 10% 30%, var(--c-outer) 30% 60%, var(--c-outer2) 60% 100%, transparent 100% );
  background-size: var(--s) 70px; /* line height */
  background-repeat: repeat-x; /* repeat horizontally */
  background-position: bottom left;
  animation: move 8s linear infinite;
}

@keyframes move {
  from {
    background-position: 0 bottom;
  }
  to {
    background-position: 100% bottom;
  }
}


/* Dropdown functionality only */

.dropdown {
  position: relative; /* parent relative for absolute dropdown */
}

.dropdown-content {
  position: absolute;
  left: -600px;
  top: 48px;

  transform: translate(40px);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}