/* Mobile menu close button styles */
.mobile-menu-close-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: #fff;
  z-index: 10002;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-close-btn svg {
  width: 2rem;
  height: 2rem;
  stroke: #fff;
}
@media (max-width: 900px) {
  .desktop-links {
    display: none !important;
  }
  .mobile-menu-button {
    display: block !important;
  }
  .mobile-nav-overlay {
    display: none;
  }
  .mobile-nav-overlay.is-open {
    display: flex !important;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    z-index: 10000;
  }
}

/* DJ Sanveer Design System - Futuristic Nightlife + Bollywood + Global EDM Fusion
   Converted to pure CSS (no Tailwind)
*/

/* Core Theme Variables */
:root {
  /* Core DJ Theme - Dark nightclub with neon accents */
  --background: 248 12% 6%;
  --foreground: 0 0% 98%;

  --card: 248 15% 8%;
  --card-foreground: 0 0% 95%;

  --popover: 248 15% 8%;
  --popover-foreground: 0 0% 95%;

  /* Neon Pink Primary - DJ Sanveer signature */
  --primary: 320 100% 68%;
  --primary-foreground: 0 0% 100%;

  /* Neon Purple Secondary - Global & Bolly Fiesta */
  --secondary: 280 100% 70%;
  --secondary-foreground: 0 0% 100%;

  /* Electric Blue Accent - EDM vibes */
  --accent: 220 100% 65%;
  --accent-foreground: 0 0% 100%;

  /* Gold Premium - VIP sections */
  --gold: 45 100% 60%;
  --gold-foreground: 248 12% 6%;

  --muted: 248 8% 15%;
  --muted-foreground: 0 0% 65%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --border: 248 15% 15%;
  --input: 248 15% 12%;
  --ring: 320 100% 68%;

  /* Neon Gradients */
  --gradient-neon: linear-gradient(135deg, hsl(320 100% 68%), hsl(280 100% 70%), hsl(220 100% 65%));
  --gradient-neon-name: linear-gradient(135deg, hsl(56, 50%, 47%), hwb(51 40% 0%), hsl(39, 88%, 41%));
  --gradient-dark: linear-gradient(180deg, hsl(248 12% 6%), hsl(248 15% 8%));
  --gradient-glow: radial-gradient(ellipse at center, hsl(320 100% 68% / 0.3), transparent 70%);

  /* Animation Shadows & Glows */
  /*--neon-glow: 0 0 20px hsl(320 100% 68% / 0.5), 0 0 40px hsl(320 100% 68% / 0.3), 0 0 60px hsl(320 100% 68% / 0.1);*/
  
  --neon-glow:  animation: neon-pulse 8s ease-in-out infinite;
  
  
  --purple-glow: 0 0 20px hsl(2280 100% 70%), 0 0 40px hsl(280 100% 70% / 0.3);
  --purple-neon-glow: 0 0 20px hsl(280 100% 70% / 0.5), 0 0 40px hsl(280 100% 70% / 0.5);
  --blue-glow: 0 0 20px hsl(220 100% 65% / 0.5), 0 0 40px hsl(220 100% 65% / 0.3);
  --gold-glow: 0 0 20px hsl(45 100% 60% / 0.5), 0 0 40px hsl(45 100% 60% / 0.3);

  --radius: 0.75rem;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Global Reset */
* {
  border-color: hsl(var(--border));
}

/* Body Styles */
body {
  overflow-x: hidden;

  font-family: 'Orbitron', 'Inter', sans-serif;
  color: hsl(var(--foreground));
     background: linear-gradient(-45deg, #1a0b2e, #2e0b4e, #1a0b2e, #4e0b2e);
            background-size: 400% 400%;
   padding-bottom: 1.5em;
}



/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}
::-webkit-scrollbar-thumb {
  background: var(--gradient-neon);
  border-radius: 4px;
}

/* Glow Effects */
.neon-effect {
  box-shadow: var(--neon-glow);
  animation: pulse-glow 2s ease-in-out infinite alternate;
}
.cute-glow {
  box-shadow:var(--neon-glow);
}
.purple-glow { box-shadow: var(--purple-glow); }
.blue-glow { box-shadow: var(--blue-glow); }
.gold-glow { box-shadow: var(--gold-glow); }
.muted { color: hsl(0, 0%, 65%); }

/* Typography */
 

.dj-title {
            font-family: 'Orbitron', monospace;
             font-optical-sizing: auto;
            background: linear-gradient(90deg, #ff6ec4 0%, #a685ff 50%, #4fd1ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
              text-transform: uppercase;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.05em;
            font-weight: 900;
        }

.dj-hero-title {
  font-family: 'Orbitron', monospace;
   font-optical-sizing: auto;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--gradient-neon);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  outline: #4e0b2e;
   
}


   .dj-sub-title {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
   
    letter-spacing: 0em;
    background: var(--gradient-neon);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
   .dj-sub-title-hero {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 0em;
    background: var(--gradient-neon-name);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.dj-title_top {
  font-family: 'Lexend Deca', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--gradient-neon);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.futuristic-text {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.futuristic-text-shadow{
 text-shadow: 0 0 10px #00f;
}
.sub-head
{font-size: 1rem;}

.wText
{
  color:whitesmoke;
}
.subtext{
    color: #ff5cc9;
}

/* Disco Background */
/* This is the original, simple background style without the grid */
.disco-bg {
  background: 
    radial-gradient(circle at 20% 50%, hsl(var(--primary) / 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, hsl(var(--accent) / 0.1) 0%, transparent 50%),
    var(--gradient-dark);
}

 
 


/* Image Gradient Overlay */
 
   .image-with-gradient {
background: linear-gradient(180deg, hsl(248 12% 6%), hsl(248 15% 8%)),
    url('../images/GBFLandingLite.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
 
}

/* Animations */
@keyframes pulse-glow {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.2) saturate(1.3); }
}

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

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

    nav .book-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      nav .menu-btn {
        display: none;
      }


/* =================================================== */
/* CONTACT SECTION COMPONENT STYLES                   */
/* (Add this to the end of your main CSS file)        */
/* =================================================== */

/* 1. LAYOUT & SPACING (GRID, FLEX, MARGINS, PADDING) */
/* These utility classes structure the component itself */
.container {
  max-width: 1280px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.grid { display: grid; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.text-center { text-align: center; }

/* Gaps */
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-12 { gap: 3rem; }

/* Margins & Space-Between */
.mb-1 { margin-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4 { margin-top: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Grid Columns */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 2. TYPOGRAPHY & TEXT COLORS (UTILITIES) */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 768px) {
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
}

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-semibold { font-weight: 600; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.max-w-4xl { max-width: 56rem; }

/* Text Colors from your Design System */
.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-accent { color: hsl(var(--accent)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }


/* 3. COMPONENT STYLES (ADAPTED TO YOUR THEME) */

.card {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}
.card-content {
  padding: 1.5rem; /* Default padding */
}
.p-8 { padding: 2rem; }
.p-6 { padding: 1.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 700;
  font-family: 'Orbitron', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
  text-decoration: none; /* For <a> tags styled as buttons */
  color: hsl(var(--primary-foreground));
}
.button.size-lg {
  height: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
}
.w-full {
  width: 100%;
}

/* Main booking button - uses your neon primary style */
.button.variant-neon {
   background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--neon-glow);
  border: none;
}
.button.variant-neon:hover {
 filter: brightness(1.2);
  transform: scale(1.02);
}

/* Social media buttons */
.button.variant-outline {
  background-color: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
/* Specific button borders & hover effects */
.border-primary\/30 { border-color: hsl(var(--primary) / 0.3); }
.hover\:border-primary:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.hover\:bg-primary\/10:hover { background-color: hsl(var(--primary) / 0.1); }

.border-secondary\/30 { border-color: hsl(var(--secondary) / 0.3); }
.hover\:border-secondary:hover { border-color: hsl(var(--secondary)); color: hsl(var(--secondary)); }
.hover\:bg-secondary\/10:hover { background-color: hsl(var(--secondary) / 0.1); }

.border-accent\/30 { border-color: hsl(var(--accent) / 0.3); }
.hover\:border-accent:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
.hover\:bg-accent\/10:hover { background-color: hsl(var(--accent) / 0.1); }


/* Form Inputs */
.input, .textarea {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--input));
  padding: 0.75rem 1rem;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
}
.input::placeholder, .textarea::placeholder {
  color: hsl(var(--muted-foreground));
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}
.checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
}
.resize-none {
  resize: none;
}


/* 4. EFFECTS & MODIFIERS (ADAPTED TO YOUR THEME) */
.cursor-pointer {
  cursor: pointer;
}
.rounded-full {
  border-radius: 9999px;
}
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-duration: 0.2s;
}
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Background Opacity & Gradients */
.bg-card\/50 { background-color: hsl(var(--card) / 0.5); }
.bg-card\/30 { background-color: hsl(var(--card) / 0.3); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, hsl(var(--primary) / 0.1), hsl(var(--secondary) / 0.1));
}

/* Group Hover Effects */
.group:hover .group-hover\:bg-primary\/30 {
  background-color: hsl(var(--primary) / 0.3);
}

/* Icon specific styles */
.button svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
}
.p-3 { padding: 0.75rem; }
.p-3 svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
}

.h3{
     font-weight: 700;
    letter-spacing: 0em;
}
/* =================================================== */
/* ABOUT SECTION COMPONENT STYLES                     */
/* (Add this to the end of your main CSS file)        */
/* =================================================== */

/* 1. LAYOUT & POSITIONING UTILITIES */
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.z-10 { z-index: 10; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.top-0 { top: 0; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }
.bottom-6 { bottom: 1.5rem; }
.left-6 { left: 1.5rem; }
.right-6 { right: 1.5rem; }
.-top-4 { top: -1rem; }
.-right-4 { right: -1rem; }
.-bottom-4 { bottom: -1rem; }
.-left-4 { left: -1rem; }

.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.items-end { align-items: flex-end; }
.flex-shrink-0 { flex-shrink: 0; }


/* 2. SIZING & STYLING UTILITIES */
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.h-\[500px\] { height: 500px; }
.object-cover { object-fit: cover; }
.blur-3xl { filter: blur(64px); }
.leading-relaxed { line-height: 1.625; }
.duration-300 { transition-duration: 300ms; }
.border-2 { border-width: 2px; }

/* Background Colors & Gradients */
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-secondary\/10 { background-color: hsl(var(--secondary) / 0.1); }
.bg-secondary\/20 { background-color: hsl(var(--secondary) / 0.2); }
.bg-accent\/20 { background-color: hsl(var(--accent) / 0.2); }
.bg-gold\/20 { background-color: hsl(var(--gold) / 0.2); }
.bg-background\/80 { background-color: hsl(var(--background) / 0.8); }

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-background\/60 {
  --tw-gradient-from: hsl(var(--background) / 0.6);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--background) / 0));
}

