/*--------------------------------------------------------------
# Creators Page - Futuristic Design
--------------------------------------------------------------*/

/* Force hide preloader on creators page */
#preloader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}


:root{
  --accent:#00D4FF;
  --primary:#FF5C5C;
  --secondary:#FFD93D;
  --bg-dark:#0A0B0F;
  --bg-card:#12141A;
  --text-light:#E5E7EB;
  --text-muted:#9CA3AF;
}

/* Only apply dark theme to main content, not header/footer */
body.creators-page .main {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section{padding:4rem 2rem;text-align:center;opacity:0;transform:translateY(40px);transition:opacity 0.8s ease, transform 0.8s ease;}
.section.visible{opacity:1;transform:translateY(0);}
.section h3{font-size:2rem;margin-bottom:1rem;color:var(--accent);text-shadow:0 0 10px rgba(0,212,255,0.4);}
.section p{max-width:700px;margin:0 auto 2rem auto;color:var(--text-muted);}

/* HERO SECTION WITH STREAM BACKGROUND */
body.creators-page .hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:90vh;
  background:radial-gradient(circle at top, rgba(0,212,255,0.15) 0%, rgba(10,11,15,1) 80%) !important;
  overflow:hidden;
  perspective:1000px;
  color:var(--text-light) !important;
  transition: all 1s ease;
}

.hero.loaded {
  background:radial-gradient(circle at top, rgba(0,212,255,0.25) 0%, rgba(10,11,15,1) 80%) !important;
  animation: backgroundPulse 4s ease-in-out infinite;
}

@keyframes backgroundPulse {
  0%, 100% {
    background:radial-gradient(circle at top, rgba(0,212,255,0.25) 0%, rgba(10,11,15,1) 80%) !important;
  }
  50% {
    background:radial-gradient(circle at top, rgba(0,212,255,0.35) 0%, rgba(10,11,15,1) 80%) !important;
  }
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.stream{
  position:absolute;
  width:2px;
  height:120%;
  top:-10%;
  background:linear-gradient(to bottom, rgba(0,212,255,0) 0%, rgba(0,212,255,0.4) 50%, rgba(0,212,255,0) 100%);
  filter:blur(1px);
  animation:streamMove linear infinite;
  opacity:0.4;
}
@keyframes streamMove {
  0% { transform: translateY(-120%); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateY(120%); opacity: 0; }
}
.particle{
  position:absolute;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  opacity:0.4;
  animation:floatParticle linear infinite;
  filter:blur(1px);
}
@keyframes floatParticle{
  0%{transform:translateY(0) translateX(0);opacity:0.2;}
  50%{opacity:0.8;}
  100%{transform:translateY(-120px) translateX(30px);opacity:0;}
}

/* Hero content initially hidden */
.hero h2,
.hero p,
.hero .scroll-btn {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero.loaded h2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
  animation: titleGlow 2s ease-in-out 1.5s forwards;
}

.hero.loaded p {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.6s;
  animation: textSlideIn 1s ease-out 0.9s forwards;
}

.hero.loaded .scroll-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.9s;
  animation: buttonBounce 1.5s ease-out 1.2s forwards;
}

/* Entrance animations */
@keyframes titleGlow {
  0% {
    text-shadow: 0 0 20px var(--accent);
  }
  50% {
    text-shadow: 0 0 30px var(--accent), 0 0 40px var(--accent), 0 0 50px var(--accent);
  }
  100% {
    text-shadow: 0 0 20px var(--accent);
  }
}

@keyframes textSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes buttonBounce {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(0,212,255,0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 20px rgba(0,212,255,0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0,212,255,0.5);
  }
}

.hero h2{font-size:3rem;margin-bottom:1rem;z-index:1;position:relative;text-shadow:0 0 20px var(--accent);}
.hero p{font-size:1.25rem;color:var(--text-muted);max-width:600px;z-index:1;position:relative;}
.scroll-btn{margin-top:3rem;width:50px;height:50px;border:2px solid var(--accent);border-radius:50%;background:transparent;cursor:pointer;animation:pulse 2s infinite;box-shadow:0 0 15px rgba(0,212,255,0.5);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.scroll-btn:hover{box-shadow:0 0 25px var(--accent),0 0 50px var(--secondary);}
.scroll-btn::before{content:'';position:absolute;width:10px;height:10px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);animation:arrowBounce 1s infinite alternate;}
@keyframes arrowBounce{0%{transform:translateY(0) rotate(-45deg);}100%{transform:translateY(8px) rotate(-45deg);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,212,255,0.5);}70%{box-shadow:0 0 0 15px rgba(0,212,255,0);}100%{box-shadow:0 0 0 0 rgba(0,212,255,0);}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes photoGlow{0%{box-shadow:0 0 20px rgba(0,212,255,0.3), inset 0 0 20px rgba(0,212,255,0.1);}100%{box-shadow:0 0 40px rgba(0,212,255,0.6), 0 0 60px rgba(255,92,92,0.3), inset 0 0 30px rgba(0,212,255,0.3);}}
@keyframes sunFlare{0%{transform:translate(-50%, -50%) scale(0.1) rotate(0deg);opacity:0;background:radial-gradient(circle, rgba(200,200,255,0.9) 0%, rgba(150,150,200,0.8) 30%, rgba(100,100,150,0.6) 60%, transparent 100%);}20%{opacity:0.9;background:radial-gradient(circle, rgba(220,220,255,0.9) 0%, rgba(180,180,220,0.8) 30%, rgba(120,120,180,0.6) 60%, transparent 100%);}40%{transform:translate(-50%, -50%) scale(2) rotate(180deg);opacity:1;background:radial-gradient(circle, rgba(255,255,200,0.9) 0%, rgba(255,200,100,0.8) 30%, rgba(255,150,50,0.6) 60%, transparent 100%);}70%{transform:translate(-50%, -50%) scale(3.5) rotate(270deg);opacity:0.4;background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,0,0.9) 15%, rgba(255,165,0,0.8) 30%, rgba(255,69,0,0.6) 50%, transparent 100%);}100%{transform:translate(-50%, -50%) scale(5) rotate(360deg);opacity:0;background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,0,0.9) 15%, rgba(255,165,0,0.8) 30%, rgba(255,69,0,0.6) 50%, transparent 100%);}}

