:root {
      --saffron: #f47b20;
      --deep-saffron: #cc4f0b;
      --maroon: #7c2d12;
      --earth: #8a5a2b;
      --leaf: #2f6f4e;
      --cream: #fff8ed;
      --soft-gold: #ffd27a;
      --charcoal: #26211d;
      --muted: #76675c;
      --white: #ffffff;
      --shadow: 0 18px 44px rgba(64, 38, 17, 0.14);
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 82px;
    }

    body {
      color: var(--charcoal);
      font-family: "Mukta", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--cream);
      transition: background 0.25s ease, color 0.25s ease;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .navbar-brand {
      font-family: "Poppins", system-ui, sans-serif;
      letter-spacing: 0;
    }

    body:not([data-lang="en"]) h1,
    body:not([data-lang="en"]) h2,
    body:not([data-lang="en"]) h3,
    body:not([data-lang="en"]) h4,
    body:not([data-lang="en"]) h5,
    body:not([data-lang="en"]) h6,
    body:not([data-lang="en"]) .navbar-brand,
    body:not([data-lang="en"]) .navbar .nav-link,
    body:not([data-lang="en"]) .btn,
    body:not([data-lang="en"]) .section-kicker,
    body:not([data-lang="en"]) .theme-toggle,
    body:not([data-lang="en"]) .language-picker {
      font-family: "Mukta", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    a {
      color: var(--deep-saffron);
      text-decoration: none;
    }

    a:hover {
      color: var(--maroon);
    }

    .section-padding {
      padding: 88px 0;
    }

    .section-kicker {
      color: var(--deep-saffron);
      font-family: "Poppins", sans-serif;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .section-title {
      color: var(--maroon);
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .section-copy {
      color: var(--muted);
      font-size: 1.08rem;
      max-width: 720px;
    }

    .text-saffron {
      color: var(--deep-saffron);
    }

    .btn-wari {
      --bs-btn-color: var(--white);
      --bs-btn-bg: var(--saffron);
      --bs-btn-border-color: var(--saffron);
      --bs-btn-hover-color: var(--white);
      --bs-btn-hover-bg: var(--deep-saffron);
      --bs-btn-hover-border-color: var(--deep-saffron);
      --bs-btn-active-bg: var(--maroon);
      --bs-btn-active-border-color: var(--maroon);
      border-radius: 999px;
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      padding: 0.85rem 1.6rem;
      box-shadow: 0 12px 24px rgba(244, 123, 32, 0.26);
    }

    .btn-outline-wari {
      --bs-btn-color: var(--maroon);
      --bs-btn-border-color: rgba(124, 45, 18, 0.4);
      --bs-btn-hover-color: var(--white);
      --bs-btn-hover-bg: var(--maroon);
      --bs-btn-hover-border-color: var(--maroon);
      border-radius: 999px;
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      padding: 0.85rem 1.35rem;
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 248, 237, 0.94);
      border-bottom: 1px solid rgba(138, 90, 43, 0.14);
      backdrop-filter: blur(16px);
    }

    .navbar-brand {
      color: var(--maroon);
      font-weight: 800;
    }

    .brand-mark {
      align-items: center;
      background: linear-gradient(135deg, var(--saffron), var(--maroon));
      border-radius: 50%;
      color: var(--white);
      display: inline-flex;
      height: 42px;
      justify-content: center;
      width: 42px;
    }

    .navbar .nav-link {
      color: var(--charcoal);
      font-family: "Poppins", sans-serif;
      font-size: 0.94rem;
      font-weight: 600;
      padding-inline: 0.85rem;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      color: var(--deep-saffron);
    }

    .theme-toggle,
    .language-picker {
      align-items: center;
      background: var(--white);
      border: 1px solid rgba(138, 90, 43, 0.24);
      border-radius: 999px;
      color: var(--maroon);
      display: inline-flex;
      font-weight: 700;
      gap: 0.45rem;
      padding: 0.48rem 0.8rem;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .theme-toggle:hover,
    .language-picker:hover,
    .language-picker:focus-within {
      background: var(--saffron);
      border-color: var(--saffron);
      color: var(--white);
    }

    .language-picker {
      cursor: pointer;
      justify-content: center;
      min-width: 148px;
      padding-right: 0.72rem;
      position: relative;
    }

    .language-picker select {
      appearance: none;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      line-height: 1.2;
      outline: 0;
      padding: 0 1.1rem 0 0;
      width: 100%;
    }

    .language-picker option {
      color: var(--charcoal);
      background: var(--white);
    }

    .language-picker-chevron {
      font-size: 0.72rem;
      pointer-events: none;
      position: absolute;
      right: 0.78rem;
    }

    #google_translate_element,
    .goog-te-banner-frame,
    .goog-te-gadget,
    .skiptranslate {
      display: none !important;
    }

    body {
      top: 0 !important;
    }

    /* Hero */
    .hero {
      align-items: center;
      background:
        linear-gradient(90deg, rgba(54, 25, 10, 0.78), rgba(54, 25, 10, 0.45), rgba(54, 25, 10, 0.2)),
        url("https://commons.wikimedia.org/wiki/Special:FilePath/Pilgrims_in_Wari.jpg") center/cover no-repeat;
      color: var(--white);
      display: flex;
      min-height: 92vh;
      padding: 132px 0 72px;
      position: relative;
    }

    .hero::after {
      background: linear-gradient(180deg, rgba(255, 248, 237, 0), var(--cream));
      bottom: 0;
      content: "";
      height: 96px;
      left: 0;
      position: absolute;
      right: 0;
    }

    .hero-content {
      max-width: 780px;
      position: relative;
      z-index: 1;
    }

    .hero-badge {
      align-items: center;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      display: inline-flex;
      font-family: "Poppins", sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      gap: 0.5rem;
      margin-bottom: 1.15rem;
      padding: 0.5rem 0.85rem;
    }

    .hero h1 {
      font-size: clamp(2.55rem, 7vw, 5.6rem);
      font-weight: 800;
      line-height: 1.05;
      margin-bottom: 1rem;
      max-width: 920px;
    }

    .hero p {
      color: rgba(255, 255, 255, 0.9);
      font-size: clamp(1.1rem, 2.2vw, 1.35rem);
      margin-bottom: 1.8rem;
      max-width: 690px;
    }

    .hero-stats {
      display: grid;
      gap: 0.85rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 2.3rem;
      max-width: 620px;
    }

    .hero-stat {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      padding: 1rem;
    }

    .hero-stat strong {
      display: block;
      font-family: "Poppins", sans-serif;
      font-size: 1.15rem;
    }

    .hero-stat .counter {
      font-size: 1.4rem;
    }

    .hero-stat span {
      color: rgba(255, 255, 255, 0.76);
      font-size: 0.95rem;
    }

    /* Reusable Cards */
    .wari-card {
      background: var(--white);
      border: 1px solid rgba(138, 90, 43, 0.12);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(64, 38, 17, 0.08);
      height: 100%;
      padding: 1.65rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .wari-card:hover {
      border-color: rgba(244, 123, 32, 0.36);
      box-shadow: var(--shadow);
      transform: translateY(-6px);
    }

    .icon-circle {
      align-items: center;
      background: rgba(244, 123, 32, 0.12);
      border-radius: 50%;
      color: var(--deep-saffron);
      display: inline-flex;
      font-size: 1.45rem;
      height: 58px;
      justify-content: center;
      margin-bottom: 1rem;
      width: 58px;
    }

    .wari-card h3,
    .wari-card h4 {
      color: var(--maroon);
      font-weight: 800;
    }

    .wari-card p {
      color: var(--muted);
      margin-bottom: 0;
    }

    /* About */
    .about-band {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 248, 237, 0.95)),
        radial-gradient(circle at top left, rgba(255, 210, 122, 0.3), transparent 34%);
    }

    .about-image {
      border: 10px solid var(--white);
      border-radius: 8px;
      box-shadow: var(--shadow);
      min-height: 390px;
      object-fit: cover;
      width: 100%;
    }

    .devotion-note {
      background: var(--white);
      border-left: 5px solid var(--saffron);
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(64, 38, 17, 0.1);
      margin-top: -48px;
      padding: 1.25rem;
      position: relative;
      width: min(92%, 420px);
    }

    /* Highlights */
    .highlights {
      background: var(--white);
    }

    .highlight-card {
      overflow: hidden;
      position: relative;
    }

    .highlight-card::before {
      background: linear-gradient(90deg, var(--saffron), var(--leaf));
      content: "";
      height: 4px;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    /* Timeline */
    .route-section {
      background:
        linear-gradient(180deg, rgba(124, 45, 18, 0.05), rgba(47, 111, 78, 0.08)),
        var(--cream);
    }

    .timeline {
      margin: 2.4rem auto 0;
      max-width: 930px;
      position: relative;
    }

    .timeline::before {
      background: linear-gradient(180deg, var(--saffron), var(--leaf));
      bottom: 0;
      content: "";
      left: 26px;
      position: absolute;
      top: 0;
      width: 4px;
    }

    .timeline-item {
      display: grid;
      gap: 1rem;
      grid-template-columns: 56px 1fr;
      margin-bottom: 1.25rem;
      position: relative;
    }

    .timeline-icon {
      align-items: center;
      background: var(--white);
      border: 4px solid var(--saffron);
      border-radius: 50%;
      color: var(--maroon);
      display: flex;
      height: 56px;
      justify-content: center;
      position: relative;
      width: 56px;
      z-index: 1;
    }

    .timeline-content {
      background: var(--white);
      border: 1px solid rgba(138, 90, 43, 0.14);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(64, 38, 17, 0.08);
      padding: 1.25rem;
    }

    .timeline-content h3 {
      color: var(--maroon);
      font-size: 1.1rem;
      font-weight: 800;
    }

    .timeline-content p {
      color: var(--muted);
      margin-bottom: 0;
    }

    /* Gallery */
    .gallery-card {
      border: 0;
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(64, 38, 17, 0.1);
      overflow: hidden;
    }

    .gallery-card img {
      aspect-ratio: 4 / 3;
      object-fit: cover;
      transition: transform 0.35s ease, filter 0.35s ease;
      width: 100%;
    }

    .gallery-card:hover img {
      filter: saturate(1.08) contrast(1.04);
      transform: scale(1.07);
    }

    .gallery-caption {
      background: var(--white);
      color: var(--maroon);
      font-weight: 700;
      padding: 0.9rem 1rem;
    }

    /* Events */
    .events {
      background:
        linear-gradient(rgba(44, 28, 18, 0.86), rgba(44, 28, 18, 0.86)),
        url("https://commons.wikimedia.org/wiki/Special:FilePath/Pandharpur_Wari_01.jpg") center/cover fixed;
      color: var(--white);
    }

    .events .section-title,
    .events .section-kicker {
      color: var(--white);
    }

    .events .section-copy {
      color: rgba(255, 255, 255, 0.76);
    }

    .event-card {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 8px;
      color: var(--charcoal);
      height: 100%;
      padding: 1.5rem;
    }

    .date-badge {
      background: var(--saffron);
      border-radius: 8px;
      color: var(--white);
      display: inline-flex;
      flex-direction: column;
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      line-height: 1;
      min-width: 74px;
      padding: 0.78rem 0.65rem;
      text-align: center;
    }

    .date-badge span {
      font-size: 1.55rem;
    }

    .date-badge small {
      font-size: 0.75rem;
      margin-top: 0.25rem;
      text-transform: uppercase;
    }

    .event-card .btn {
      border-radius: 999px;
      font-weight: 700;
    }

    /* Map */
    .map-section {
      background: var(--white);
    }

    .map-frame {
      border: 0;
      border-radius: 8px;
      box-shadow: var(--shadow);
      height: 440px;
      width: 100%;
    }

    .map-info {
      background: var(--cream);
      border: 1px solid rgba(138, 90, 43, 0.14);
      border-radius: 8px;
      height: 100%;
      padding: 1.75rem;
    }

    /* Testimonials */
    .testimonial-card {
      background: var(--white);
      border: 1px solid rgba(138, 90, 43, 0.12);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(64, 38, 17, 0.08);
      height: 100%;
      padding: 1.6rem;
    }

    .quote-icon {
      color: var(--saffron);
      font-size: 1.8rem;
      margin-bottom: 0.9rem;
    }

    .testimonial-card blockquote {
      color: var(--muted);
      font-size: 1.05rem;
      margin: 0 0 1rem;
    }

    .testimonial-card strong {
      color: var(--maroon);
      font-family: "Poppins", sans-serif;
    }

    /* Contact and Footer */
    .contact-strip {
      background: var(--leaf);
      color: var(--white);
      padding: 3rem 0;
    }

    .contact-strip p {
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 0;
    }

    footer {
      background: #241914;
      color: rgba(255, 255, 255, 0.78);
      padding: 64px 0 28px;
    }

    footer h2,
    footer h3,
    footer h4 {
      color: var(--white);
      font-weight: 800;
    }

    .footer-link {
      color: rgba(255, 255, 255, 0.74);
      display: inline-block;
      margin-bottom: 0.45rem;
    }

    .footer-link:hover {
      color: var(--soft-gold);
    }

    .social-link {
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: var(--white);
      display: inline-flex;
      height: 42px;
      justify-content: center;
      margin-right: 0.45rem;
      transition: background 0.2s ease, transform 0.2s ease;
      width: 42px;
    }

    .social-link:hover {
      background: var(--saffron);
      color: var(--white);
      transform: translateY(-3px);
    }

    .source-note {
      color: rgba(255, 255, 255, 0.55);
      font-size: 0.86rem;
    }

    /* Dark Mode */
    body.dark-mode {
      --cream: #18130f;
      --white: #241c17;
      --charcoal: #f7efe4;
      --muted: #d3c3b2;
      --maroon: #ffd27a;
      --deep-saffron: #ff9b45;
      background: var(--cream);
      color: var(--charcoal);
    }

    body.dark-mode .navbar {
      background: rgba(24, 19, 15, 0.94);
      border-bottom-color: rgba(255, 210, 122, 0.18);
    }

    body.dark-mode .navbar-toggler {
      background: rgba(255, 255, 255, 0.86);
    }

    body.dark-mode .about-band,
    body.dark-mode .route-section {
      background: #18130f;
    }

    body.dark-mode .events {
      background:
        linear-gradient(rgba(16, 12, 9, 0.88), rgba(16, 12, 9, 0.88)),
        url("https://commons.wikimedia.org/wiki/Special:FilePath/Pandharpur_Wari_01.jpg") center/cover fixed;
    }

    body.dark-mode .event-card,
    body.dark-mode .modal-content {
      background: #241c17;
      color: var(--charcoal);
    }

    body.dark-mode .text-muted {
      color: #c7b6a5 !important;
    }

    /* Back to Top */
    .back-to-top {
      align-items: center;
      background: var(--saffron);
      border: 0;
      border-radius: 50%;
      bottom: 24px;
      box-shadow: 0 14px 28px rgba(124, 45, 18, 0.24);
      color: var(--white);
      display: flex;
      height: 48px;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      right: 22px;
      transform: translateY(12px);
      transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
      width: 48px;
      z-index: 1050;
    }

    .back-to-top.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .back-to-top:hover {
      background: var(--maroon);
    }

    @media (min-width: 992px) {
      .timeline::before {
        left: 50%;
        transform: translateX(-50%);
      }

      .timeline-item {
        grid-template-columns: 1fr 72px 1fr;
      }

      .timeline-item:nth-child(odd) .timeline-content {
        grid-column: 1;
        text-align: right;
      }

      .timeline-item:nth-child(odd) .timeline-icon {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
      }

      .timeline-item:nth-child(even) .timeline-icon {
        grid-column: 2;
        justify-self: center;
      }

      .timeline-item:nth-child(even) .timeline-content {
        grid-column: 3;
      }
    }

    @media (max-width: 767.98px) {
      .section-padding {
        padding: 64px 0;
      }

      .hero {
        min-height: 86vh;
        padding-top: 112px;
      }

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

      .devotion-note {
        margin-top: 1rem;
        width: 100%;
      }

      .events {
        background-attachment: scroll;
      }
    }
/* Inner Pages */
.page-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(54, 25, 10, 0.78), rgba(54, 25, 10, 0.42)),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/Pilgrims_in_Wari.jpg") center/cover no-repeat;
  color: var(--white);
  display: flex;
  min-height: 46vh;
  padding: 136px 0 72px;
}

.page-hero h1 {
  font-size: clamp(2.25rem, 5vw, 4.35rem);
  font-weight: 800;
  line-height: 1.08;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.18rem;
  max-width: 720px;
}

.breadcrumb-wari {
  color: rgba(255, 255, 255, 0.82);
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

body.dark-mode .map-section,
body.dark-mode .highlights {
  background: #18130f;
}