html {
  scroll-behavior: smooth;
}
body {
  font-family: "Poppins", sans-serif;
}
/* Animated background shapes */
.animated-shape {
  border-radius: 50%;
  opacity: 0.5;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Floating micro-blobs animation */
@keyframes floatA {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px) translateX(6px);
  }
}
@keyframes floatB {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px) translateX(-8px);
  }
}
@keyframes floatC {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px) translateX(10px);
  }
}
.fA {
  animation: floatA 7s ease-in-out infinite;
}
.fB {
  animation: floatB 9s ease-in-out infinite;
}
.fC {
  animation: floatC 5.5s ease-in-out infinite;
}

/* glass look used on some cards */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* small helper for clamping description */
.desc-clamp {
  max-height: 4.5rem;
  overflow: hidden;
}

/* modal transitions */
.modal-backdrop {
  transition: opacity 0.18s ease;
}

/* horizontal timeline */
.timeline {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.timeline::-webkit-scrollbar {
  display: none;
}
.nav-link {
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(to right, #6366f1, #a855f7);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Mobile animation */
#mobile-menu {
  animation: slideDown 0.4s ease forwards;
}
.inline-flex {
  transition: transform 0.3s ease-in-out;
}
.inline-flex:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, orange);
  box-shadow: 0 5px 11px rgba(128, 128, 128, 0.24);
}
.nav-link:hover {
  color: #111827;
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link.active {
  color: #111827;
  font-weight: 600;
}
.nav-link.active::after {
  width: 100%;
}
.rounded-3xl {
  transition: transform 0.3s ease-in-out;
}
.rounded-3xl:hover {
  transform: scale(1.02);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Custom animation speeds */
@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes bounce-fast {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-bounce-slow {
  animation: bounce-slow 6s ease-in-out infinite;
}
.animate-bounce-fast {
  animation: bounce-fast 3s ease-in-out infinite;
}
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}
.floating-shape {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: float 10s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-duration: 12s;
}
.floating-shape:nth-child(2) {
  top: 30%;
  left: 70%;
  animation-duration: 15s;
}
.floating-shape:nth-child(3) {
  top: 60%;
  left: 40%;
  animation-duration: 18s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(15px);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.animate-float {
  animation: float 10s ease-in-out infinite;
}
.animate-float-slow {
  animation: float 15s ease-in-out infinite;
}
.floating-shape {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: float 12s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
  top: 10%;
  left: 15%;
  animation-duration: 12s;
}
.floating-shape:nth-child(2) {
  top: 40%;
  left: 75%;
  animation-duration: 16s;
}
.floating-shape:nth-child(3) {
  top: 70%;
  left: 30%;
  animation-duration: 20s;
}
/* Smooth transitions */
body,
header,
#mobile-menu,
#loading-screen,
.nav-link,
.logout-btn {
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease;
}

/* Dark theme root */
body.dark-theme {
  /* comparable dark gradient */
  background: linear-gradient(
    90deg,
    #0b1020 0%,
    #111827 50%,
    #0b1220 100%
  ) !important;
  color: #e6eef8 !important;
}

/* Loading screen */
body.dark-theme #loading-screen {
  background: #071022;
  color: #e6eef8;
}

/* Navbar */
body.dark-theme header {
  background: rgba(15, 23, 42, 0.85); /* dark translucent */
  color: #e6eef8;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Logo text */
body.dark-theme a > span,
body.dark-theme .container a span {
  color: #e6eef8 !important;
}

/* Nav links */
body.dark-theme .nav-link {
  color: #cfe8ff !important;
}
body.dark-theme .nav-link:hover {
  color: #7dd3fc !important;
}

/* Theme toggle button hover */
body.dark-theme .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Logout button — make gradient more muted for dark */
body.dark-theme .logout-btn {
  background: linear-gradient(90deg, #374151 0%, #111827 100%) !important;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6);
}

/* Mobile menu */
body.dark-theme #mobile-menu {
  background: rgba(10, 16, 30, 0.95);
  color: #e6eef8;
  border-color: rgba(255, 255, 255, 0.04);
}

/* Border between mobile items */
body.dark-theme #mobile-menu .border-t {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Buttons, cards, other utilities (small helpers) */
body.dark-theme .card,
body.dark-theme .section {
  background: #0f1724;
  color: #e6eef8;
}

/* In case your logo is an SVG or image that needs brightness tweak */
body.dark-theme img[alt*="KALA"] {
  filter: brightness(0.95) contrast(0.95);
}
/* ============================
   Dark Mode for Toggle + Logout
   ============================ */

/* Theme toggle button in dark mode */
body.dark-theme .theme-toggle {
  color: #e6eef8; /* light icon color */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px; /* fully round */
  padding: 0.5rem;
  transition: all 0.3s ease;
}
body.dark-theme .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Logout button in dark mode */
body.dark-theme #logout-btn,
body.dark-theme #logout-btn-mobile {
  background: linear-gradient(
    90deg,
    #4e8aeb 0%,
    #044eeb 100%
  ) !important; /* muted dark gradient */
  color: #e6eef8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}
body.dark-theme #logout-btn:hover,
body.dark-theme #logout-btn-mobile:hover {
  background: linear-gradient(90deg, #3c7cd7 0%, #0069fb 100%) !important;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}
/* =====================
   HERO / Exhibitions Section - Dark Mode
   ===================== */

/* Section background */
body.dark-theme main section {
  background: #12121b; /* deep dark background */
}

/* Heading */
body.dark-theme main section h1 {
  color: #f9fafb; /* bright white */
}

/* Gradient text highlight stays vibrant */
body.dark-theme main section h1 span {
  background: linear-gradient(to right, #facc15, #f87171, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Paragraph text */
body.dark-theme main section p {
  color: #d1d5db; /* soft gray */
}

/* Book Tickets button */
body.dark-theme main section a.bg-gradient-to-r {
  color: #111827; /* dark text inside bright button */
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4);
}
body.dark-theme main section a.bg-gradient-to-r:hover {
  transform: scale(1.07);
}

/* Submit Event button */
body.dark-theme main section a.border {
  border-color: #374151; /* darker border */
  color: #e5e7eb; /* light text */
}
body.dark-theme main section a.border:hover {
  border-color: #6c63ff;
  color: #6c63ff;
}

body.dark-theme main section .glass h3 {
  color: #f5f5f5;
}
body.dark-theme main section .glass p {
  color: #9ca3af;
}

/* Featured card buttons */
body.dark-theme main section .glass button.view-feature {
  background: #6c63ff;
  color: #fff;
  box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
}
body.dark-theme main section .glass a.border {
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme main section .glass a.border:hover {
  border-color: #ff6bcb;
  color: #ff6bcb;
}

/* Floating blobs - clean version */
body.dark-theme main section div[class*="bg-"] {
  opacity: 0.2; /* softer */
  filter: brightness(1.1); /* removed blur */
  mix-blend-mode: normal; /* no glowing overlap */
}

/* Featured Card - solid version */
body.dark-theme main section .glass {
  background: #1e1e2e; /* solid dark instead of frosted glass */
  border: 1px solid #2d2d40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* =====================
   FILTER BAR - Dark Mode
   ===================== */

body.dark-theme #filters {
  background: #12121b; /* subtle dark background */
}

body.dark-theme #filters button.type-chip {
  background: #1e1e2e;
  color: #e5e7eb;
  border: 1px solid #2d2d40;
}

body.dark-theme #filters button.type-chip[data-type="all"] {
  background: #6c63ff;
  color: #fff;
}

body.dark-theme #filters button.type-chip:hover {
  background: #6c63ff;
  color: #fff;
  border-color: #6c63ff;
}

/* Selects & Input */
body.dark-theme #filters select,
body.dark-theme #filters input[type="search"] {
  background: #1e1e2e;
  border: 1px solid #2d2d40;
  color: #e5e7eb;
}

body.dark-theme #filters select:focus,
body.dark-theme #filters input[type="search"]:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.4);
  outline: none;
}

/* Placeholder */
body.dark-theme #filters input::placeholder {
  color: #9ca3af;
}

