:root {
      --yellow: #FFD400;
      --purple: #6B1E9A;
      --black: #000000;
      --white: #FFFFFF;
     --star-color: 60 100% 80%; /* yellow-white glow in HSL */

    }

    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      color: var(--white);
      background: linear-gradient(135deg, var(--black) 40%, var(--purple) 100%);
      overflow-x: hidden;
    
    }

 
    /* Preloader styles */
#preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--black) 40%, var(--purple) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  flex-direction: column;
  color: var(--yellow);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
}

.loader-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 3px solid var(--yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.6);
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid var(--yellow);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 10px auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#preloader p {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 1px;
}

 
    .firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}

.firefly::before,
.firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

/* Individual fireflies — adjust positions/durations randomly */
.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 12s;
}
.firefly:nth-child(1)::after {
  animation-duration: 12s, 5800ms;
  animation-delay: 0ms, 2300ms;
}

.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 14s;
}
.firefly:nth-child(2)::after {
  animation-duration: 14s, 7300ms;
  animation-delay: 0ms, 4800ms;
}

.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 10s;
}
.firefly:nth-child(3)::after {
  animation-duration: 10s, 6000ms;
  animation-delay: 0ms, 1500ms;
}

.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 16s;
}
.firefly:nth-child(4)::after {
  animation-duration: 16s, 8000ms;
  animation-delay: 0ms, 3500ms;
}

.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 18s;
}
.firefly:nth-child(5)::after {
  animation-duration: 18s, 5000ms;
  animation-delay: 0ms, 4200ms;
}

/* Example movement keyframes for each */
@keyframes move1 {
  0% { transform: translateX(-20vw) translateY(10vh) scale(0.5); }
  25% { transform: translateX(15vw) translateY(-30vh) scale(0.7); }
  50% { transform: translateX(-10vw) translateY(20vh) scale(0.4); }
  75% { transform: translateX(30vw) translateY(-15vh) scale(0.6); }
  100% { transform: translateX(-25vw) translateY(25vh) scale(0.5); }
}
@keyframes move2 {
  0% { transform: translateX(0vw) translateY(0vh) scale(0.5); }
  25% { transform: translateX(-30vw) translateY(20vh) scale(0.8); }
  50% { transform: translateX(20vw) translateY(-25vh) scale(0.4); }
  75% { transform: translateX(-15vw) translateY(30vh) scale(0.6); }
  100% { transform: translateX(10vw) translateY(-10vh) scale(0.5); }
}
@keyframes move3 {
  0% { transform: translateX(15vw) translateY(-5vh) scale(0.6); }
  25% { transform: translateX(-25vw) translateY(25vh) scale(0.7); }
  50% { transform: translateX(20vw) translateY(-20vh) scale(0.4); }
  75% { transform: translateX(-10vw) translateY(15vh) scale(0.5); }
  100% { transform: translateX(25vw) translateY(-15vh) scale(0.6); }
}
@keyframes move4 {
  0% { transform: translateX(-10vw) translateY(-10vh) scale(0.5); }
  25% { transform: translateX(20vw) translateY(15vh) scale(0.8); }
  50% { transform: translateX(-30vw) translateY(-25vh) scale(0.6); }
  75% { transform: translateX(15vw) translateY(20vh) scale(0.4); }
  100% { transform: translateX(-15vw) translateY(-15vh) scale(0.5); }
}
@keyframes move5 {
  0% { transform: translateX(5vw) translateY(-20vh) scale(0.4); }
  25% { transform: translateX(-20vw) translateY(25vh) scale(0.6); }
  50% { transform: translateX(25vw) translateY(-15vh) scale(0.5); }
  75% { transform: translateX(-25vw) translateY(10vh) scale(0.7); }
  100% { transform: translateX(10vw) translateY(-25vh) scale(0.4); }
}