/* Text color for gold */
.text-gold { color: hsl(var(--gold)); }

/* 3. NEW ANIMATIONS */
/* We already have float and spin-slow, let's add fade-in-up */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite alternate;
}

.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}

.animate-fade-in-up {
  /* Set a default, but inline styles will override */
  animation: fade-in-up 0.5s ease-out forwards;
  opacity: 0; /* Start hidden */
}

/* Icon Styles for this section */
.p-2 { padding: 0.5rem; }
.p-2 svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}
.text-primary svg, .bg-primary\/20 + div .text-primary { color: hsl(var(--primary)); }
.text-secondary svg, .bg-secondary\/20 + div .text-secondary { color: hsl(var(--secondary)); }
.text-accent svg, .bg-accent\/20 + div .text-accent { color: hsl(var(--accent)); }
.text-gold svg, .bg-gold\/20 + div .text-gold { color: hsl(var(--gold)); }


/* =================================================== */
/* NAVIGATION COMPONENT STYLES                        */
/* (Add this to the end of your main CSS file)        */
/* =================================================== */

/* 1. Main Navbar Styling */
 

.h-16 { height: 4rem; }
.z-50 { z-index: 50; }

 


 
 

.top-full { top: 100%; }
.space-x-8 > * + * { margin-left: 2rem; }