/* =====================
   TIMELINE - Dark Mode
   ===================== */

body.dark-theme .timeline {
  scrollbar-color: #6c63ff #1e1e2e; /* custom scrollbar */
}

body.dark-theme .timeline-item {
  background: #1e1e2e;
  color: #e5e7eb;
  border: 1px solid #2d2d40;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

body.dark-theme .timeline-item:hover {
  border-color: #6c63ff;
  box-shadow: 0 6px 18px rgba(108, 99, 255, 0.4);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Timeline Heading */
body.dark-theme section h4 {
  color: #f9fafb;
}

/* ==========================
   CARDS GRID - Dark Mode
   ========================== */

body.dark-theme .card {
  background: #1e1e2e;
  border: 1px solid #2d2d40;
  color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

body.dark-theme .card:hover {
  border-color: #6c63ff;
  box-shadow: 0 6px 18px rgba(108, 99, 255, 0.4);
  transform: translateY(4px);
}

body.dark-theme .card:hover h3,
body.dark-theme .card:hover p,
body.dark-theme .card:hover a,
body.dark-theme .card:hover span {
  color: #ffffff !important;
}

/* Headings & text */
body.dark-theme .card h3 {
  color: #f9fafb;
}
body.dark-theme .card p {
  color: #cbd5e1;
}

/* Badge chips (Past, Ongoing, Upcoming, Famous) */
body.dark-theme .card span {
  opacity: 0.95;
}

/* Organizer text */
body.dark-theme .card .text-gray-500 {
  color: #ffffff !important; /* A light gray for better contrast in dark mode */
}

/* Share Button */
body.dark-theme .card a {
     border-color: #2d2d40;
  color: #e5e7eb;
}

body.dark-theme .card a:hover {
  border-color: #6c63ff;
  color: #6c63ff;
}

/* View Button already has gradient - keep it */

/* ==========================
   LOAD MORE BUTTON - Dark Mode
   ========================== */

body.dark-theme #loadMore {
  background: linear-gradient(to right, #6c63ff, #ff6bcb);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.4);
}

/* ==========================
   NEWSLETTER CTA - Dark Mode
   ========================== */

body.dark-theme #newsletter {
  background: linear-gradient(to right, #1e1e2e, #12121b);
  color: #f9fafb;
}

body.dark-theme #newsletter p {
  color: #cbd5e1;
}

/* Input */
body.dark-theme #newsletter input {
  background: #1e1e2e;
  border: 1px solid #2d2d40;
  color: #e5e7eb;
}
body.dark-theme #newsletter input::placeholder {
  color: #9ca3af;
}
body.dark-theme #newsletter input:focus {
  border-color: #6c63ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.4);
}