/* Drift and flash animations */
@keyframes drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}


    h1, h2, h3 {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
    }

    /* Floating background shapes */
    .shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.15;
      animation: float 10s infinite ease-in-out;
      z-index: 0;
    }
    .shape.yellow { background: var(--yellow); width: 300px; height: 300px; top: 5%; left: -100px; }
    .shape.purple { background: var(--purple); width: 200px; height: 200px; bottom: 10%; right: 0px; }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(20deg); }
    }

    /* Glass effect */
    .glass {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 20px;
      z-index: 1;
      position: relative;
    }

    header {
      text-align: center;
      padding: 4rem 1rem 2rem;
      position: relative;
      z-index: 1;
    }

    header img {
      width: 180px;
      border-radius: 50%;
      border: 4px solid var(--yellow);
      box-shadow: 0 0 20px rgba(255, 212, 0, 0.6);
    }

    .btn-yellow {
      background-color: var(--yellow);
      color: var(--black);
      font-weight: bold;
      border-radius: 30px;
      padding: 10px 20px;
      transition: 0.3s;
    }
    .btn-yellow:hover { background-color: #e6c000; color: #111; }

    .btn-outline-light.rounded-pill { border-width: 2px; }

    .service-card { transition: transform 0.3s, box-shadow 0.3s; }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(255, 212, 0, 0.4); }

   /* Footer Styles */
  footer {
    background: linear-gradient(135deg,var(--yellow) 0%, var(--purple) 100%);
    border-top: 1px solid rgba(255, 213, 74, 0.2);
  }
  
  .hover-glow:hover {
    color: #FFD54A !important;
    text-shadow: 0 0 8px rgba(255, 213, 74, 0.4);
    transition: all 0.3s ease;
  }
  
  .btn-payment-method {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 213, 74, 0.3);
    border-radius: 8px;
    padding: 5px;
    transition: all 0.3s ease;
  }
  
  .btn-payment-method:hover {
    background: rgba(255, 213, 74, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 213, 74, 0.2);
  }
  
  .back-to-top {
    position: absolute;
  padding: 10px;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
  
  .back-to-top:hover {
    opacity: 1;
    transform: translateY(-3px);
  }
  
  /* Modal Styles */
  .modal-content {
    border: 1px solid #FFD54A;
    border-radius: 12px;
  }
  
  .qr-code-container {
    padding: 15px;
    background: white;
    border-radius: 8px;
    display: inline-block;
  }
  
  .detail-item {
    font-size: 1.1rem;
  }

    .social-icons a {
      color: var(--yellow);
      font-size: 1.6rem;
      margin-right: 15px;
      transition: color 0.3s, transform .2s;
    }
    .social-icons a:hover { color: #fff; transform: translateY(-2px); }

 
    /* Helper: link chips */
    .link-chip {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      text-decoration: none;
      transition: background .2s, transform .2s;
    }
    .link-chip:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
 

 
  .fireflies {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .firefly {
    position: absolute;
    border-radius: 50%;
    background: white;
    opacity: 0.8;
    box-shadow: 0 0 calc(var(--size, 2px) * 3) hsl(var(--hue, var(--star-color)) / 0.8);
    width: var(--size, 2px);
    height: var(--size, 2px);
    animation:
      float var(--floatDur, 15s) linear var(--floatDelay, 0s) infinite,
      twinkle var(--twinkleDur, 2s) ease-in-out var(--twinkleDelay, 0s) infinite alternate;
  }

  /* Slight movement */
  @keyframes float {
    0% {
      transform: translateY(0px) translateX(0px);
    }
    50% {
      transform: translateY(var(--yMove, 10px)) translateX(var(--xMove, 5px));
    }
    100% {
      transform: translateY(0px) translateX(0px);
    }
  }

  /* Glow pulsing */
  @keyframes twinkle {
    0% {
      opacity: 0.6;
      box-shadow: 0 0 calc(var(--size, 2px) * 1) hsl(var(--hue, var(--star-color)) / 0.6);
    }
    100% {
      opacity: 1;
      box-shadow: 0 0 calc(var(--size, 2px) * 4) hsl(var(--hue, var(--star-color)) / 1);
    }
  }

  /* Mobile tweak: slightly bigger stars */
  @media (max-width: 768px) {
    .firefly { --size: 3px; }
  }
 

 

 
/* container */
.container {
  width: 100%;
  height: 100%;
   position: relative;
}

/* background image with radial mask fade */
.background {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
 }

/* particle wrapper (each one) */
.circle-container {
  position: absolute;
  top: 0; left: 0;
  width: var(--size, 6px);
  height: var(--size, 6px);
  /* start below the viewport; we move it up via keyframes */
  transform: translate3d(calc(var(--x, 50) * 1vw), 110vh, 0);
  animation: rise var(--dur, 28s) linear var(--delay, 0s) infinite;
}

/* glowing circle */
.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(
    hsl(180, 100%, 80%),
    hsl(180, 100%, 80%) 10%,
    hsla(180, 100%, 80%, 0) 56%
  );
  /* fade + scale animations (looping) */
  animation:
    fade-frames 2s ease-in-out infinite,
    scale-frames 2.5s ease-in-out infinite;
}

/* rise from bottom to above top */
@keyframes rise {
  from { transform: translate3d(calc(var(--x, 50) * 1vw), 110vh, 0); }
  to   { transform: translate3d(calc(var(--x, 50) * 1vw), -20vh, 0); }
}

@keyframes fade-frames {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes scale-frames {
  0%   { transform: scale3d(0.4, 0.4, 1); }
  50%  { transform: scale3d(2.2, 2.2, 1); }
  100% { transform: scale3d(0.4, 0.4, 1); }
}

 
@keyframes message-frames {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Variation via nth-child patterns ----------
   We set CSS vars for position X (vw), size (px), duration (s), delay (s).
   These patterns repeat every 10 items to create natural variation.
-------------------------------------------------------*/

/* pattern A: items 10n+1..10n+10 */
.circle-container:nth-child(10n + 1)  { --x: 5;  --size: 4px; --dur: 24s; --delay: 0s;   }
.circle-container:nth-child(10n + 2)  { --x: 15; --size: 6px; --dur: 28s; --delay: 2s;   }
.circle-container:nth-child(10n + 3)  { --x: 25; --size: 3px; --dur: 32s; --delay: 4s;   }
.circle-container:nth-child(10n + 4)  { --x: 35; --size: 5px; --dur: 26s; --delay: 6s;   }
.circle-container:nth-child(10n + 5)  { --x: 45; --size: 7px; --dur: 30s; --delay: 8s;   }
.circle-container:nth-child(10n + 6)  { --x: 55; --size: 4px; --dur: 34s; --delay: 1s;   }
.circle-container:nth-child(10n + 7)  { --x: 65; --size: 6px; --dur: 22s; --delay: 3s;   }
.circle-container:nth-child(10n + 8)  { --x: 75; --size: 5px; --dur: 36s; --delay: 5s;   }
.circle-container:nth-child(10n + 9)  { --x: 85; --size: 3px; --dur: 27s; --delay: 7s;   }
.circle-container:nth-child(10n + 10) { --x: 95; --size: 6px; --dur: 29s; --delay: 9s;   }

/* slight extra offsets per block of 20 to avoid noticeable repetition */
.circle-container:nth-child(20n + 1)  { --x: 8;  }
.circle-container:nth-child(20n + 6)  { --x: 58; }
.circle-container:nth-child(20n + 11) { --x: 28; }
.circle-container:nth-child(20n + 16) { --x: 78; }

/* mobile: slightly larger dots so they're visible */
@media (max-width: 768px) {
  .circle-container { --size: 7px; }
}

 
 
    /* Clients slider */
#clients .client-slider {
  --card-w: 220px;   /* card width */
  --card-h: 220px;   /* card height (same for all) */
}

#clients .client-track {
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
}
#clients .client-track::-webkit-scrollbar { height: 8px; }
#clients .client-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }

#clients .client-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: .75rem;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
#clients .client-card:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(255,212,0,.2); }

#clients .client-img-wrap {
  height: 120px;               /* fixed image box */
  display: grid;
  place-items: center;
  margin-bottom: .5rem;
}
#clients .client-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#clients .client-name {
  font-size: .95rem;
  margin: 0 0 .25rem;
  color: #fff;
}