@keyframes photoSpin{0%{transform:scale(1) rotate(0deg);filter:blur(0px);}25%{transform:scale(1.3) rotate(360deg);filter:blur(2px);}50%{transform:scale(1.5) rotate(720deg);filter:blur(4px);}75%{transform:scale(1.2) rotate(1080deg);filter:blur(2px);}100%{transform:scale(1) rotate(1080deg);filter:blur(0px);}}

@keyframes particleSpill{0%{opacity:0;transform:translate(-50%, -50%) scale(0) rotate(0deg);}20%{opacity:1;transform:translate(-50%, -50%) scale(1) rotate(72deg);}40%{opacity:0.8;transform:translate(-50%, -50%) scale(1.2) rotate(144deg);}60%{opacity:0.6;transform:translate(-50%, -50%) scale(1.5) rotate(216deg);}80%{opacity:0.4;transform:translate(-50%, -50%) scale(2) rotate(288deg);}100%{opacity:0;transform:translate(-50%, -50%) scale(2.5) rotate(360deg);}}

/* CREATOR FILTERS */
.creator-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.creator-filters.visible {
  opacity: 1;
  transform: translateY(0);
}

.filter-btn {
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(255,92,92,0.1));
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.filter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.filter-btn:hover::before {
  left: 100%;
}

.filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,212,255,0.3);
  border-color: rgba(0,212,255,0.5);
  color: white;
}

.filter-btn.active {
  background: linear-gradient(135deg, #00d4ff, #ff5c5c);
  color: white;
  border-color: #00d4ff;
  box-shadow: 0 0 20px rgba(0,212,255,0.4);
  transform: translateY(-2px);
}

.filter-btn.active:hover {
  box-shadow: 0 0 30px rgba(0,212,255,0.6);
}

/* CREATOR CAROUSEL */
.creator-carousel{position:relative;max-width:1400px;margin:0 auto;padding:2rem 0 4rem 0;}
.creator-container{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:0 4rem;transition:transform 0.5s ease;}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,212,255,0.2);border:2px solid var(--accent);color:var(--accent);font-size:2rem;width:60px;height:60px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;backdrop-filter:blur(10px);}
.carousel-nav:hover{background:rgba(0,212,255,0.4);box-shadow:0 0 20px rgba(0,212,255,0.5);transform:translateY(-50%) scale(1.1);}
.carousel-prev{left:0;}
.carousel-next{right:0;}
.carousel-dots{display:flex;justify-content:center;gap:1rem;margin-top:2rem;}
.carousel-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s ease;}
.carousel-dot.active{background:var(--accent);box-shadow:0 0 10px rgba(0,212,255,0.5);}
.carousel-dot:hover{background:rgba(0,212,255,0.6);}

/* Responsive Design */
@media (max-width: 1200px) {
  .creator-container{grid-template-columns:repeat(3,1fr);padding:0 3rem;}
}

@media (max-width: 768px) {
  .creator-container{grid-template-columns:repeat(2,1fr);padding:0 2rem;gap:1.5rem;}
  .carousel-nav{width:50px;height:50px;font-size:1.5rem;}
  .carousel-prev{left:-10px;}
  .carousel-next{right:-10px;}
}

@media (max-width: 480px) {
  .creator-container{grid-template-columns:1fr;padding:0 1rem;}
  .carousel-nav{width:40px;height:40px;font-size:1.2rem;}
  .carousel-prev{left:-15px;}
  .carousel-next{right:-15px;}
}

