/* Fonts */
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/Orbitron-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ShareTechMono';
  src: url('../fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

h1, h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; 
}

p {
  font-family: 'ShareTechMono', monospace;
}

body {
  margin:0;
  background:#000;
  color:#fff;
  font-family:'Orbitron', sans-serif;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

/* Pulse Animation */
@keyframes pulseButton {
  0% { transform: scale(1); box-shadow: 0 0 15px #39ff14; }
  50% { transform: scale(1.15); box-shadow: 0 0 30px #39ff14, 0 0 60px #39ff14; }
  100% { transform: scale(1); box-shadow: 0 0 15px #39ff14; }
}

/* Button Style */
.pulse-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;

  width: 60px;      
  height: 60px;     

  display: flex;     
  align-items: center;
  justify-content: center;

  font-size: 24px;   

  color: #000;
  background-color: #39ff14;
  border: none;
  border-radius: 50%;  
  cursor: pointer;

  animation: pulseButton 1.5s infinite ease-in-out;
  box-shadow: 0 0 30px #39ff14, 0 0 60px #39ff14;
  transition: background-color 0.2s, color 0.2s;
  z-index: 100000;
}

.pulse-btn.muted {
  background-color: #ff6a00;
  box-shadow: 0 0 20px #ff6a00;
  animation: none;
} 

/* Scroll Progress Bar */
#progressBar {
  height: 4px;
  background: linear-gradient(90deg, #39ff14, #ff6a00);
  width: 0%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* Neon Cursor */
#cursorGlow {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  background: #39ff14;
  box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 1;
}

body:active #cursorGlow {
  width: 25px;
  height: 25px;
  box-shadow: 0 0 30px #39ff14, 0 0 60px #ff6a00;
}

/* Enlarge button on click */
body:active .cursor-glow {
  width: 25px;
  height: 25px;
  box-shadow: 0 0 30px #39ff14, 0 0 60px #ff6a00;
}

/* Scroll Animation */
.reveal {
  opacity:0;
  transform:translateY(40px);
  transition:all 1s ease;
}
.reveal.active {
  opacity:1;
  transform:translateY(0);
}

/* Side Tab Trigger */
  #sideTabTrigger {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #sideTabArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 80px;
    background: linear-gradient(180deg, #39ff14, #ff6a00);
    color: #000;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 0 20px rgba(57,255,20,0.5);
    transition: all 0.3s ease;
    font-family: 'Orbitron', sans-serif;
  }

  #sideTabLabel {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: rgba(0,0,0,0.85);
    color: #39ff14;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 12px 6px;
    border-left: 2px solid #39ff14;
    border-radius: 0 0 0 0;
    box-shadow: -2px 0 10px rgba(57,255,20,0.2);
    transition: all 0.3s ease;
  }

  #sideTabTrigger:hover #sideTabArrow {
    width: 34px;
    box-shadow: -6px 0 30px rgba(57,255,20,0.8);
  }

  #sideTabTrigger:hover #sideTabLabel {
    color: #ff6a00;
    border-color: #ff6a00;
  }

  /* Rotates arrow when panel is open */
  #sideTabTrigger.open #sideTabArrow {
    content: '◄';
  }

  /* Side Panel */
  #sidePanel {
    position: fixed;
    right: -320px;
    top: 0;
    width: 300px;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(16px);
    border-left: 2px solid #39ff14;
    box-shadow: -10px 0 40px rgba(57,255,20,0.2);
    z-index: 8999;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sidePanel.open {
    right: 0;
  }

  .side-panel-inner {
    padding: 40px 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .side-panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #39ff14;
    letter-spacing: 4px;
    text-align: center;
    text-shadow: 0 0 15px #39ff14;
    text-transform: uppercase;
  }

  .side-panel-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #39ff14, #ff6a00, transparent);
    box-shadow: 0 0 8px #39ff14;
    margin: 0 10px;
  }

  /* Panel Buttons */
  .side-panel-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .btn-cert {
    background: rgba(57,255,20,0.08);
    border-color: rgba(57,255,20,0.3);
  }

  .btn-cert:hover {
    background: rgba(57,255,20,0.15);
    border-color: #39ff14;
    box-shadow: 0 0 20px rgba(57,255,20,0.3);
    transform: translateX(-4px);
  }

  .btn-portfolio {
    background: rgba(191,95,255,0.08);
    border-color: rgba(191,95,255,0.3);
  }

  .btn-portfolio:hover {
    background: rgba(191,95,255,0.15);
    border-color: #bf5fff;
    box-shadow: 0 0 20px rgba(191,95,255,0.3);
    transform: translateX(-4px);
  }

  .side-btn-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
  }

  .side-btn-text {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .side-btn-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
  }

  .btn-cert .side-btn-label { color: #39ff14; }
  .btn-portfolio .side-btn-label { color: #bf5fff; }

  .side-btn-sub {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    color: #888;
    margin-top: 3px;
    letter-spacing: 1px;
  }

  .side-btn-arrow {
    font-size: 1.2rem;
    color: #555;
    transition: color 0.2s, transform 0.2s;
  }

  .side-panel-btn:hover .side-btn-arrow {
    transform: translateX(4px);
  }

  .btn-cert:hover .side-btn-arrow { color: #39ff14; }
  .btn-portfolio:hover .side-btn-arrow { color: #bf5fff; }

  .side-panel-tagline {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: #ff6a00;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #ff6a00;
    margin-top: 10px;
  }

  /* Overlay */
  #sidePanelOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 8998;
    backdrop-filter: blur(2px);
  }

  #sidePanelOverlay.active {
    display: block;
  }

/* Navbar Shrink & Styling */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 50;
  background-color: rgba(0,0,0,0.7);
  backdrop-blur: 8px;
  padding: 24px 60px 24px 40px; /* bigger initial padding for more shrink effect */
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 
    padding 0.3s ease,       /* shrink effect */
    background-color 0.3s ease, 
    box-shadow 0.3s ease;
}

/* Logo & links base size */
.navbar-brand {
  color: #39ff14;
  font-size: 72px;
  font-weight: bold;
  transition: font-size 0.3s ease, transform 0.3s ease;
}

#nav-links li a {
  font-size: 20px;
  transition: font-size 0.3s ease, padding 0.3s ease;
}