/* 3. Utility Classes from the component */
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-border\/50 { border-color: hsl(var(--border) / 0.5); }

/* Responsive utilities */
@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:block { display: block; }
    .md\:hidden { display: none; }
}

 

/* Style for the Purple "Book Now" Button */
.button.variant-purple {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
  color: hsl(var(--secondary-foreground));
  
  border: none;
}
.button.variant-purple:hover {
 filter: brightness(1.2);
  transform: scale(1.02);
}

/* Style for the Accent "Watch Live" Button */
.button.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground)); /* Makes text dark on hover for contrast */
}

/* This is our generic rule */
.button.variant-outline {
  background-color: hsl(var(--card) / 0.5);
  backdrop-filter: blur(4px);
  border: 1px solid hsl(var(--border));
}

 

/* Utility class for an accent-colored border */
.border-accent {
  border-color: hsl(var(--accent));
}

/* Style for the Accent "Watch Live" Button on hover */
.button.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground)); /* Makes text dark for contrast */
}

 

/* Utility class for accent-colored text */
.text-accent {
  color: hsl(var(--accent));
}

 

/* Icon Sizing (w-5, h-5 -> 1.25rem) */
.w-5 {
  width: 1.25rem;
}
.h-5 {
  height: 1.25rem;
}

/* Icon Margin (mr-2 -> 0.5rem) */
.mr-2 {
  margin-right: 0.5rem;
}

/* Icon Animations from React code */
.transition-transform {
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.gradient-text {
  /* Define the gradient. You can customize the colors and direction. */
  background-image: linear-gradient(to right, #e879f9, #a78bfa, #818cf8);
  
  /* Apply the background to the text and clip it. */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Make the text color transparent so the gradient is visible. */
  -webkit-text-fill-color: transparent;
  
  /* Optional: Add a fallback for browsers that don't support this. */
  color: #a78bfa; 
}


/* =================================================== */
/* PORTFOLIO GALLERY STYLES                           */
/* (Add this to the end of your CSS file)             */
/* =================================================== */

/* The main grid container */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem; /* Tighter gap between images */
}

.portfolio-grid a { /* This styles the gallery items */
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.5);
}

.portfolio-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.portfolio-grid a:hover img {
  transform: scale(1.05); /* Zoom effect on hover */
  opacity: 0.8;
}
 

.socials-card {
  text-align: center;
  background-color: hsl(var(--card) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.newsletter-form .button.variant-purple {
    flex-shrink: 0;
}
 
/* WhatsApp Sticky Button */
.whatsapp-sticky-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 55px;    /* size of the button */
  height: 55px;
  z-index: 1000;
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-sticky-button img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;  /* keeps it round if image is square */
}

/* Hover effect (desktop only) */
.whatsapp-sticky-button:hover {
  transform: scale(1.1);
}




.sticky-media-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: hsl(var(--card) / 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid hsl(var(--border));
  z-index: 999;
  padding: 10px 20px;
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 400px;
  margin: 0 auto;
}
.player-btn {
  background: none;
  border: none;
  color: hsl(var(--primary));
  cursor: pointer;
}
.track-info {
  flex-grow: 1;
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
}
.track-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.track-artist {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.progress-bar {
  width: 100px; /* Adjust as needed */
  accent-color: hsl(var(--primary));
}

/* =================================================== */
/* LIVESTREAM SECTION STYLES                          */
/* (Add this to the end of your CSS file)             */
/* =================================================== */

.live-monitor {
 
 
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  box-shadow: var(--neon-glow);
}

@media (max-width: 640px) {
  .live-monitor {
    padding: 0.75rem;
  }
}

.live-indicator-wrapper {
  position: absolute;
  top: -12px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: hsl(var(--background));
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  color: hsl(var(--primary));
}

.live-indicator {
  width: 10px;
  height: 10px;
  background-color: hsl(var(--primary));
  border-radius: 50%;
  animation: blink 1.5s infinite ease-in-out;
}

/* Blinking animation for the live dot */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* This is the magic for responsive video embeds */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* This creates a 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.5); /* Slightly smaller radius than the parent */
 
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
 
}