/* CREATOR CARDS */
.creators{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:2rem 2rem 4rem 2rem;}
.creator-card{background:linear-gradient(135deg, rgba(0,212,255,0.2), rgba(255,92,92,0.2));border:1px solid rgba(255,255,255,0.1);border-radius:1.5rem;padding:2rem 1.5rem;text-align:center;transition:transform 0.5s ease, box-shadow 0.5s ease;backdrop-filter: blur(8px);opacity:0;transform:translateY(20px);display:flex;flex-direction:column;align-items:center;}
.creator-card.visible{opacity:1;transform:translateY(0);transition:opacity 0.6s ease, transform 0.6s ease;}
.creator-card:hover{transform:translateY(-15px) scale(1.05);box-shadow:0 0 25px var(--accent),0 0 40px var(--secondary);border-color:var(--accent);}
.creator-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;margin-bottom:1.5rem;border:3px solid var(--accent);box-shadow:0 0 20px rgba(0,212,255,0.3);transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);position:relative;cursor:pointer;}
.creator-photo::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg, rgba(0,212,255,0.3), rgba(255,92,92,0.2), rgba(255,217,61,0.1));opacity:0;transition:all 0.4s ease;border-radius:50%;z-index:2;}
.creator-photo::after{content:'';position:absolute;top:50%;left:50%;width:80px;height:80px;background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,0,0.9) 15%, rgba(255,165,0,0.8) 30%, rgba(255,69,0,0.6) 50%, rgba(255,20,147,0.4) 70%, transparent 100%);border-radius:50%;transform:translate(-50%, -50%);opacity:0;z-index:3;box-shadow:0 0 30px rgba(255,255,0,0.8), 0 0 60px rgba(255,165,0,0.6), 0 0 90px rgba(255,69,0,0.4), inset 0 0 20px rgba(255,255,255,0.9);}

/* Doctor Strange Particle Spill Effect */
.creator-photo .particle-1,
.creator-photo .particle-2,
.creator-photo .particle-3,
.creator-photo .particle-4,
.creator-photo .particle-5{position:absolute;width:4px;height:4px;background:radial-gradient(circle, rgba(0,212,255,0.8), rgba(255,92,92,0.6), rgba(255,217,61,0.4));border-radius:50%;opacity:0;z-index:4;}

.creator-card:hover .creator-photo .particle-1{top:20%;left:20%;animation:particleSpill 1.2s ease-out 0.1s;}
.creator-card:hover .creator-photo .particle-2{top:30%;right:20%;animation:particleSpill 1.2s ease-out 0.2s;}
.creator-card:hover .creator-photo .particle-3{bottom:20%;left:30%;animation:particleSpill 1.2s ease-out 0.3s;}
.creator-card:hover .creator-photo .particle-4{bottom:30%;right:30%;animation:particleSpill 1.2s ease-out 0.4s;}
.creator-card:hover .creator-photo .particle-5{top:50%;left:50%;animation:particleSpill 1.2s ease-out 0.5s;}
.creator-card:hover .creator-photo{box-shadow:0 0 40px rgba(0,212,255,0.6), 0 0 60px rgba(255,92,92,0.3), inset 0 0 20px rgba(0,212,255,0.2);border-color:var(--secondary);animation:photoSpin 1.2s ease-out;}
.creator-card:hover .creator-photo::before{opacity:1;animation:photoGlow 2s ease-in-out infinite alternate;}
.creator-card:hover .creator-photo::after{opacity:1;animation:sunFlare 1.2s ease-out forwards;}
.creator-photo img{width:100%;height:100%;object-fit:cover;transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);filter:brightness(1) contrast(1) saturate(1);}
.creator-card:hover .creator-photo img{transform:scale(1.15) rotate(-2deg);filter:brightness(1.1) contrast(1.1) saturate(1.2);}
.creator-card h4{margin:0 0 0.5rem 0;color:var(--accent);font-size:1.25rem;font-weight:600;}
.creator-niche{color:var(--secondary) !important;font-size:0.85rem !important;font-weight:600 !important;margin:0 0 0.5rem 0 !important;text-transform:uppercase;letter-spacing:0.5px;}
.creator-views{color:var(--text-light) !important;font-size:0.9rem !important;margin:0 0 1rem 0 !important;font-weight:500;}
.creator-link{display:inline-block;padding:0.5rem 1rem;background:linear-gradient(135deg, var(--accent), var(--primary));color:white;text-decoration:none;border-radius:25px;font-size:0.85rem;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,212,255,0.3);}
.creator-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,212,255,0.5);color:white;text-decoration:none;}
.creator-card p{color:var(--text-muted);font-size:0.95rem;margin:0;line-height:1.5;}