/* Button */
body.dark-theme #newsletter button {
  background: linear-gradient(to right, #6c63ff, #ff6bcb);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.4);
}
/* ==========================
   DETAILS MODAL - Dark Mode
   ========================== */
body.dark-theme #modal .relative {
  background: #1f2937; /* Dark gray background */
  color: #f3f4f6; /* Light text */
  border: 1px solid #374151;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* Overlay */
body.dark-theme #modal .absolute {
  background: rgba(0, 0, 0, 0.75); /* darker overlay */
}

/* Header */
body.dark-theme #modal h3 {
  color: #f9fafb;
}
body.dark-theme #modal button#modalClose {
  color: #d1d5db;
}
body.dark-theme #modal button#modalClose:hover {
  color: #ffffff;
}

/* Image */
body.dark-theme #modal img {
  border: 2px solid #374151;
  border-radius: 0.5rem;
}

/* Badge */
body.dark-theme #modal #modalBadge {
  background: #374151;
  color: #f9fafb;
}

/* Date text */
body.dark-theme #modal #modalDate {
  color: #9ca3af;
}

/* Description */
body.dark-theme #modal #modalDesc {
  color: #e5e7eb;
}

/* Buttons */
body.dark-theme #modal #modalTicket {
  background: linear-gradient(to right, #6366f1, #ec4899);
  color: #fff;
}
body.dark-theme #modal #modalShare {
  border: 1px solid #374151;
  color: #f3f4f6;
}
body.dark-theme #modal #modalShare:hover {
  border-color: #6366f1;
  color: #6366f1;
}
/* ==========================
   FOOTER - Dark Mode
   ========================== */
