@import url("https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700;800;900&display=swap");
/* ⚡ Killer Dark Theme */
:root {
  /* 🌑 Core Backgrounds */
  --black-void: #0b0b0d;
  --graphite: #151515;
  --charcoal: #1f1f21;

  /* ⚔️ Primary Accents */
  --molten-orange: #ff6a00; /* Fiery orange accent */
  --blood-red: #c70039; /* Aggressive energy */
  --electric-blue: #00bfff; /* Futuristic highlight */
  --liquid-gold: #ffcc00; /* Luxe glow */

  /* 💀 Secondary Accents */
  --steel-gray: #808080;
  --soft-white: #f4f4f4;
  --ashen-silver: #b0b0b0;
  --deep-purple: #5e17eb; /* Adds sinister depth */

  /* 🧬 Gradients & FX */
  --main-gradient: linear-gradient(135deg, var(--molten-orange) 0%, var(--deep-purple) 100%);
  --accent-gradient: linear-gradient(135deg, var(--liquid-gold), var(--electric-blue));
  --overlay-gradient: rgba(255, 106, 0, 0.4);
  --accent-shadow: 0 0 25px rgba(255, 106, 0, 0.3);
  --neon-glow: 0 0 15px rgba(0, 191, 255, 0.6), 0 0 25px rgba(255, 106, 0, 0.4);

  /* ✍️ Typography */
  --heading-font: "Syne", sans-serif;
  --body-font: "Syne", sans-serif;


  /* 🌈 Text Colors */
  --text-primary: var(--soft-white);
  --text-secondary: var(--ashen-silver);
  --text-accent: var(--molten-orange);

  /* 🪩 Borders & UI */
  --border-color: var(--accent-gradient);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 106, 0, 0.6);

  /* 🌌 Base Button Colors */
  --btn-bg: var(--graphite);
  --btn-text: var(--liquid-gold);
  --btn-hover-text: var(--soft-white);
}


/* Base Reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  caret-color: transparent;
  scroll-behavior: smooth;
}
.hindi-text {
   font-family: 'Arya', serif !important;
}

/* ✨ Killer Dark Button */
.btn {
  --border-color: var(--main-gradient);
  --border-width: 0.125em;
  --curve-size: 0.5em;
  --bg: var(--btn-bg);
  --color: var(--btn-text);

  color: var(--color);
  background: transparent;
  font-family: var(--body-font);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: 0.7em 1.9em;
  font-size: 17px;
  letter-spacing: 0.08em;
  border: none;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--accent-shadow);
  clip-path: polygon(
    0% var(--curve-size),
    var(--curve-size) 0,
    100% 0,
    100% calc(100% - var(--curve-size)),
    calc(100% - var(--curve-size)) 100%,
    0 100%
  );
  transition: color 250ms ease, box-shadow 300ms ease;
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}

@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%;
  }
  50% {
    background-position: 70% 100%;
  }
  100% {
    background-position: 31% 0%;
  }
}

.btn::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
    var(--border-width)
      calc(var(--curve-size) + var(--border-width) * 0.5),
    calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
    var(--border-width) calc(100% - var(--border-width))
  );
  transition: clip-path 500ms ease;
}

.btn:hover::after,
.btn:focus::after {
  clip-path: polygon(
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width))
  );
  transition: 200ms ease;
}

.btn:hover,
.btn:focus {
  color: var(--btn-hover-text);
  box-shadow: var(--neon-glow);
  text-shadow: 0 0 10px var(--electric-blue), 0 0 20px var(--molten-orange);
  transform: scale(1.02);
}

/* Scrollbar hide kar do */
body {
  margin: 0;
  overflow-y: scroll;
   overflow-x: hidden !important;  
  scrollbar-width: none; /* Firefox */
}

/* Scrollbar ki width aur background */
::-webkit-scrollbar {
  width: 0.3rem;
}

/* Scrollbar track (background part) */
::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 10px;
}

/* Scrollbar thumb (jo move hota hai) */
::-webkit-scrollbar-thumb {
  background: var(--main-gradient);
  border-radius: 10px;
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-gradient);
}

/* Progress bar style */
#progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--accent-gradient);
  border-radius: 2px;
  transition: width 0.1s ease-out;
  z-index: 100;
}