/* =================================================== */
/* UPCOMING EVENTS SECTION STYLES                     */
/* =================================================== */

.events-scroller {
  display: flex; /* Arranges items in a row */
  gap: 1.5rem;
  overflow-x: auto; /* Enables horizontal scrolling */
  padding: 2rem 1.5rem; /* Adds some space so cards don't touch the edges */
  
  /* This enables the smooth snapping effect */
  scroll-snap-type: x mandatory;
  
  /* Hides the scrollbar but keeps it scrollable */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;  /* For Internet Explorer + Edge */
}

/* Hides scrollbar for Chrome, Safari, and Opera */
.events-scroller::-webkit-scrollbar {
  display: none;
}

.event-card {
  /* This tells the card not to shrink and sets its width */
  flex: 0 0 300px; 
  scroll-snap-align: center; /* Snaps each card to the center */

  /* Your existing card styles */
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 10px 20px hsl(var(--background) / 0.5);
}

.event-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--blue-glow);
  border-color: hsl(var(--accent));
}

.event-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
}

.event-details {
  padding: 1.5rem;
}

.event-title {
  font-size: 1.25rem;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

.event-info {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

.info-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: hsl(var(--accent));
}

/* --- Tablet & Desktop Styles (Multi-Column) --- */
@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .events-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* =================================================== */
/* SITE FOOTER STYLES                                 */
/* =================================================== */

footer, .site-footer {
  position: relative;  /* prevent overlap */
  z-index: 1;
   
}

footer .footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  footer .footer-container {
    flex-direction: row;
    justify-content: space-between;
  }
}


.site-footer {
  background-color: hsl(var(--background));
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-top: 2px solid hsl(var(--primary));
  box-shadow: var(--neon-glow);
  position: relative;
   width: 100%;
  overflow-x: hidden;
}

/* --- Mobile First Styles (Single Column) --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr; /* One column on mobile */
  gap: 3rem; /* More space for vertical stacking */
  margin-bottom: 3rem;
  text-align: center; /* Center content on mobile */
   max-width: 100%;
  margin: 0 auto;
}
.footer-logo {
  height: 50px;
  width: auto;
  margin: 0 auto 1rem auto; /* Center the logo */
}
.footer-about p {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}
.footer-title {
  color: hsl(var(--secondary)); /* ADDED: Purple color for titles */
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-family: 'Orbitron', monospace;
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.footer-links a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.footer-links a:hover {
  color: hsl(var(--primary));
}
.social-icons {
  display: flex;
  gap: 1.5rem;
  justify-content: center; /* Center icons on mobile */
}
.social-icon svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--muted-foreground));
  transition: all 0.2s ease-in-out;
}
.social-icon:hover svg {
  color: hsl(var(--primary)); /* Pink hover for icons */
  transform: scale(1.1);
}
.footer-bottom {
  text-align: center;
  border-top: 1px solid hsl(var(--border));
  padding-top: 2rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  font-family: 'Inter', sans-serif;
 
}


/* --- Tablet & Desktop Styles (Multi-Column) --- */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Back to multi-column */
    text-align: left; /* Revert to left-align */
  }
  .footer-logo {
    margin: 0 0 1rem 0; /* Un-center the logo */
  }
  .social-icons {
    justify-content: flex-start; /* Un-center icons */
  }
}

 
 


/* REPLACE your old @keyframes float with this new one */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-40px) translateX(20px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.7;
  }
}


/* Add this to your theme.css file */
.py-20 {
  position: relative;
  overflow: hidden; /* Important for containing the glows */
}

/* First glowing circle */
.py-20::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  top: 10%;
  left: -50px;
  background: radial-gradient(circle, hsl(var(--primary) / 0.1) 0%, transparent 70%);
  animation: float 10s ease-in-out infinite alternate;
}

/* Second glowing circle */
.py-20::after {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  bottom: 5%;
  right: -50px;
  background: radial-gradient(circle, hsl(var(--secondary) / 0.1) 0%, transparent 70%);
  animation: float 12s ease-in-out infinite alternate;
  animation-delay: 2s;
}



.hero-text-pane {
  background-color: hsl(var(--card) / 0.2); /* Semi-transparent background */
  backdrop-filter: blur(8px); /* This creates the frosted glass effect */
  -webkit-backdrop-filter: blur(8px); /* For Safari support */
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / 0.5);
  margin-bottom: 1rem; /* Adds space between the text pane and the buttons */
  max-width: 800px; /* Prevents the pane from getting too wide on large screens */
}

 

