@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

body {
  background-color: #0a0a0a;
  color: white;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  overflow-y: auto; /* Allow vertical scrolling */
  height: 100%;
}

html {
  height: 100%;
}

.glass-card {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 36, 196, 0.2);
}

.gradient-bg {
  background: linear-gradient(135deg, rgba(188, 36, 196, 0.1) 0%, rgba(15, 15, 15, 0.8) 50%, rgba(188, 36, 196, 0.1) 100%);
}

.gradient-text {
  background: linear-gradient(90deg, #ec4899 0%, #bc24c4 50%, #9d1d9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(188, 36, 196, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(188, 36, 196, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(188, 36, 196, 0);
  }
}

.floating {
  animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.grid-pattern {
  background-image: 
    linear-gradient(rgba(188, 36, 196, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(188, 36, 196, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
  overflow-x: hidden; /* Only hide horizontal overflow */
  overflow-y: auto; /* Allow vertical scrolling */
  min-height: 100%;
}

.grid-pattern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><circle cx="15" cy="15" r="3"/><circle cx="35" cy="25" r="2"/><circle cx="75" cy="15" r="4"/><circle cx="85" cy="65" r="3"/><circle cx="25" cy="85" r="2"/><circle cx="65" cy="75" r="3"/><circle cx="45" cy="45" r="2"/><circle cx="85" cy="25" r="3"/><circle cx="15" cy="65" r="4"/><circle cx="55" cy="35" r="2"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><path d="M10,10 L90,10 L90,90 L10,90 Z" stroke-width="2"/><path d="M30,30 L70,30 L70,70 L30,70 Z" stroke-width="1"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><polygon points="50,5 90,90 10,90"/><polygon points="50,30 70,70 30,70"/></svg>');
  background-size: 100px 100px, 150px 150px, 120px 120px;
  background-repeat: repeat;
  z-index: -1;
}

/* Crypto grid elements */
.crypto-grid-element {
  position: fixed;
  font-size: 1.5rem;
  color: rgba(188, 36, 196, 0.1);
  z-index: -1;
}

.crypto-grid-element:nth-child(1) { top: 15%; left: 10%; }
.crypto-grid-element:nth-child(2) { top: 25%; right: 15%; }
.crypto-grid-element:nth-child(3) { top: 45%; left: 20%; }
.crypto-grid-element:nth-child(4) { top: 65%; right: 10%; }
.crypto-grid-element:nth-child(5) { top: 85%; left: 15%; }
.crypto-grid-element:nth-child(6) { top: 35%; right: 25%; }

/* FAQ specific styles */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(188, 36, 196, 0.2);
}

.faq-question h3 {
  transition: color 0.3s ease;
}

.faq-question:hover h3 {
  color: rgba(236, 72, 153, 1);
}

.faq-answer {
  line-height: 1.6;
}

/* Animation for FAQ items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: calc(var(--index) * 0.1s);
  opacity: 0;
}

/* Set animation delay for each FAQ item */
.faq-item:nth-child(1) { --index: 1; }
.faq-item:nth-child(2) { --index: 2; }
.faq-item:nth-child(3) { --index: 3; }
.faq-item:nth-child(4) { --index: 4; }
.faq-item:nth-child(5) { --index: 5; }
.faq-item:nth-child(6) { --index: 6; }
.faq-item:nth-child(7) { --index: 7; }
.faq-item:nth-child(8) { --index: 8; }
.faq-item:nth-child(9) { --index: 9; }
.faq-item:nth-child(10) { --index: 10; }
.faq-item:nth-child(11) { --index: 11; }
.faq-item:nth-child(12) { --index: 12; }

.faq-item:hover {
  background: rgba(121, 4, 111, 0.514);
}

.nav-icon {
  color: #ff00ff;
  font-size: 25px;
  font-weight: bold;
  margin-left: 10px;
}

.faq-section {
  position: relative;
  padding: 0;
}

.faq-section img {
  margin: 0;
  padding: 0;
  max-height: 95px;
}

.bottom-right-image {
  position: fixed;
  bottom: -100px;
  right: -140px;
  width: 260px;
  transform: rotate(25deg);
  z-index: -1;
  filter: brightness(1.1) contrast(1) drop-shadow(0 0 15px #a64dff);
  transition: filter 0.3s ease;
  overflow: hidden;
  object-fit: cover;
  pointer-events: none;
}

.top-right-image {
  position: fixed;
  top: 120px;
  right: -100px;
  width: 200px;
  transform: rotate(180deg);
  z-index: -1;
  filter: brightness(12) contrast(2.2) drop-shadow(0 0 5px #650264);
  transition: filter 0.3s ease;
  pointer-events: none;
  overflow: hidden;
}

.bottom-left-image {
  position: fixed;
  bottom: -50px;
  left: -70px;
  width: 200px;
  z-index: -1;
  filter: brightness(15) contrast(5.2) opacity(0.1)
    drop-shadow(0 0 5px #b794d963);
  transition: filter 0.3s ease;
  pointer-events: none;
  overflow: hidden;
}

.top-left-image {
  position: fixed;
  top: -320px;
  left: -270px;
  width: 700px;
  height: auto;
  z-index: -1;
  margin: 0;
  transform: rotate(180deg);
  pointer-events: none;
  overflow: hidden;
}

.glow-image {
  filter: brightness(1.5) contrast(1.1) saturate(1.2) opacity(0.95);
  mix-blend-mode: screen;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: glow 1.2s ease-in-out infinite alternate;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

.highlight {
  animation: pulse 4s infinite ease-in-out;
}

@keyframes glow {
  0% {
    filter: brightness(1.1) contrast(1.1) saturate(1.1) opacity(0.5);
  }
  100% {
    filter: brightness(1.2) contrast(1.3) saturate(1.2) opacity(0.75);
  }
}

/* Add these navbar styles */
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-radius: 12px;
  position: relative;
  z-index: 10;
  background-color: transparent;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  width: 50px;
  height: 50px;
}

.logo {
  font-size: 22px;
  font-weight: bold;
  color: #F8A5FF;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 40px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: #F8A5FF;
}

.nav-links li a.active {
  color: #F8A5FF;
}

/* Fix for footer and content positioning */
body {
  background-color: #0a0a0a;
  color: white;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  margin-bottom: 2rem; /* Add space between content and footer */
  position: relative;
  z-index: 1; /* Ensure content is above background elements */
}

footer {
  position: relative;
  z-index: 1; /* Ensure footer is above background elements */
  margin-top: auto; /* Push footer to bottom */
}

/* Ensure FAQ items are visible */
.faq-item {
  position: relative;
  z-index: 2; /* Higher than background elements */
  margin-bottom: 1rem;
}

/* Adjust fixed elements to not interfere with content */
.crypto-grid-element,
.bottom-right-image,
.top-right-image,
.bottom-left-image,
.top-left-image {
  z-index: -1; /* Ensure these stay behind content */
}