/* Shrink everything when scrolling */
.navbar.shrink {
  padding: 4px 60px 4px 40px;   /* top/bottom padding smaller */
  background-color: rgba(0,0,0,1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.navbar.shrink .navbar-brand {
  font-size: 40px;               /* smaller logo */
  transform: scale(0.75);        /* optional subtle shrink */
}

.navbar.shrink #nav-links li a {
  font-size: 14px;               /* shrink link text */
}

/* Neon Logo with Pulse */
.navbar-brand {
  color: #39ff14;
  font-weight: bold;
  font-size: 50px;
  margin-left: 20px;
  text-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 30px #39ff14, 0 0 50px #00ff99;
  animation: pulseLogo 2s infinite alternate;
}

@keyframes pulseLogo {
  0% {
    text-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 30px #39ff14, 0 0 50px #00ff99;
  }
  50% {
    text-shadow: 0 0 10px #39ff14, 0 0 25px #39ff14, 0 0 40px #39ff14, 0 0 70px #00ff99;
  }
  100% {
    text-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 30px #39ff14, 0 0 50px #00ff99;
  }
}

/* Menu Links */
.nav-link {
  color: #39ff14;
  transition: color 0.2s ease;
  font-size: 18px;
}
.nav-link:hover,
.nav-link.active {
  color: #ff6a00;
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: rgba(0,0,0,0.9);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 999;
}

.group:hover > .dropdown-menu {
  display: block; 
}

.dropdown-link {
  display: block;
  color: #39ff14;
  padding: 6px 16px;
  transition: color 0.2s;
}

.dropdown-link:hover,
.dropdown-link.active {
  color: #ff6a00;
}

/* Toggle Icon - Always Top Right */
#nav-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #39ff14;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2000;
  transition: transform 0.2s ease;
}

#nav-toggle:hover {
  transform: scale(1.1);
}

/* Floating Mobile Menu */
#mobile-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  visibility: hidden;

  width: 260px;
  padding: 24px 20px;
  
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  
  border-radius: 18px;
  box-shadow: 0 0 30px rgba(0, 255, 100, 0.2);
  
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  z-index: 1500;
  
  transition: all 0.3s ease;
}

