:root {
  --bg: #0f1220;
  --surface: #171a2b;
  --card: #1e2338;
  --text: #e9ecf8;
  --muted: #a9b0d2;
  --accent: #ff9800;   /* Orange */
  --accent-2: #2196f3; /* Blue */
  --glow: 0 10px 30px rgba(255, 152, 0, .35), 0 0 0 1px rgba(255,152,0,.12);
}

* { box-sizing:border-box; }

body {
  margin: 0;
  font-family: Poppins, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Header with less transparent black */
.header-overlay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 48px;
  background: rgba(0,0,0,0.85); /* more opaque */
  position: relative;
  z-index: 10;
}

/* Logo */
.logo { display:flex; align-items:center; }
.logo img { height: 50px; }

/* NAV */
nav {
  display:flex;
  gap: 18px;
  align-items:center;
}

/* Apply same hover to all header buttons (links & dropdown triggers) */
nav a,
nav a:visited,
nav a:focus,
nav a:active,
nav .dropdown > a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 180ms ease, transform 180ms ease, background 180ms ease;
  display: inline-block;
}

/* Unified hover/active effect for all header items */
nav a:hover,
nav .dropdown > a:hover,
nav a:focus,
nav .dropdown > a:focus {
  color: var(--accent);            /* orange color on hover */
  transform: translateY(-2px);     /* subtle lift */
  background: rgba(255,102,0,0.06);/* subtle background */
}

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  background: var(--card);
  border-radius: 8px;
  display: none;
  flex-direction: column;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu a { padding: 10px 14px; color: var(--text); }
.dropdown-menu a:hover { background: var(--accent); color: #fff; }

/* Hero Section */
header.hero {
  text-align: center;
  padding: 70px 20px 40px;
  position: relative;
  overflow: hidden;
}
header.hero::before {
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, var(--accent-2) 10%, transparent 70%);
  animation:spin 15s linear infinite;
  opacity:0.1;
}
@keyframes spin { 100% {transform:rotate(360deg);} }

.title {
  font-size: 50px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  color: transparent;
  animation: fadeIn 1.2s ease forwards;
}
.subtitle {
  color: var(--muted);
  margin-top: 10px;
  animation: fadeIn 1.8s ease forwards;
}
@keyframes fadeIn {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

/* Filter Chips */
.controls {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin: 20px;
}
.chip {
  padding:10px 16px;
  border-radius:999px;
  background: var(--accent);
  color:#fff;
  border:none;
  font-weight:bold;
  cursor:pointer;
  transition:background .3s, transform .3s;
}
.chip:hover {
  background: var(--accent-2);
  transform:scale(1.1);
}
.chip.active {
  background: var(--accent-2);
}

/* Grid */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:15px;
  padding:20px;
}
.card {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transform:translateY(30px);
  opacity:0;
  animation: slideUp 0.8s forwards;
}
.card:nth-child(1){ animation-delay:0.3s; }
.card:nth-child(2){ animation-delay:0.5s; }
.card:nth-child(3){ animation-delay:0.7s; }
.card:nth-child(4){ animation-delay:0.9s; }
@keyframes slideUp { to { opacity:1; transform:translateY(0);} }

/* ✅ FIXED IMAGE DISPLAY */
.card img {
  width: 100%;
  height: auto;             /* keep aspect ratio */
  object-fit: contain;      /* show full image */
  background: #000;         /* black background behind */
  transition: transform 0.5s;
}
.card:hover img { transform:scale(1.05); }

.label {
  position:absolute;
  bottom:10px;
  left:10px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
}

/* Video strip */
.video-strip {
  width:100%;
  margin-top:40px;
  position:relative;
  overflow:hidden;
}
.video-strip video {
  width:100%;
  filter:brightness(0.6);
}
.running-text {
  position:absolute;
  top:20px;
  left:0;
  width:100%;
  text-align:center;
  font-size:32px;
  font-weight:800;
  color:#fff;
  animation: bounce 2s infinite;
}

/* Popup Overlay */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup Box */
.popup-content {
  background: #fff;
  color: #111;
  padding: 25px 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  animation: scaleUp 0.3s ease;
   position: relative; /* ✅ Needed for close button */
}

.popup-content h2 {
  margin-bottom: 15px;
  color: #ff6600;
  text-align: center;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 20px; right: 25px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
}
.close-btn:hover { color: #ff6600; }
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}

footer {
  text-align:center;
  color:var(--muted);
  padding:20px;
}
/* 🔹 Hamburger icon (hidden by default) */
.hamburger {
  display: none;
  font-size: 28px;
  color: var(--text);
  cursor: pointer;
}

/* 🔹 Responsive Header */
@media (max-width: 768px) {
  .header-overlay {
    flex-wrap: wrap;
    padding: 12px 20px;
  }

  nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 10px 0;
    border-radius: 8px;
  }

  nav.active {
    display: flex;
  }

  nav a,
  nav .dropdown > a {
    padding: 10px;
    text-align: center;
    width: 100%;
  }

  .hamburger {
    display: block;
    margin-left: auto;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: rgba(0,0,0,0.7);
  }
  .dropdown.open .dropdown-menu {
    display: flex;
  }
}

/* 🔹 Responsive Grid */
@media (max-width: 600px) {
  .title { font-size: 32px; }
  .subtitle { font-size: 16px; }

  .grid {
    grid-template-columns: 1fr;
  }

  .controls {
    flex-direction: column;
    gap: 8px;
  }

  .video-strip .running-text {
    font-size: 20px;
  }
}