/* TESTIMONIALS CAROUSEL */
.testimonial-section{margin:4rem 0;padding:2rem 0;}
.testimonial-carousel{position:relative;max-width:1200px;margin:0 auto;padding:2rem 0 4rem 0;}
.testimonial-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;padding:0 2rem;transition:transform 0.5s ease;}
.testimonial-card{background:linear-gradient(135deg, rgba(0,212,255,0.1), rgba(255,92,92,0.1));border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem;text-align:center;transition:all 0.5s ease;backdrop-filter:blur(10px);position:relative;overflow:hidden;}
.testimonial-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(0,212,255,0.05), rgba(255,92,92,0.05));opacity:0;transition:all 0.3s ease;border-radius:20px;}
.testimonial-card:hover::before{opacity:1;}
.testimonial-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(0,212,255,0.2);border-color:#00d4ff;}
.testimonial-card .photo{width:80px;height:80px;border-radius:50%;margin:0 auto 1.5rem;border:3px solid #00d4ff;box-shadow:0 0 20px rgba(0,212,255,0.3);transition:all 0.3s ease;position:relative;z-index:2;}
.testimonial-card:hover .photo{transform:scale(1.1);box-shadow:0 0 30px rgba(0,212,255,0.5);}
.testimonial-card .photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.testimonial-card .name{font-size:1.5rem;font-weight:600;color:#00d4ff;margin-bottom:0.5rem;position:relative;z-index:2;}
.testimonial-card .subs{color:#ff5c5c;font-size:0.9rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;position:relative;z-index:2;}
.testimonial-card .text{font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,0.9);font-style:italic;position:relative;z-index:2;margin:0;}
.testimonial-card .text::before{content:'"';font-size:3rem;color:#00d4ff;position:absolute;top:-20px;left:-10px;opacity:0.3;}
.testimonial-card .text::after{content:'"';font-size:3rem;color:#00d4ff;position:absolute;bottom:-30px;right:-10px;opacity:0.3;}

/* Testimonial Navigation */
.testimonial-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,212,255,0.2);border:2px solid #00d4ff;color:#00d4ff;font-size:2rem;width:60px;height:60px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;backdrop-filter:blur(10px);}
.testimonial-nav:hover{background:rgba(0,212,255,0.4);box-shadow:0 0 20px rgba(0,212,255,0.5);transform:translateY(-50%) scale(1.1);}
.testimonial-prev{left:0;}
.testimonial-next{right:0;}

/* Testimonial Dots */
.testimonial-dots{display:flex;justify-content:center;gap:1rem;margin-top:2rem;}
.testimonial-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s ease;}
.testimonial-dot.active{background:#00d4ff;box-shadow:0 0 10px rgba(0,212,255,0.5);}
.testimonial-dot:hover{background:rgba(0,212,255,0.6);}

/* Responsive Testimonials */
@media (max-width: 768px) {
  .testimonial-container{grid-template-columns:1fr;padding:0 1rem;}
  .testimonial-nav{width:50px;height:50px;font-size:1.5rem;}
  .testimonial-card{padding:1.5rem;}
}

/* HOW WE WORK SECTION */
#work h3{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:1.5rem;background:linear-gradient(135deg, #00d4ff, #ff5c5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,212,255,0.3);letter-spacing:2px;text-transform:uppercase;}

.work-subtitle{font-size:1.2rem;color:rgba(255,255,255,0.8);margin-bottom:3rem;text-align:center;max-width:600px;margin-left:auto;margin-right:auto;opacity:0;transform:translateY(30px);transition:all 0.8s ease;}

.work-subtitle.animate-in{opacity:1;transform:translateY(0);}

/* Process Flow */
.process-flow{display:flex;align-items:center;justify-content:space-between;margin:4rem 0;position:relative;flex-wrap:wrap;gap:2rem;opacity:0;transform:translateY(50px);transition:all 1s ease;}

.process-flow.animate-in{opacity:1;transform:translateY(0);}

.process-step{flex:1;min-width:250px;text-align:center;position:relative;z-index:2;background:linear-gradient(135deg, rgba(0,212,255,0.1), rgba(255,92,92,0.1));border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem 1.5rem;backdrop-filter:blur(10px);transition:all 0.5s ease;position:relative;overflow:hidden;}

.process-step::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(0,212,255,0.05), rgba(255,92,92,0.05));opacity:0;transition:all 0.3s ease;border-radius:20px;}

.process-step:hover::before{opacity:1;}

.process-step:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(0,212,255,0.2);border-color:#00d4ff;}

.step-icon{position:relative;margin-bottom:1.5rem;display:inline-block;}

.icon-bg{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg, #00d4ff, #ff5c5c);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem;box-shadow:0 0 30px rgba(0,212,255,0.3);transition:all 0.3s ease;}

.process-step:hover .icon-bg{transform:scale(1.1) rotate(5deg);box-shadow:0 0 40px rgba(0,212,255,0.5);}

.step-number{position:absolute;top:-10px;right:-10px;width:30px;height:30px;background:linear-gradient(135deg, #ff5c5c, #ffd93d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:white;box-shadow:0 0 15px rgba(255,92,92,0.5);}

.process-step h4{font-size:1.3rem;color:#00d4ff;margin-bottom:1rem;font-weight:600;}

.process-step p{color:rgba(255,255,255,0.8);line-height:1.6;margin-bottom:1.5rem;}

.step-metrics{display:flex;flex-direction:column;align-items:center;gap:0.5rem;}

.metric{font-size:1.5rem;font-weight:700;color:#ff5c5c;}

.metric-label{font-size:0.8rem;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:1px;}

/* Process Connectors */
.process-connector{flex:0 0 100px;height:4px;position:relative;display:flex;align-items:center;justify-content:center;}

.connector-line{width:100%;height:2px;background:linear-gradient(90deg, transparent, #00d4ff, #ff5c5c, transparent);border-radius:2px;position:relative;}

.connector-pulse{position:absolute;width:8px;height:8px;background:radial-gradient(circle, #00d4ff, transparent);border-radius:50%;animation:pulseMove 3s ease-in-out infinite;}

@keyframes pulseMove{0%{left:0;opacity:0;}50%{left:50%;opacity:1;}100%{left:100%;opacity:0;}}

/* Success Stats */
.success-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:2rem;margin-top:4rem;padding:2rem;background:linear-gradient(135deg, rgba(0,212,255,0.05), rgba(255,92,92,0.05));border-radius:20px;border:1px solid rgba(255,255,255,0.1);opacity:0;transform:translateY(50px);transition:all 1s ease;}

.success-stats.animate-in{opacity:1;transform:translateY(0);}

.stat-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(255,255,255,0.05);border-radius:15px;transition:all 0.3s ease;backdrop-filter:blur(5px);}

.stat-item:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,212,255,0.2);}

.stat-icon{font-size:2rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(0,212,255,0.2), rgba(255,92,92,0.2));border-radius:50%;}

.stat-content{flex:1;}

.stat-number{font-size:1.8rem;font-weight:700;color:#00d4ff;margin-bottom:0.25rem;position:relative;overflow:hidden;}

.stat-label{font-size:0.9rem;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:1px;}

/* Slide In Animation */
.stat-number.slide-in{animation:slideInRight 1s ease-out;}

@keyframes slideInRight{
  0%{transform:translateX(100px);opacity:0;}
  100%{transform:translateX(0);opacity:1;}
}

/* EXCLUSIVE CREATORS SECTION */
#exclusive{position:relative;overflow:hidden;background:radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);perspective:1000px;}

#exclusive::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%, rgba(255,165,0,0.1) 0%, rgba(255,69,0,0.05) 30%, transparent 70%);animation:sunGlow 8s ease-in-out infinite alternate;}

#exclusive::after{content:'';position:absolute;top:50%;left:50%;width:600px;height:300px;background:radial-gradient(ellipse at 30% 50%, rgba(0,200,255,0.4) 0%, rgba(0,150,255,0.3) 20%, rgba(0,100,200,0.2) 40%, rgba(0,50,150,0.1) 60%, rgba(0,20,100,0.05) 80%, transparent 100%);border-radius:50%;transform:translate(-50%, -50%) scale(0.8);animation:globePulse 8s ease-in-out infinite;box-shadow:0 0 150px rgba(0,150,255,0.3), inset -30px -15px 60px rgba(0,0,0,0.3), inset 30px 15px 60px rgba(255,255,255,0.1), 0 0 200px rgba(0,100,200,0.2);}

/* Additional 3D globe layer */
#exclusive .globe-atmosphere{position:absolute;top:50%;left:50%;width:700px;height:350px;background:radial-gradient(ellipse at 30% 50%, rgba(0,150,255,0.1) 0%, rgba(0,100,200,0.05) 50%, transparent 100%);border-radius:50%;transform:translate(-50%, -50%) scale(0.8);animation:globePulse 8s ease-in-out infinite;box-shadow:0 0 100px rgba(0,150,255,0.2);z-index:1;}

.exclusive-subtitle{font-size:1.2rem;color:rgba(255,255,255,0.9);margin-bottom:3rem;text-align:center;max-width:600px;margin-left:auto;margin-right:auto;opacity:0;transform:translateY(30px);transition:all 0.8s ease;text-shadow:0 0 20px rgba(0,150,255,0.5);position:relative;z-index:10;}

.exclusive-subtitle.animate-in{opacity:1;transform:translateY(0);}

.exclusive-carousel{position:relative;max-width:1200px;margin:0 auto;padding:2rem 0;z-index:10;}

@keyframes sunGlow{0%{opacity:0.3;transform:scale(1);}100%{opacity:0.6;transform:scale(1.1);}}

@keyframes globePulse{0%{transform:translate(-50%, -50%) scale(0.8);opacity:0.6;box-shadow:0 0 150px rgba(0,150,255,0.3), inset -30px -15px 60px rgba(0,0,0,0.3), inset 30px 15px 60px rgba(255,255,255,0.1), 0 0 200px rgba(0,100,200,0.2);}25%{transform:translate(-50%, -50%) scale(0.9);opacity:0.8;box-shadow:0 0 180px rgba(0,150,255,0.4), inset -35px -18px 70px rgba(0,0,0,0.4), inset 35px 18px 70px rgba(255,255,255,0.15), 0 0 250px rgba(0,100,200,0.3);}50%{transform:translate(-50%, -50%) scale(1.1);opacity:1;box-shadow:0 0 200px rgba(0,150,255,0.5), inset -40px -20px 80px rgba(0,0,0,0.5), inset 40px 20px 80px rgba(255,255,255,0.2), 0 0 300px rgba(0,100,200,0.4);}75%{transform:translate(-50%, -50%) scale(0.95);opacity:0.9;box-shadow:0 0 170px rgba(0,150,255,0.35), inset -32px -16px 65px rgba(0,0,0,0.35), inset 32px 16px 65px rgba(255,255,255,0.12), 0 0 220px rgba(0,100,200,0.25);}100%{transform:translate(-50%, -50%) scale(0.8);opacity:0.6;box-shadow:0 0 150px rgba(0,150,255,0.3), inset -30px -15px 60px rgba(0,0,0,0.3), inset 30px 15px 60px rgba(255,255,255,0.1), 0 0 200px rgba(0,100,200,0.2);}}

.exclusive-container{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);gap:2rem;margin-bottom:2rem;opacity:0;transform:translateY(30px);transition:all 0.8s ease;max-width:800px;margin-left:auto;margin-right:auto;position:relative;z-index:10;}

.exclusive-container.animate-in{opacity:1;transform:translateY(0);}

/* Enhanced creator cards for space theme */
#exclusive .creator-card{background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border:1px solid rgba(0,150,255,0.3);box-shadow:0 0 30px rgba(0,150,255,0.2), inset 0 0 20px rgba(255,255,255,0.05);transition:all 0.3s ease;}

#exclusive .creator-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 20px 40px rgba(0,150,255,0.4), inset 0 0 30px rgba(255,255,255,0.1);border-color:rgba(0,150,255,0.6);}

#exclusive .creator-card h4{color:#00d4ff;text-shadow:0 0 10px rgba(0,212,255,0.5);}

#exclusive .creator-card p{color:rgba(255,255,255,0.9);}

#exclusive .creator-link{background:linear-gradient(135deg, rgba(0,150,255,0.3), rgba(0,100,200,0.2));border:1px solid rgba(0,150,255,0.5);color:#00d4ff;text-shadow:0 0 5px rgba(0,150,255,0.5);}

#exclusive .creator-link:hover{background:linear-gradient(135deg, rgba(0,150,255,0.5), rgba(0,100,200,0.4));box-shadow:0 0 20px rgba(0,150,255,0.3);}

/* Space particles and stars */
#exclusive .space-particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,0.8);border-radius:50%;animation:particleFloat 15s linear infinite;}

#exclusive .space-star{position:absolute;width:1px;height:1px;background:rgba(255,255,255,0.6);border-radius:50%;animation:starTwinkle 3s ease-in-out infinite;}

@keyframes particleFloat{0%{transform:translateY(100vh) translateX(0);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-100px) translateX(50px);opacity:0;}}

@keyframes starTwinkle{0%, 100%{opacity:0.3;transform:scale(1);}50%{opacity:1;transform:scale(1.5);}}

.exclusive-nav{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(135deg, rgba(0,212,255,0.2), rgba(255,92,92,0.2));border:1px solid rgba(255,255,255,0.3);color:white;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.3s ease;backdrop-filter:blur(10px);z-index:10;}

.exclusive-nav:hover{background:linear-gradient(135deg, rgba(0,212,255,0.4), rgba(255,92,92,0.4));transform:translateY(-50%) scale(1.1);box-shadow:0 5px 20px rgba(0,212,255,0.3);}

.exclusive-prev{left:20px;}

.exclusive-next{right:20px;}

.exclusive-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:2rem;}

.exclusive-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s ease;}

.exclusive-dot.active{background:linear-gradient(135deg, #00d4ff, #ff5c5c);box-shadow:0 0 10px rgba(0,212,255,0.5);}

.exclusive-dot:hover{background:rgba(255,255,255,0.6);transform:scale(1.2);}

/* Responsive Design */
@media (max-width: 768px) {
  .process-flow{flex-direction:column;gap:3rem;}
  .process-connector{width:4px;height:60px;flex:0 0 auto;}
  .connector-line{width:2px;height:100%;background:linear-gradient(180deg, transparent, #00d4ff, #ff5c5c, transparent);}
  .connector-pulse{width:8px;height:8px;top:0;left:50%;transform:translateX(-50%);animation:pulseMoveVertical 3s ease-in-out infinite;}
  .success-stats{grid-template-columns:repeat(2, 1fr);gap:1rem;}
  .stat-item{flex-direction:column;text-align:center;gap:0.5rem;}
  
  /* Exclusive creators responsive */
  .exclusive-container{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);gap:1.5rem;max-width:600px;}
  .exclusive-nav{width:40px;height:40px;font-size:1rem;}
  .exclusive-prev{left:10px;}
  .exclusive-next{right:10px;}
}

@media (max-width: 480px) {
  .exclusive-container{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);gap:1rem;max-width:300px;}
  .exclusive-nav{display:none;}
}

@keyframes pulseMoveVertical{0%{top:0;opacity:0;}50%{top:50%;opacity:1;}100%{top:100%;opacity:0;}}

@media (max-width: 480px) {
  .success-stats{grid-template-columns:1fr;}
  .process-step{padding:1.5rem 1rem;}
  .icon-bg{width:60px;height:60px;font-size:1.5rem;}
}

/* PARTNER BRANDS SECTION */
.partners-subtitle{font-size:1.2rem;color:rgba(255,255,255,0.8);margin-bottom:3rem;text-align:center;max-width:600px;margin-left:auto;margin-right:auto;opacity:0;transform:translateY(30px);transition:all 0.8s ease;}

.partners-subtitle.animate-in{opacity:1;transform:translateY(0);}

/* Infinite Scrolling Slider */
.brands-slider-container{position:relative;margin:4rem 0;overflow:hidden;background:linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.8) 100%);border-radius:20px;padding:2rem 0;opacity:1;transform:translateY(0);transition:all 1s ease;}

.brands-slider-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.3)"><animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="30" r="0.5" fill="rgba(255,255,255,0.2)"><animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" begin="1s"/></circle><circle cx="60" cy="70" r="0.8" fill="rgba(255,255,255,0.25)"><animate attributeName="opacity" values="0;1;0" dur="2.5s" repeatCount="indefinite" begin="2s"/></circle><circle cx="40" cy="80" r="0.6" fill="rgba(255,255,255,0.15)"><animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite" begin="0.5s"/></circle><circle cx="90" cy="60" r="0.4" fill="rgba(255,255,255,0.2)"><animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" begin="1.5s"/></circle></svg>') repeat;opacity:0.6;animation:meteorShower 20s linear infinite;pointer-events:none;z-index:1;}

.brands-slider{position:relative;width:100%;height:400px;overflow:hidden;padding:40px 0;}

.brands-track{display:flex;animation:infiniteScroll 40s linear infinite;gap:3rem;width:max-content;align-items:center;}

.brands-track:hover{animation-play-state:paused;}

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

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

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

@keyframes planetOrbit{0%{transform:rotate(0deg) translateX(0px) rotate(0deg);}100%{transform:rotate(360deg) translateX(0px) rotate(-360deg);}}

@keyframes floatParticle{0%{transform:translateY(0px) translateX(0px) scale(0);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-100px) translateX(50px) scale(1);opacity:0;}}