/* =================================================== */
/* MUSIC STREAMING SECTION STYLES (CORRECTED)         */
/* (Add this to the end of your CSS file)             */
/* =================================================== */

/* This creates the three-column grid on medium screens and up */
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* This adds the spacing between the cards */
.gap-8 {
    gap: 2rem;
}

.streaming-card {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background-color: hsl(var(--card) / 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: var(--radius);
  transition: all 0.3s ease-in-out;
  animation: fade-in-up 0.5s ease-out forwards;
  opacity: 0;
}

.streaming-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  transform: translateY(-5px);
}

.gradient-overlay {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-image);
  opacity: 0.1;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.streaming-card:hover .gradient-overlay {
  opacity: 0.2;
}

.from-primary.to-secondary { --gradient-image: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--secondary))); }
.from-secondary.to-accent { --gradient-image: linear-gradient(to bottom right, hsl(var(--secondary)), hsl(var(--accent))); }
.from-accent.to-primary { --gradient-image: linear-gradient(to bottom right, hsl(var(--accent)), hsl(var(--primary))); }

.streaming-card .card-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.card-id {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.2);
  transition: background-color 0.3s ease-in-out;
}
.group:hover .card-id {
  background-color: hsl(var(--primary) / 0.3);
}
.card-id span {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  font-family: 'Orbitron', monospace;
}

.card-icon {
  padding: 0.75rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.1);
  box-shadow: var(--neon-glow);
  transition: background-color 0.3s ease-in-out;
}
.group:hover .card-icon {
   background-color: hsl(var(--primary) / 0.2);
}
.card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
}

.card-title {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
  transition: color 0.3s ease-in-out;
}
.group:hover .card-title {
  color: hsl(var(--primary));
}

.card-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  flex-grow: 1; 
  margin-bottom: 1.5rem;
}

.card-button {
  background-color: transparent;
  width: 100%;
  color: hsl(var(--muted-foreground));
  transition: all 0.3s ease-in-out;
  border: 1px solid transparent;
}
.group:hover .card-button {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.2);
}
.card-button svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.content-height
{
  height: 2rem;
}
/* ADD THIS TO THE END OF theme.css */

.hidden-section {
  display: none;
}


/* =================================================== */
/* LIVE CHAT STYLES                                   */
/* (Add this to the end of your CSS file)             */
/* =================================================== */
.live-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .live-grid {
    grid-template-columns: 2fr 1fr; /* Two columns on desktop */
  }
}

.live-monitor {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  position: relative;
  box-shadow: var(--neon-glow);
}

.live-indicator-wrapper {
  position: absolute;
  top: -12px;
  left: 24px;
  display: none; /* Hidden by default */
  align-items: center;
  gap: 0.5rem;
  background-color: hsl(var(--background));
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  color: hsl(var(--primary));
}

.live-indicator {
  width: 10px;
  height: 10px;
  background-color: hsl(var(--primary));
  border-radius: 50%;
  animation: blink 1.5s infinite ease-in-out;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.5);
  display: none; /* Hidden by default */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Live / Offline Toggle Logic --- */

.offline-message {
  display: flex;
  align-items: center; /* Vertically aligns the icon and text */
  justify-content: center;
  gap: 1.5rem; /* Space between icon and text */
  padding: 4rem 2rem;
  text-align: left; /* Aligns text to the left within its own block */
  aspect-ratio: 16 / 9;
}

.offline-icon {
  flex-shrink: 0; /* Prevents the icon from shrinking */
  width: 50px;
  height: 50px;
  color: hsl(var(--secondary));
}

.offline-icon svg {
  width: 100%;
  height: 100%;
}

.offline-text h3 {
  margin-bottom: 0.5rem;
}

.offline-message a {
    font-weight: 600;
}


.live-monitor.is-live .video-container { display: block; }
.live-monitor.is-live .live-indicator-wrapper { display: flex; }
.live-monitor.is-live .offline-message { display: none; }


/* --- Chat Container Styles --- */
.chat-container {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;  
  flex-direction: column;
}
.chat-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}
.chat-header svg {
  width: 20px;
  height: 20px;
  color: hsl(var(--secondary));
}
.chat-header h3 {
  color: hsl(var(--foreground));
  margin: 0;
  font-size: 1.1rem;
  white-space: nowrap;
}
.chat-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 600px; /* Extended height for chat display */
}
.chat-messages {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: scroll;
  min-height: 400px;
  max-height: 500px;
}

