* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: 'Montserrat', sans-serif; 
} 

body { 
  background: #0a0a0a; 
  color: white; 
  scroll-behavior: smooth; 
} 

/* Navbar */
.navbar { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 20px 50px; 
  position: fixed; 
  width: 100%; 
  background: rgba(0,0,0,0.85); 
  z-index: 1000; 
  box-shadow: 0 0 20px #00aaff; /* was pink, now blue glow */
} 

.navbar .logo {
  font-size: 2em;
  font-weight: bold;
  color: #00aaff;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
  }
  50% {
    text-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff;
  }
  100% {
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
  }
}

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

.nav-links a { 
  text-decoration: none; 
  color: white; 
  transition: 0.3s; 
  text-shadow: 0 0 5px #fff; 
} 

.nav-links a:hover { 
  color: #00aaff; 
  text-shadow: 0 0 15px #00aaff, 0 0 30px #00aaff; 
}

.footer {
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  padding: 20px;
  color: #fff;
  font-size: 0.9em;
  border-top: 1px solid #c0c0c0; /* silver border */
  box-shadow: 0 -2px 15px rgba(0, 170, 255, 0.5); /* blue glow instead of pink */
}

/* Hero Section */
.hero { 
  height: 100vh; 
  background: url('maggies-bg.jpg') center/cover no-repeat; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  position: relative; 
  overflow: hidden; 
} 

.hero::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: rgba(0,0,0,0.6); 
} 

.hero-content { 
  position: relative; 
  z-index: 1; 
  animation: fadeIn 2s ease-in-out; 
} 

.hero-content h1 { 
  font-size: 3.5em; 
  margin-bottom: 20px; 
  color: #00aaff; /* was pink, now blue */
  text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff; 
  animation: neonGlow 1.5s infinite alternate; 
} 

.hero-content p { 
  font-size: 1.3em; 
  margin-bottom: 30px; 
  color: #fff; 
} 

.btn { 
  padding: 12px 30px; 
  background: #00aaff; /* blue button */
  color: white; 
  text-decoration: none; 
  border-radius: 5px; 
  transition: 0.3s; 
  box-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff; 
} 

.btn:hover { 
  background: #0088cc; /* darker blue hover */
  box-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff; 
} 

/* Sections */
section { 
  padding: 120px 50px; 
} 

h2 { 
  text-align: center; 
  font-size: 2.5em; 
  margin-bottom: 50px; 
  color: #00aaff; 
  text-shadow: 0 0 10px #00aaff; 
} 

/* Event Cards Layout */
.events .event-cards, 
.booth-cards, 
.events-calendar .countdowns { 
  display: flex; 
  gap: 25px; 
  flex-wrap: wrap; 
  justify-content: center; 
} 

/* ============================== Event Cards ============================== */
.event-cards { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  margin: 30px auto; 
  max-width: 1200px; 
} 

.event-card { 
  border: 1px solid #444; 
  background: #111; 
  padding: 20px; 
  margin: 15px; 
  border-radius: 12px; 
  width: 280px; 
  box-shadow: 0 0 10px #111; 
  transition: transform 0.2s, box-shadow 0.2s; 
} 

.event-card:hover { 
  transform: scale(1.03); 
  box-shadow: 0 0 20px #00aaff; /* blue glow instead of pink/red */ 
} 

/* Event Title & Date */
.event-card h3 { 
  margin: 0; 
  font-size: 1.5rem; 
  color: #00aaff; /* was #ff0055 */ 
} 

.event-card .event-date { 
  font-size: 0.9rem; 
  margin: 5px 0 10px; 
  color: #c0c0c0; /* silver tone instead of #ff77aa */ 
} 

.card, 
.booth-card, 
.countdown-card { 
  background: #1a1a1a; 
  padding: 25px; 
  border-radius: 15px; 
  flex: 1 1 220px; 
  text-align: center; 
  transition: 0.3s; 
  box-shadow: 0 0 10px #00aaff; 
} 

.card:hover, 
.booth-card:hover, 
.countdown-card:hover { 
  transform: translateY(-10px); 
  box-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff; 
} 

.booth-card button { 
  margin-top: 15px; 
  padding: 10px 20px; 
  border: none; 
  background: #00aaff; 
  color: white; 
  cursor: pointer; 
  border-radius: 5px; 
  transition: 0.3s; 
} 

.booth-card button:hover { 
  background: #0088cc; 
  box-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff; 
} 

/* Gallery */
.gallery .images { 
  display: flex; 
  gap: 20px; 
  flex-wrap: wrap; 
  justify-content: center; 
} 

.gallery img { 
  width: 100%; 
  max-width: 400px; 
  border-radius: 15px; 
  transition: transform 0.3s, box-shadow 0.3s; 
} 

.gallery img:hover { 
  transform: scale(1.05); 
  box-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff; 
} 

/* Contact */
.contact form { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
  max-width: 500px; 
  margin: 0 auto; 
} 

.contact input, 
.contact textarea { 
  padding: 12px; 
  border-radius: 5px; 
  border: none; 
  outline: none; 
} 

.contact button { 
  padding: 12px; 
  border: none; 
  background: #00aaff; 
  color: white; 
  cursor: pointer; 
  border-radius: 5px; 
  box-shadow: 0 0 10px #00aaff; 
  transition: 0.3s; 
} 

.contact button:hover { 
  background: #0088cc; 
  box-shadow: 0 0 20px #00aaff, 0 0 40px #00aaff; 
} 

/* Animations */
@keyframes neonGlow { 
  0% { 
    text-shadow: 0 0 5px #00aaff, 0 0 10px #00aaff; 
  } 
  50% { 
    text-shadow: 0 0 20px #00aaff, 0 0 30px #00aaff; 
  } 
  100% { 
    text-shadow: 0 0 5px #00aaff, 0 0 10px #00aaff; 
  } 
} 

@keyframes fadeIn { 
  from { 
    opacity: 0; 
    transform: translateY(20px);
  } 
  to { 
    opacity: 1; 
    transform: translateY(0);
  } 
} 

/* Neon dots */
.neon-dot { 
  position: absolute; 
  width: 5px; 
  height: 5px; 
  background: #00aaff; 
  border-radius: 50%; 
  opacity: 0.7; 
  animation: float 3s infinite alternate; 
  box-shadow: 0 0 15px #00aaff;
} 

@keyframes float { 
  0% { 
    transform: translateY(0px); 
    opacity: 0.7; 
  } 
  100% { 
    transform: translateY(-50px); 
    opacity: 1; 
  } 
} 

/* Ticket Box */
.ticket-box { 
  margin-top: 10px; 
  text-align: center; 
} 

.ticket-box a { 
  display: inline-block; 
  padding: 10px 20px; 
  background: #ffffff; /* White background */ 
  color: #00aaff;      /* Blue text */ 
  font-weight: bold; 
  text-decoration: none; 
  border-radius: 12px; /* Rounded corners */ 
  border: 2px solid #00aaff; /* Blue border */ 
  transition: background 0.2s, color 0.2s; 
} 

.ticket-box a:hover { 
  background: #00aaff; /* Fill blue on hover */ 
  color: #fff;         /* Text turns white */ 
}