@keyframes meteorShower{0%{transform:translateX(-100px) translateY(0px);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateX(100vw) translateY(100px);opacity:0;}}

@keyframes asteroidFloat{0%{transform:translateX(0px) translateY(0px) rotate(0deg);opacity:0;}20%{opacity:0.8;}80%{opacity:0.8;}100%{transform:translateX(50px) translateY(30px) rotate(360deg);opacity:0;}}

/* Shrinking Header Effect */
.header {
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  min-height: 80px !important;
}

.header.scrolled {
  min-height: 60px !important;
  padding: 0.4rem 0 !important;
  background: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 2px 20px rgba(0, 212, 255, 0.3) !important;
}

.header.scrolled .container-fluid {
  padding: 0.5rem 1rem !important;
}

.header.scrolled .logo img {
  height: 45px !important;
  transition: all 0.3s ease !important;
}

.header.scrolled .navmenu ul li a {
  font-size: 0.85rem !important;
  padding: 0.4rem 0.8rem !important;
  transition: all 0.3s ease !important;
}

.header.scrolled .navmenu ul li a:hover {
  color: #00d4ff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

.header.scrolled .mobile-nav-toggle {
  font-size: 1.2rem !important;
  padding: 0.3rem !important;
}

/* Rocket Scroll Button */
.scroll-top {
  background: linear-gradient(135deg, #00d4ff, #ff5c5c) !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,212,255,0.4), 0 0 30px rgba(255,92,92,0.3) !important;
  transition: all 0.3s ease !important;
}

.scroll-top:hover {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 8px 30px rgba(0,212,255,0.6), 0 0 40px rgba(255,92,92,0.5) !important;
  background: linear-gradient(135deg, #00e5ff, #ff6b6b) !important;
}

.scroll-top i {
  font-size: 1.5rem !important;
  color: white !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
  transition: all 0.3s ease !important;
}

.scroll-top:hover i {
  transform: translateY(-2px) scale(1.1) !important;
  text-shadow: 0 0 15px rgba(255,255,255,0.8) !important;
}

.brand-particle{position:absolute;width:2px;height:2px;background:radial-gradient(circle, rgba(255,255,255,0.3), transparent);border-radius:50%;pointer-events:none;animation:floatParticle 4s linear infinite;}

.brand-card{background:radial-gradient(circle at 30% 30%, rgba(0,0,0,0.9), rgba(20,20,20,0.95), rgba(0,0,0,0.98));border:2px solid rgba(255,255,255,0.1);border-radius:50%;padding:2.5rem;text-align:center;transition:all 0.8s ease;backdrop-filter:blur(20px);position:relative;overflow:hidden;cursor:pointer;width:280px;height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 30px rgba(0,0,0,0.8), inset 0 0 30px rgba(255,255,255,0.05);flex-shrink:0;}

.brand-card::before{content:'';position:absolute;top:5%;left:5%;right:5%;bottom:5%;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 60%);border-radius:50%;opacity:0.8;transition:all 0.5s ease;}

.brand-card::after{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:conic-gradient(from 0deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));border-radius:50%;z-index:-1;opacity:0.6;animation:planetRotate 15s linear infinite;}

.brand-card:hover::before{opacity:1;}

.brand-card:hover::after{opacity:1;animation:planetRotate 4s linear infinite;}

.brand-card:hover{transform:translateY(-10px) scale(1.1);box-shadow:0 0 40px rgba(255,255,255,0.1), 0 0 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(255,255,255,0.08);}

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

.brand-logo{width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), rgba(0,0,0,0.8));display:flex;align-items:center;justify-content:center;transition:all 0.5s ease;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(255,255,255,0.1), inset 0 0 20px rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);}

