/* === General Body Styles === */
body {
  margin: 0;
  padding: 0;
  background: url('background.png') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Orbitron', sans-serif;
  color: #ffffff;
}

/* === Transparent Layout Sections === */
header, nav, .hero, .main-content, footer {
  background-color: transparent !important;
}

/* === Optional Text Shadow for Visibility === */
h1, h2, h3, p, a, li, span {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.85);
}

/* Keep nav dropdown open on hover/focus (Tailwind v2-safe) */
nav .menu-group:hover .menu-panel,
nav .menu-group:focus-within .menu-panel { display: block; }

.navbar {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6);

  
}
.btn-neon{
  background:#22d3ee;   /* neon teal */
  color:#061216;
  transition:background-color .2s ease, transform .06s ease;
}
.btn-neon:hover{
  background:#2dd4bf;   /* hover shade */
}
.btn-neon:active{
  transform: translateY(1px);
}

.nav-item {
  display: inline-flex;         /* behave like a flex tile, not inline text */
  align-items: center;          /* center vertically */
  justify-content: center;      /* center horizontally */
  padding: 0.5rem 1rem;
  white-space: nowrap;
  min-width: max-content;       /* expand to fit content */
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.1),
    inset -1px -1px 2px rgba(0,0,0,0.5),
    0 0 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;
}

.nav-item:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 15px rgba(0, 255, 255, 0.3);
  background: linear-gradient(145deg, rgba(0,255,255,0.1), rgba(0,0,0,0.3));
}


.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* equivalent to space-x-4 */
  margin-top: 1rem;
}

.section-overlay {
  background-color: rgba(0, 0, 0, 0.6); /* Dark but transparent */
  padding: 3rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.text-glass {
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  border-radius: 0.5rem;                /* soft rounded corners */
  padding: 1.5rem;                      /* gives it breathing room */
}

.text-dark {
  background-color: rgba(0, 0, 0, 0.8); /* semi-transparent black */
  border-radius: 0.5rem;                /* soft rounded corners */
  padding: 1.5rem;                      /* gives it breathing room */
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 15px rgba(0, 255, 255, 0.8);
background: linear-gradient(145deg, rgba(0,0,100,0.3), rgba(0,100,100,0.3));

}