/* --- NEW Chat Message Styles --- */
.chat-message {
  margin-bottom: 0.75rem;
  font-size: 0.9rem; /* Smaller, more readable font */
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-message strong {
  color: hsl(var(--primary));
  font-family: 'Orbitron', monospace;
  margin-right: 0.5rem;
}

/* --- Chat Form Styles --- */
.chat-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

@media (max-width: 600px) {
  .chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    padding: 1rem;
  }
  #chat-username {
    width: 100%;
    background-color: hsl(var(--input));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 2.2em;
    max-height: 2.2em;
    line-height: 1.2;
    resize: none;
    overflow-y: hidden;
  }
  #chat-message-input {
    width: 100%;
    background-color: hsl(var(--input));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 3.6em;
    max-height: 4.5em;
    line-height: 1.2;
    resize: none;
    overflow-y: auto;
  }
  .chat-send-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
    align-self: flex-end;
    font-size: 1em;
    padding: 0.6rem;
    border-radius: var(--radius);
    background: hsl(var(--primary));
    color: #fff;
    transition: background 0.2s;
    display: block;
  }
  .chat-send-btn svg {
    color: #fff;
  }
  .chat-send-btn:active {
    background: hsl(var(--secondary));
  }
  #chat-username:disabled {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    opacity: 1;
    border: 1px solid hsl(var(--border));
    cursor: not-allowed;
  }
}

#chat-username {
  flex: 1 1 120px; 
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  padding: 0.5rem;
}
#chat-message-input {
  flex: 2 1 180px; 
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  padding: 0.5rem;
}
.chat-send-btn {
  background: none;
  border: none;
  color: hsl(var(--primary));
  padding: 0.5rem;
  margin-left: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s;
}
.chat-send-btn:hover {
  transform: scale(1.1);
}

/* =================================================== */
/* DIRECT CONTACT LIST STYLES                         */
/*                                                    */
/* =================================================== */

.direct-contact-list {
  list-style: none;
  padding: 0;
  margin-top: 3rem; /* Space above the list */
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden; /* Clips the border radius correctly */
}

.direct-contact-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: hsl(var(--card) / 0.3);
  font-family: 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
}

/* Adds a separator line between items */
.direct-contact-list li + li {
  border-top: 1px solid hsl(var(--border));
}

.direct-contact-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: hsl(var(--secondary));
}

.direct-contact-list strong {
  color: hsl(var(--foreground));
  margin-right: 0.5rem;
}

/* =================================================== */
/* NEWSLETTER MESSAGE STYLES                          */
/* =================================================== */

.newsletter-message {
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    height: 1.2rem; /* Reserve space to prevent layout shift */
}

.newsletter-message.success {
    color: hsl(var(--secondary)); /* Purple for success */
}

.newsletter-message.error {
    color: hsl(var(--destructive)); /* Red for error */
}

/* =================================================== */
/* MOBILE RESPONSIVE FIXES                            */
/*                                                    */
/* =================================================== */

@media (max-width: 768px) {

  /* --- 1. Fix for WhatsApp Button --- */
  .whatsapp-sticky-button span {
    display: none; /* Hide the text */
  }
  .whatsapp-sticky-button {
    width: 50px;
    height: 50px;
    justify-content: center;
    border-radius: 50%; /* Make it a circle */
  }

  /* --- 2. Fix for Mobile Menu Display --- */
  #mobile-nav {
    /* Ensures it's correctly positioned and hidden */
    position: absolute;
    top: 100%; /* Sits right below the nav bar */
    left: 0;
    right: 0;
    background-color: hsl(var(--background) / 0.95);
    backdrop-filter: blur(10px);
  }

 

  /* --- 4. Fix for "Book Now" Button in Nav --- */
  #main-nav .button.variant-purple,
  #main-nav .button.variant-neon {
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap; /* Prevent text from wrapping */
  }
  
}


/* =================================================== */
/* NEW MOBILE-FIRST NAV & HERO STYLES                 */
/* (Replace old nav and hero CSS with this)           */
/* =================================================== */

/* --- Base Navigation Styles (Mobile First) --- */#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101; /* Ensure it's on top */
  transition: background-color 0.3s ease-in-out;
}
#main-nav.scrolled {
  background-color: hsl(var(--background) / 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.nav-container {
  display: flex;
  justify-content: space-between; /* logo left, menu right */
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  overflow: hidden; /* stop scroll-x issue */
}
.menu-toggle {
  display: block;
  cursor: pointer;
  font-size: 1.8rem;
  color: white;
}


.nav-logo {
  height: 60px; /* adjust as needed */
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.8)) 
          drop-shadow(0 0 12px rgba(247, 246, 245, 0.6))
          drop-shadow(0 0 20px rgba(255, 165, 0, 0.4));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.nav-logo:hover {
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1))
          drop-shadow(0 0 20px rgba(255, 165, 0, 0.8))
          drop-shadow(0 0 35px rgba(255, 140, 0, 0.6));
}

@keyframes shine {
  0% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,215,0,1)) drop-shadow(0 0 24px rgba(255,165,0,0.8)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
}

 


.desktop-links {
  display: none; /* Desktop links are HIDDEN on mobile */
}
.mobile-menu-button {
  display: block; /* Hamburger button is VISIBLE on mobile */
  background: none;
  border: none;
  color: hsl(var(--foreground));
  z-index: 102;
  padding: 0.5rem;
  cursor: pointer;
}
.mobile-menu-button .icon-close { display: none; }
.mobile-menu-button.open .icon-menu { display: none; }
.mobile-menu-button.open .icon-close { display: block; }

 