.brand-card:hover .brand-logo{transform:scale(1.3);box-shadow:0 0 30px rgba(255,255,255,0.2), inset 0 0 30px rgba(255,255,255,0.1);}

.brand-logo img{width:50px;height:50px;object-fit:contain;transition:all 0.5s ease;filter:brightness(1.3) contrast(1.2) saturate(1.2);}

.brand-card:hover .brand-logo img{transform:scale(1.2);filter:brightness(1.6) contrast(1.4) saturate(1.4);}

.brand-card h4{font-size:1.4rem;color:rgba(255,255,255,0.9);margin-bottom:0.5rem;font-weight:700;position:relative;z-index:2;text-shadow:0 0 10px rgba(255,255,255,0.3), 0 0 20px rgba(255,255,255,0.1);letter-spacing:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.brand-card p{color:rgba(255,255,255,0.7);font-size:0.9rem;margin-bottom:1.2rem;position:relative;z-index:2;text-shadow:0 0 5px rgba(255,255,255,0.2);line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

.brand-link{display:inline-block;padding:0.6rem 1.5rem;background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));color:rgba(255,255,255,0.9);text-decoration:none;border-radius:25px;font-size:0.8rem;font-weight:700;transition:all 0.4s ease;box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);position:relative;z-index:2;text-transform:uppercase;letter-spacing:1px;border:1px solid rgba(255,255,255,0.2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.brand-link:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(255,255,255,0.2);color:white;text-decoration:none;}