/* Active State (Pop In) */
#mobile-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;   /* MASTER spacing control */
}

/* Center all links & buttons */
#mobile-menu a,
#mobile-menu button {
  font-weight: 500;
  letter-spacing: 0.5px;
}

#mobile-menu a:hover,
#mobile-menu button:hover {
  color: #ff6a00;
}

/* Dropdown inside mobile */
#mobile-menu .dropdown-menu {
  display: none;
  position: static; 
  background: rgba(255,255,255,0.08); 
  min-width: unset; 
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  margin-top: 10px;
  border-radius: 12px;
}

#mobile-menu .dropdown-menu.active {
  display: flex;
}

/* Section Title Banner */
.section-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Section Divider */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 40px auto;
  max-width: 800px;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39ff14, #ff6a00, transparent);
  box-shadow: 0 0 8px #39ff14;
}

.section-divider span {
  color: #ff6a00;
  font-size: 1.2rem;
  text-shadow: 0 0 10px #ff6a00;
  letter-spacing: 4px;
}

/* Section Spacer - Glowing Dots */
.section-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 0;
}

.section-spacer span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.section-spacer span:nth-child(1) { background: #39ff14; box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14; animation: dotPulse 1.5s infinite 0s; }
.section-spacer span:nth-child(2) { background: #ff6a00; box-shadow: 0 0 10px #ff6a00, 0 0 20px #ff6a00; animation: dotPulse 1.5s infinite 0.2s; }
.section-spacer span:nth-child(3) { background: #00cfff; box-shadow: 0 0 10px #00cfff, 0 0 20px #00cfff; animation: dotPulse 1.5s infinite 0.4s; }
.section-spacer span:nth-child(4) { background: #39ff14; box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14; animation: dotPulse 1.5s infinite 0.6s; }
.section-spacer span:nth-child(5) { background: #ff6a00; box-shadow: 0 0 10px #ff6a00, 0 0 20px #ff6a00; animation: dotPulse 1.5s infinite 0.8s; }
.section-spacer span:nth-child(6) { background: #00cfff; box-shadow: 0 0 10px #00cfff, 0 0 20px #00cfff; animation: dotPulse 1.5s infinite 1s; }
.section-spacer span:nth-child(7) { background: #39ff14; box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14; animation: dotPulse 1.5s infinite 1.2s; }

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.8); opacity: 1; }
}

/* ── Neon Sweep Divider ── */
.neon-sweep {
  position: relative;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.neon-sweep::before {
  content: '';
  position: absolute;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39ff14, #ff6a00, #bf5fff, transparent);
  box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00;
  animation: sweepLine 3s ease-in-out infinite;
}

@keyframes sweepLine {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* HERO */
.hero {
  padding-top: 120px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(-45deg,#000,#001f3f,#000,#002b36);
  background-size:400% 400%;
  animation: gradientMove 15s ease infinite;
}

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

.logo {
  font-size:4rem;
  color:#39ff14;
  text-shadow:0 0 15px #39ff14;
  animation: floatLogo 4s ease-in-out infinite;
}

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

.hero h3 {
  color:#ff6a00;
  text-shadow:0 0 20px #ff6a00;
  animation:pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
  from{ text-shadow:0 0 5px #ff6a00;}
  to{ text-shadow:0 0 25px #ff6a00;}
}

.tagline {
  color:#00cfff;
  margin-top:15px;
}

/* AboutMX */
#about {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.about-video {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
  z-index:-2;
}

.about-overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  top:0;
  left:0;
  z-index:-1;
}

.about-text {
  max-width:800px;
  line-height:1.8;
  color:#e6e6e6;
  text-shadow:0 0 6px rgba(0,255,120,0.2);
}

/* NewZ */
/* Card container */
.news-card {
  width: 300px;
  padding: 12px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  background: rgba(0,0,0,0.55);  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; 
}

/* Image size */
.news-card img {
  width: 100px;
  margin: auto;
  border-radius: 10px;
  transition: all 0.35s ease;
}

/* Lift effect */
.news-card:hover {
  transform: translateY(-8px) scale(1.05);
}

/* Circular Rotating Glow */
.news-card::before {
  content: "";
  position: absolute;
  inset: -6px;             
  border-radius: 50%;       
  background: conic-gradient(
    #39ff14,
    #ff6a00,
    #39ff14,
    #ff6a00,
    #39ff14
  );
  filter: blur(12px);       
  opacity: 0;
  z-index: -1;
  animation: rotateGlow 4s linear infinite;
  transition: opacity 0.3s ease;
}

/* Show glow on hover */
.news-card:hover::before {
  opacity: 1;
}

/* rotation animation */
@keyframes rotateGlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* UpdateZ */
#updates .social-card {
  display: block;
}

#updates .social-card img {
  width: 100%;
  height: auto;              /* ← was 120px, now auto */
  object-fit: contain;       /* ← was cover, now contain (no cropping) */
  object-position: center;
  border: 2px solid #39ff14;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

#updates .social-card img:hover {
  transform: scale(1.05);
  border-color: #ff6a00;
  box-shadow: 
    0 0 10px #39ff14,
    0 0 20px #ff6a00,
    0 0 30px #39ff14,
    0 0 40px #ff6a00;
  animation: pulseGlowThumb 1.5s infinite;
}

#updates .social-card p {
  color: #00cfff;
  font-weight: 500;
  margin-top: 5px;
}

/* UpdateZ Grid responsive */
#updates .social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  max-width: 1300px;   /* ← limits the grid width */
  margin: 0 auto;     /* ← keeps it centered */
}

@media (min-width: 768px) {
  #updates .social-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* CharacterZ */
#character .character-desc {
  text-align: justify !important;
  color: #2dba6e !important;
  text-shadow: 0 0 6px #1a8c50;
}

#character .carousel-neon {
  margin-top: 40px;   /* ← adds space above the carousel */
}

/* Carousel Neon Effect */
.carousel-neon {
  max-height: 700px;        
  width: auto;             /* scale naturally */
  object-fit: contain;     /* show full image, no cropping */
  border: 3px solid #39ff14;
  border-radius: 10px;
  box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00;
  transition: transform 1s ease, box-shadow 1s ease;
  animation: neonPulse 3s ease-in-out infinite alternate;
}

.carousel-neon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px #39ff14, 0 0 80px #ff6a00;
}

@keyframes neonPulse {
  0%   { transform: scale(1); box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00; }
  50%  { transform: scale(1.02); box-shadow: 0 0 35px #39ff14, 0 0 70px #ff6a00; }
  100% { transform: scale(1); box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00; }
}

/* Buttons Glow */
#prevSlide, #nextSlide {
  flex-shrink: 0;
  position: static !important;   /* 👈 this is the key — kills any inherited positioning */
  top: unset !important;
  transform: none !important;
  font-size: 2.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(0,0,0,0.8);
  color: #39ff14;
  border: 2px solid #39ff14;
  box-shadow: 0 0 15px #39ff14, 0 0 30px #ff6a00;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#prevSlide:hover, #nextSlide:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 30px #39ff14, 0 0 60px #ff6a00;
}

/* SerieZ Video Responsive */
#serieVideoContainer video {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  display: block;
  margin: 0 auto;
}

