body { background-color: #121212; font-family: Arial, sans-serif; color: white; padding: 30px; }

h1, h2 { color: #00bfff; }

ul { list-style: none; padding-left: 0; }

li::before { content: '•'; color: #00bfff; margin-right: 8px; }

.highlight { font-weight: bold; color: #00ffff; }


.section { background: #111; padding: 20px; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 183, 255, 0.3); }

.info-section { background-color: #121212; padding: 20px; border-left: 3px solid #00bfff; border-radius: 4px; }

.simple-separator { border: none; height: 1px; background-color: #333; margin: 40px 0 20px; }

.footer { margin-top: 30px; text-align: center; font-size: 13px; color: #fff; padding: 20px 0; }

.footer a { color: #fff; text-decoration: none; }

.footer a:hover { text-decoration: underline; }

.styled-heading { font-size: 36px; font-weight: bold; text-align: center; margin-top: 40px; user-select: none; }

.plain-text { color: #ffffff; }

.neon-blink { color: #00f7ff; text-shadow: 0 0 5px #00f7ff, 0 0 10px #00e5ff, 0 0 20px #00d4ff, 0 0 40px #00c3ff, 0 0 60px #00b2ff; animation: blinkNeon 1.5s infinite alternate; }

@keyframes blinkNeon { 0% { opacity: 1; } 100% { opacity: 0.8; } }

.divider { width: 80%; height: 2px; margin: 25px auto 15px; background: linear-gradient(90deg, transparent, #00bfff, transparent); animation: pulse-glow 2s infinite ease-in-out; }

@keyframes pulse-glow { 0%, 100% { opacity: 0.3; box-shadow: 0 0 5px #00bfff; } 50% { opacity: 1; box-shadow: 0 0 15px #00bfff; } }

.panel-wrapper { display: inline-block; position: relative; margin-bottom: 30px; }

.neon-button { width: 300px; padding: 10px 20px; background: #1a1a1a; color: #00f7ff; border: none; border-left: 5px solid #00bfff; font-weight: bold; font-size: 16px; border-radius: 10px; cursor: pointer; box-shadow: 0 0 8px #00bfff44; transition: 0.3s ease; text-align: left; }

.neon-button:hover { background: #222; box-shadow: 0 0 12px #00bfff88, 0 0 20px #00dfff55 inset; }

.panel-content { width: 300px; max-height: 300px; overflow-y: auto; background: rgba(0, 0, 0, 0.85); position: absolute; top: 100%; left: 0; border-radius: 10px; box-shadow: 0 0 4px #00bfff80, 0 0 8px #00dfff40; border: 1px solid #00bfff40; opacity: 0; transition: opacity 0.4s ease; padding: 10px; word-break: break-word; box-sizing: border-box; z-index: 10; pointer-events: none; }

.panel-content.show { opacity: 1; pointer-events: auto; }

.scroll-warning { position: sticky; top: 0; background: none; color: #00f7ff; font-size: 13px; font-weight: bold; text-align: center; text-shadow: 0 0 6px #00bfff, 0 0 10px #00dfff; padding: 5px 0; opacity: 1; transition: opacity 0.5s ease; z-index: 1; }

.scroll-warning.hidden { opacity: 0; }

.panel-content h3, .panel-content h4 { color: #00f7ff; margin-bottom: 5px; }

.panel-content ul { padding-left: 18px; margin: 5px 0 10px; }

.panel-content li { margin-bottom: 5px; }

.panel-content a { color: #00bfff; text-decoration: underline; }

.google-container { margin-top: 20px; text-align: center; }

.google-button { background-color: white; color: #3c4043; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; padding: 10px 16px; font-family: Arial, sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transition: background 0.2s ease; display: inline-block; width: auto; max-width: 90%; }

.google-button:hover { background-color: #f8f9fa; }

.back-button {
  background: #00bfff;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,183,255,0.4), 0 0 4px #00ccff inset;
  text-shadow: 0 0 4px #ffffff;
  transition: 0.3s;
  margin-top: 10px;
}

.back-button:hover {
  background: #0099cc;
  box-shadow: 0 0 15px #00ccff;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.faq-box {
  width: 85%; 
  max-width: 380px; 
  margin: 20px auto; 
  background: #111;
  padding: 14px; 
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 183, 255, 0.25);
}

.faq-item {
  border-bottom: 1px solid #222;
  padding: 10px 0; 
}

.faq-question {
  font-size: 14px; 
  font-weight: bold;
  cursor: pointer;
  color: #00f7ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #00dfff;
}

.faq-answer {
  margin-top: 6px; 
  display: none;
  color: #ffffff;
  background: rgba(0,0,0,0.3);
  padding: 10px; 
  border-radius: 8px;
  box-shadow: inset 0 0 6px #00bfff33;
  font-size: 13px; 
  line-height: 1.4;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.rotate {
  transform: rotate(90deg);
}

.styled-heading {
  font-size: 22px; 
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #00bfff;
}

.blue-highlight {
  color: #00f7ff;
  font-weight: bold;
}