/* Hide name by default */
#clients .client-name {
  font-size: .95rem;
  margin: 0 0 .25rem;
  color: #fff;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* prevent accidental selection */
}

/* Show on hover */
#clients .client-card:hover {
  opacity: 1;
  transform: translateY(0);
  background-color: var(--yellow);
}
 

#clients .client-handle { display: inline-block; min-height: 1rem; }

@media (max-width: 576px) {
  #clients .client-slider { --card-w: 180px; --card-h: 200px; }
  #clients .client-img-wrap { height: 100px; }
}/* better touch scrolling */
#clients .client-track {
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;            /* smooth when using buttons */
}


 
/* Stars container: fixed, isolated, and non-interactive */
#stars-container{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* behind content */
  contain: layout paint size; /* major perf win */
}

/* Each particle wrapper animates via transform only */
.circle-container{
  position: absolute;
  will-change: transform, opacity;
  animation: drift var(--dur) linear infinite;
  animation-delay: var(--delay);
  transform: translate3d(var(--x), var(--y), 0);
  backface-visibility: hidden;
}

/* The actual dot */
.circle{
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 6px rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.35);
}

/* Smooth GPU animation using transforms, not top/left */
@keyframes drift{
  to{
    transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0);
  }
}

/* Pause heavy background when scrolling fast to avoid frame drops */
.scrolling-fast #stars-container .circle-container{
  animation-play-state: paused;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  #stars-container, .circle-container{ animation: none !important; }
}

/* Your .glass is pretty; make it cheaper on mobile */
@media (max-width: 768px){
  .glass{
    backdrop-filter: none;
    background: rgba(255,255,255,.08);
  }
}
 

/* Meteorites styles */
#meteorites-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: strict;
}

.meteorite {
    position: absolute;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        var(--yellow) 30%, 
        rgba(255,255,255,0.9) 100%);
    transform-origin: left center;
    border-radius: 50%;
    filter: drop-shadow(0 0 6px var(--yellow));
    opacity: 0;
    will-change: transform, opacity;
}

/* Pause during fast scroll */
.scrolling-fast .meteorite {
    animation-play-state: paused !important;
}