/* Anime Box Fixed Size */
.anime-box {
  width: 100%;
  height: 220px; /* fixed height for all boxes */
  overflow: hidden;
  border: 2px solid #39ff14;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}

/* GIF fills the box completely */
.anime-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Neon hover overlay */
.anime-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, #39ff14, #ff6a00, #39ff14, #ff6a00);
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  animation: neonMove 5s linear infinite;
  pointer-events: none;
  border-radius: 12px;
}

.anime-box:hover::before {
  opacity: 0.6;
}

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

@media (min-width: 768px) {
  #series .anime-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.anime-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  text-align: center !important;
  padding: 6px 4px;
  margin: 0;
  z-index: 3;
  word-break: break-word;    /* ← wraps long titles cleanly */
  line-height: 1.4;          /* ← better spacing between wrapped lines */
  letter-spacing: 0px;       /* ← removes letter spacing so it fits better */
}

/* Movies */
#onePieceRedVideo {
  
  width: 100%;
  object-fit: cover;
}

/* Optional: Netflix-style button (if needed for links) */
.btn-netflix {
  background: #e50914;
  color: #fff;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: 0.3s;
  box-shadow: 0 0 5px #e50914;
}

.btn-netflix:hover {
  box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00;
  color: #39ff14;
  transform: scale(1.05);
}