/* Brand Card Animations */
.brand-card{opacity:1;transform:translateY(0) scale(1);transition:all 0.6s ease;}

/* Responsive Design */
@media (max-width: 768px) {
  .brands-slider-container{padding:1.5rem 0;}
  .brands-slider{height:360px;padding:30px 0;}
  .brand-card{width:220px;height:220px;padding:1.8rem;flex-shrink:0;}
  .brand-logo{width:60px;height:60px;}
  .brand-logo img{width:40px;height:40px;}
  .brand-card h4{font-size:1.1rem;}
  .brand-card p{font-size:0.8rem;}
  .brand-link{padding:0.5rem 1.2rem;font-size:0.75rem;}
}

@media (max-width: 480px) {
  .brands-slider-container{padding:1rem 0;}
  .brands-slider{height:320px;padding:25px 0;}
  .brand-card{width:180px;height:180px;padding:1.4rem;flex-shrink:0;}
  .brand-logo{width:50px;height:50px;}
  .brand-logo img{width:35px;height:35px;}
  .brand-card h4{font-size:1rem;}
  .brand-card p{font-size:0.75rem;}
  .brand-link{padding:0.4rem 1rem;font-size:0.7rem;}
}

/* FAQ SECTION */
.section:last-of-type{margin-top:4rem;padding-top:2rem;}