/* --- Tablet & Desktop Styles (Screens 768px and wider) --- */
@media (min-width: 768px) {
  .desktop-links {
    display: flex; /* Desktop links become VISIBLE */
    align-items: center;
    gap: 2rem;
  }
  .desktop-links .nav-link {
    position: relative;
    padding-bottom: 0.5rem;
  }
  .desktop-links .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: hsl(var(--primary));
    box-shadow: var(--neon-glow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
  }
  .desktop-links .nav-link:hover::after {
    transform: scaleX(1);
  }
  .mobile-menu-button {
    display: none; /* Hamburger button is HIDDEN on desktop */
  }
}

/* --- Base Hero Section Styles (Mobile First) --- */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;   /* full height hero */
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* acts like background-size: cover */
  object-position: center;
  display: block;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* covers container like background-image */
  object-position: center;
  display: block;
}
.hero-content {
  width: 100%;
  max-width: 500px;
  text-align: center;
}

/* Gradient overlay */
.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  z-index: 1;
}

.hero-overlay {
  position: relative;
  z-index: 2; /* on top of gradient */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* push content lower */
  height: 100%;
  text-align: center;
  padding: 2rem 1rem;
  color: white;
}


.hero-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.hero-text-pane {
  background-color: hsl(var(--card) / 0.5);
  backdrop-filter: blur(8px);
  padding: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / 0.5);
  margin-bottom: 1rem;
 text-align: center;
}


.hero-text-pane .dj-title {
  font-size: 1.875rem; /* 30px */
}
.hero-text-pane .futuristic-text {
  font-size: 1rem;
}
.hero-buttons {
  display: flex;
  flex-direction: column; /* Stacked on mobile */
  gap: 1rem;
}
.hero-buttons .button {
  width: 100%; /* Full width on mobile */
}


.fancyfont
{
   
           
            background: linear-gradient(90deg, #971b66ff 0%, #a685ff 50%, #4fd1ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
              text-transform: uppercase;
            background-clip: text;
            color: transparent;
      
 
}
/* =================================================== */
/* RESPONSIVE ABOUT SECTION STYLES                    */
/* =================================================== */
.about-section img {
  max-width: 100%;
  height: auto;
  border-radius: 12px; /* optional for polish */
}

 .about-photo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 300px;
}

.about-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;  /* optional glam */
  display: block;
   object-fit: cover;   /* crop sides if needed */
}




/* --- Main Content Grid (Image & Text) --- */
.about-section { padding: 3rem 1rem; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: stacked */
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.1fr 1fr; } /* image | text */
}

.about-card {
  background: rgba(24, 6, 35, 0.55);
  border: 1px solid rgba(168, 85, 247, .25);
  border-radius: 16px;
  padding: 1.5rem;
}


.about-image-content {
  position: relative;
  order: 1;
}
.about-text-content {
  order: 2;
   
}

/* --- Desktop Layout --- */
@media (min-width: 1024px) {
  .about-grid {
    flex-direction: row; /* Side-by-side on desktop */
    align-items: center;
    gap: 4rem;
  }
  .about-image-content {
    order: 2;
    flex-basis: 50%;
  }
  .about-text-content {
    order: 1;
    flex-basis: 50%;
  
  }
}



/* --- The new Stats Grid --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.stat-item {
  background-color: hsl(var(--card) / 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  margin-top: 0.5rem;
}


/* =================================================== */
/* GLIGHTBOX CUSTOMIZATION STYLES                     */
/* (Add this to the end of your CSS file)             */
/* =================================================== */
       #lightbox {
            transition: opacity 0.3s ease-in-out;
        }
        #lightbox img {
            max-width: 70vw;
            max-height: 70vh;
            transition: transform 0.3s ease-in-out;
        }
        
/* --- 1. Fix for the Missing Close Button --- */
.gclose {
  position: fixed; /* Ensures it's always in the viewport */
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  color: hsl(var(--primary)); /* Uses your neon pink theme color */
  z-index: 99999; /* Ensures it's on top of everything */
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.gclose:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* --- 2. Style for the White "Photo" Border --- */
.gslide-image img {
  background-color: white !important;
  border: 8px solid white !important;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery_img-border
{
  background-color: white !important;
  border: 6px solid white !important;
 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery_img-border:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--purple-neon-glow);
  border-color: hsl(var(--secondary));
}

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-move 8s ease infinite;
}


@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(236, 72, 153, 0.8),   /* fuchsia */
      0 0 10px rgba(168, 85, 247, 0.7),  /* purple */
      0 0 20px rgba(99, 102, 241, 0.6);  /* indigo */
  }
  50% {
    text-shadow: 
      0 0 10px rgba(236, 72, 153, 1),    /* brighter fuchsia */
      0 0 20px rgba(168, 85, 247, 0.9),  /* brighter purple */
      0 0 30px rgba(99, 102, 241, 0.8);  /* brighter indigo */
  }
}

 .navbar {
  background: linear-gradient(
    to right,
    rgba(24, 0, 36, 0.85), 
    rgba(91, 33, 182, 0.75), 
    rgba(236, 72, 153, 0.65)
  ); /* always visible gradient glass */
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  transition: all 0.4s ease;
}