/*MusicZ */
#music .music-track-img {
  max-height: 150px;
  object-fit: cover;
}

/* Music Title Banner Slide */
.music-title {
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 207, 255, 0.6);
  position: relative;
}

/* Default state (NOT playing) */
.music-title span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 0;
  color: #00cfff;
  text-shadow: 0 0 5px #00cfff;
}

/* When playing */
.music-title.playing span {
  padding-left: 100%;
  animation: slideTitle 8s linear infinite;
  color: #39ff14;
  text-shadow: 0 0 8px #39ff14,
               0 0 20px #39ff14,
               0 0 40px #00ffcc;
}

/* Animation */
@keyframes slideTitle {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Quote Reveal */
.quote-box {
  background: rgba(17,17,17,0.7); 
  border: 1px solid #39ff14;
  padding: 20px 30px;
  cursor: pointer;
  transition: all 0.4s ease;
  color: #fff;
  text-shadow: 0 0 5px #000;
  backdrop-filter: blur(6px); 
}

.quote-box:hover {
  box-shadow: 0 0 20px #39ff14, 0 0 40px #ff6a00;
}

/* Hidden quote initially */
.hidden-quote {
  display: none;
  margin-top: 0;
  color: #ff6a00;
  font-size: 1.1rem;
  font-weight: 500;
}

/* When active (revealed) */
.quote-box.active .hidden-quote {
  display: block;
}

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

/* Feedback Section */
.feedback-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.feedback-box {
  flex: 1;
  min-width: 280px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #39ff14;
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(57,255,20,0.15);
}

/* Modal Pop In Animation */
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Social Login Buttons */
.social-login-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-login-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
}

.social-login-btn img {
  width: 24px;
  height: 24px;
}

.social-login-btn:hover {
  transform: scale(1.03);
}

.social-login-btn.google {
  background: #fff;
  color: #333;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.social-login-btn.facebook {
  background: #1877f2;
  color: #fff;
  box-shadow: 0 0 10px rgba(24,119,242,0.4);
}

.social-login-btn.linkedin {
  background: #0077b5;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,119,181,0.4);
}

.social-login-btn.yahoo {
  background: #6001d2;
  color: #fff;
  box-shadow: 0 0 10px rgba(96,1,210,0.4);
}

/* Form Fields */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid #39ff14;
  border-radius: 8px;
  color: #fff;
  font-family: 'ShareTechMono', monospace;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #ff6a00;
  box-shadow: 0 0 10px #ff6a00;
}

/* Star Rating */
.star-rating {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.star {
  font-size: 2rem;
  color: #444;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
}

.star.active,
.star:hover {
  color: #ff6a00;
  text-shadow: 0 0 10px #ff6a00;
}

/* Submit / Cancel Buttons */
.feedback-submit {
  background: #39ff14;
  color: #000;
  border: none;
  padding: 10px 28px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 15px #39ff14;
}

.feedback-submit:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px #39ff14;
}

.feedback-cancel {
  background: transparent;
  color: #ff6a00;
  border: 1px solid #ff6a00;
  padding: 10px 28px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feedback-cancel:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #ff6a00;
}

/* Comments Section */
.comments-section {
  flex: 1;
  min-width: 280px;
}

.comment-card {
  background: rgba(0,0,0,0.5);
  border: 1px solid #39ff14;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 0 10px rgba(57,255,20,0.1);
}

.comment-card .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-card .comment-name {
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

.comment-card .comment-platform {
  font-size: 0.75rem;
  color: #aaa;
}

.comment-card .comment-stars {
  color: #ff6a00;
  font-size: 1rem;
  margin-bottom: 6px;
}

.comment-card .comment-message {
  color: #e5e5e5;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Footer */
footer {
  padding:20px;
  text-align:center;
  border-top:1px solid #39ff14;
}
.footer-tag {
  color:#ff6a00;
  text-shadow:0 0 15px #ff6a00;
  font-family: 'Orbitron', sans-serif;   /* ← added */
  font-weight: 700;                       /* ← added */
  letter-spacing: 3px;   
}

#news img {
  border: 2px solid #39ff14;       
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  width: 100%;
  max-height: 550px;               
  object-fit: cover;
}