/* OLD TESTIMONIAL STYLES REMOVED - USING NEW CAROUSEL STYLES ABOVE */

/* Flowing Strings Background for Creators Section Only */
#creators.section::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:
    linear-gradient(45deg, transparent 20%, rgba(0,212,255,0.15) 50%, transparent 80%),
    linear-gradient(-30deg, transparent 15%, rgba(255,92,92,0.12) 50%, transparent 85%),
    linear-gradient(60deg, transparent 25%, rgba(255,217,61,0.1) 50%, transparent 75%),
    linear-gradient(-45deg, transparent 10%, rgba(138,43,226,0.13) 50%, transparent 90%);
  animation:flowingStrings 20s linear infinite;
  z-index:0;
  pointer-events:none;
}

@keyframes flowingStrings{
  0%{
    transform:translateX(-100%) translateY(0) rotate(0deg);
    opacity:0;
  }
  5%{
    opacity:0.6;
  }
  15%{
    opacity:0.9;
  }
  50%{
    transform:translateX(50%) translateY(-10px) rotate(2deg);
    opacity:1;
  }
  85%{
    opacity:0.8;
  }
  95%{
    opacity:0.4;
  }
  100%{
    transform:translateX(300%) translateY(0) rotate(0deg);
    opacity:0;
  }
}

@keyframes flowingStringMove{
  0%{
    transform:translateX(-100%) translateY(0) rotate(0deg);
    opacity:0;
  }
  5%{
    opacity:0.6;
  }
  15%{
    opacity:0.9;
  }
  50%{
    transform:translateX(50%) translateY(-10px) rotate(2deg);
    opacity:1;
  }
  85%{
    opacity:0.8;
  }
  95%{
    opacity:0.4;
  }
  100%{
    transform:translateX(300%) translateY(0) rotate(0deg);
    opacity:0;
  }
}