body.dark-theme footer {
  background: linear-gradient(to top, #12121b, #1e1e2e, #1a1a28);
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

/* Floating shapes */
body.dark-theme footer .floating-shape {
  filter: brightness(1.2) blur(30px);
  opacity: 0.2;
  mix-blend-mode: screen;
}

/* Brand Section */
body.dark-theme footer h2 {
  color: #f9fafb;
}
body.dark-theme footer p {
  color: #cbd5e1;
}
body.dark-theme footer .flex a {
  background: #1e1e2e;
}
body.dark-theme footer .flex a i {
  color: #6c63ff;
}
body.dark-theme footer .flex a:hover {
  background: linear-gradient(to right, #6c63ff, #ff6bcb);
}
body.dark-theme footer .flex a:hover i {
  color: #fff;
}

/* Quick Links */
body.dark-theme footer ul li a {
  color: #e5e7eb;
}
body.dark-theme footer ul li:hover a {
  color: #6c63ff;
}

/* Contact Info */
body.dark-theme footer ul.text-gray-600 li {
  color: #cbd5e1;
}
body.dark-theme footer ul.text-gray-600 li i {
  color: #6c63ff;
}

/* Newsletter & Social Box */
body.dark-theme footer .group.bg-white {
  background: #1e1e2e;
  color: #f9fafb;
  border: 1px solid #2d2d40;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}
body.dark-theme footer .group.bg-white input {
  background: #12121b;
  border: 1px solid #2d2d40;
  color: #e5e7eb;
}
body.dark-theme footer .group.bg-white input::placeholder {
  color: #9ca3af;
}
body.dark-theme footer .group.bg-white input:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.4);
}
body.dark-theme footer .group.bg-white button {
  background: linear-gradient(to right, #6c63ff, #ff6bcb);
  color: #fff;
}
body.dark-theme footer .group.bg-white button:hover {
  background: linear-gradient(to right, #5750d3, #ff6bcb);
}

/* Newsletter Social Icons */
body.dark-theme footer .group a {
  color: #6c63ff;
}
body.dark-theme footer .group a:hover {
  color: #ff6bcb;
}

/* Footer Bottom Text */
body.dark-theme footer div.border-t {
  border-color: #374151;
  color: #9ca3af;
}

body.dark-theme footer h4 {
  color: #f9fafb; /* Bright white for headings */
  border-bottom: 1px solid #374151; /* Optional subtle underline */
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
  font-weight: 600; /* Ensures font remains semi-bold */
}

/* Logout Modal Base */
#logoutModal .modal-content {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 1rem !important;
  padding: 2rem !important;
  max-width: 22rem !important;
  width: 100% !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

/* Heading + text */
#logoutModal h2 {
  color: var(--primary-text);
}
#logoutModal p {
  color: var(--secondary-text);
}

/* Buttons */
#confirmLogout {
  background: linear-gradient(to right, #ef4444, #ec4899); /* red → pink */
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease;
}
#confirmLogout:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

#cancelLogout {
  background-color: var(--secondary-bg);
  color: var(--primary-text);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease;
}
#cancelLogout:hover {
  background-color: var(--border-color);
}