.nav-link {
  color: #fff; /* or a light lavender to fit your purple theme */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 
    0 0 4px rgba(0,0,0,0.9), /* black halo */
    0 0 8px rgba(0,0,0,0.7); 
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #e879f9; /* neon pink on hover */
  text-shadow: 
    0 0 6px #e879f9,
    0 0 12px #c084fc,
    0 0 20px #818cf8,
    0 0 4px rgba(0,0,0,0.9);
  transform: scale(1.05);
}

/* ===============================
   NAVBAR
   =============================== */
.navbar {
  background: linear-gradient(to right, rgba(24,0,36,0.85), rgba(91,33,182,0.75), rgba(236,72,153,0.65));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  overflow: hidden;
}
.nav-logo {
  height: 60px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}

/* ===============================
   STICKY WHATSAPP + MEDIA PLAYER
   =============================== */
.whatsapp-sticky-button {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 1000;
}
.whatsapp-sticky-button img {
  width: 100%;
  height: auto;
}
.sticky-media-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(24,0,36,0.95);
  z-index: 999;
  padding: 10px;
}

/* ===============================
   FOOTER
   =============================== */
.site-footer {
  width: 100%;
  overflow-x: hidden;
  text-align: center;
  padding: 1.5rem 1rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===============================
   ABOUT PHOTO
   =============================== */
.about-photo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 300px;
}
@media (max-width: 768px) {
  .about-photo {
    min-height: 200px;
  }
}

/* ===============================
   MOBILE NAV MENU
   =============================== */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #fff;
  z-index: 101;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    right: -100%;
    top: 0;
    height: 100%;
    width: 70%;
    max-width: 300px;
    background: linear-gradient(to bottom, #1a0025, #2d004d, #4b006e);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: right 0.4s ease;
    z-index: 100;
  }
  .nav-links.active {
    right: 0;
  }
  .menu-toggle {
    display: block;
  }
}
/* === FOOTER STYLING === */
footer, .site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: hidden;
}

.site-footer {
  background-color: hsl(var(--background));
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-top: 2px solid hsl(var(--primary));
  box-shadow: var(--neon-glow);
}

/* Mobile-first footer grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 3rem;
  margin-bottom: 3rem;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
}

.footer-logo {
  height: 50px;
  width: auto;
  margin: 0 auto 1rem auto;
}

.footer-about p {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.footer-title {
  color: hsl(var(--secondary));
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-family: 'Orbitron', monospace;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.footer-links a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
  color: hsl(var(--primary));
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .footer-links ul {
    flex-direction: column;  
    gap: 0.75rem;
    align-items: center;
  }

  .footer-links a {
    font-size: 1rem;
    color: #fff;
  }

  .footer-title {
    text-align: center;
  }

  footer .footer-container {
    gap: 2rem;
  }
}

/* === STICKY AUDIO PLAYER === */
.sticky-media-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1a001f; /* dark neon background */
  color: #fff;
  z-index: 9999;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.6);
}

.sticky-media-player .track-info {
  flex: 1;
  margin-left: 1rem;
}

.sticky-media-player .progress-bar {
  flex: 1;
  margin: 0 1rem;
}

/* === WHATSAPP BUTTON DOCKED ABOVE PLAYER === */
.whatsapp-sticky-button {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;   /* sits above sticky player */
  z-index: 10001;
}

.whatsapp-sticky-button img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

@media (max-width: 767px) {
  .whatsapp-sticky-button {
    bottom: 5.5rem; /* a little higher on mobile */
  }
}


/* === Mobile Menu Overlay Fix with Animation === */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 0, 20, 0.95); /* dark backdrop */
  backdrop-filter: blur(8px);
 display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 8rem 2rem 2rem 2rem;
  overflow-y: auto;
  position: relative;

  /* animation setup */
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-nav-overlay.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex;
    visibility: visible;
    z-index: 10000;
}

.mobile-nav-overlay .nav-link {
}
.mobile-nav-overlay .nav-link:first-child {
  margin-top: 2rem;
  color: #fff !important;
  font-size: 1.5rem;
  margin: 1rem 0;
  text-decoration: none;
  transition: color 0.3s ease;
  z-index: 10001;
  display: block;
  opacity: 1;
}

.mobile-nav-overlay .nav-link:hover {
  color: #f0aaff; /* accent color on hover */
}

.mobile-menu-button .icon-close {
  display: none;
}
.mobile-menu-button.is-open .icon-menu {
  display: none;
}
.mobile-menu-button.is-open .icon-close {
  display: block;
}

.close-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 10002;
}

.close-menu:hover {
  color: hsl(var(--primary));
}

/* === Mobile Menu Overlay Fix === */

/* === Mobile Menu Overlay === */

/* Hidden by default */
#mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(10px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  z-index: 9999;
  padding: 2rem;
}

/* Shown when .open is toggled */
#mobile-menu-overlay.open {
  display: flex !important;
}

/* Button icon toggle */
#mobile-menu-btn .icon-close {
  display: none;
}
#mobile-menu-btn.open .icon-menu {
  display: none;
}
#mobile-menu-btn.open .icon-close {
  display: inline;
}

/* Links inside overlay */
#mobile-menu-overlay .nav-link {
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
#mobile-menu-overlay .nav-link:hover {
  color: hsl(var(--primary));
}