:root {
      --pink: #8B74B5;
      --dark: #4E397B;
      --white: #ffffff;
      --text: #2E2238;
      --muted: #444444;

      --deep-purple: #4E397B;
      --soft-lavender: #6B559C;
      --vibrant-violet: #8B74B5;
      --mist-lavender: #F5EFFA;
      --ivory-white: #FAF9FC;
      --charcoal-plum: #2E2238;
      --orchid-pink: #8B74B5;
      --text-muted: #6c6173;
      --shadow-soft: 0 24px 70px rgba(91, 42, 134, 0.14);
      --shadow-card: 0 18px 45px rgba(46, 34, 56, 0.10);
      --deep-shadow: 0 32px 90px rgba(46, 34, 56, 0.18);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 18px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: var(--ivory-white);
    }

    button {
      font-family: inherit;
    }

    .about-mapsection {
      position: relative;
      overflow: hidden;
      padding: 30px 20px;
      background:
        radial-gradient(circle at 10% 20%, rgba(139, 116, 181, 0.15), transparent 30%),
        linear-gradient(180deg, var(--ivory-white) 0%, var(--mist-lavender) 100%);
    }

    .about-mapsection::before {
      content: "";
      position: absolute;
      top: -130px;
      right: -130px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: rgba(107, 85, 156, 0.08);
      pointer-events: none;
    }

    .about-mapsection-container {
      position: relative;
      z-index: 1;
      width: min(1280px, 100%);
      margin: 0 auto;
    }

    .about-mapsection-heading {
      max-width: 800px;
      margin-bottom: 34px;
    }

    .about-mapsection-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
      color: var(--deep-purple);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .about-mapsection-eyebrow::before {
      content: "";
      width: 30px;
      height: 2px;
      background: var(--vibrant-violet);
    }

    .about-mapsection-title {
      margin: 0 0 14px;
      color: var(--charcoal-plum);
      font-size: 50px;
      line-height: 1.05;
      letter-spacing: -0.035em;
    }

    .about-mapsection-title span {
      color: var(--deep-purple);
    }

    .about-mapsection-description {
      max-width: 760px;
      margin: 0;
      color: var(--text-muted);
      font-size: 17px;
      line-height: 1.8;
    }

    .about-mapsection-layout {
      display: grid;
      grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
      height: 760px;
      overflow: hidden;
      border: 1px solid rgba(78, 57, 123, 0.12);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--deep-shadow);
    }

    .about-mapsection-sidebar {
      position: relative;
      z-index: 500;
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      padding: 28px 24px 22px;
      background: linear-gradient(145deg, rgba(78, 57, 123, 0.99), rgba(107, 85, 156, 0.97));
      color: var(--white);
    }

    .about-mapsection-sidebar-head {
      flex: 0 0 auto;
      margin-bottom: 18px;
    }

    .about-mapsection-panel-label {
      display: block;
      margin-bottom: 8px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .about-mapsection-sidebar-title {
      margin: 0;
      color: var(--white);
      font-size: 27px;
      line-height: 1.2;
    }

    .about-mapsection-navigation {
      display: grid;
      min-height: 0;
      flex: 1 1 auto;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 14px;
    }

    .about-mapsection-nav-group {
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      padding-top: 13px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .about-mapsection-nav-group:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .about-mapsection-nav-heading {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .about-mapsection-nav-heading strong {
      color: var(--white);
      font-size: 13px;
      letter-spacing: 0.02em;
    }

    .about-mapsection-nav-heading span {
      color: rgba(255, 255, 255, 0.66);
      font-size: 10px;
      text-transform: uppercase;
    }

    .about-mapsection-scroll-list {
      min-height: 0;
      margin: 0;
      padding: 0 5px 0 0;
      overflow-x: hidden;
      overflow-y: auto;
      list-style: none;
      scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
      scrollbar-width: thin;
    }

    .about-mapsection-scroll-list::-webkit-scrollbar {
      width: 6px;
    }

    .about-mapsection-scroll-list::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
    }

    .about-mapsection-scroll-list::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.42);
    }

    .about-mapsection-country-list {
      max-height: 112px;
    }

    .about-mapsection-state-list {
      max-height: 152px;
    }

    .about-mapsection-place-list {
      height: 100%;
      min-height: 148px;
    }

    .about-mapsection-list-item + .about-mapsection-list-item {
      margin-top: 6px;
    }

    .about-mapsection-nav-button {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 10px;
      padding: 10px 11px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.075);
      color: rgba(255, 255, 255, 0.92);
      font-size: 13px;
      line-height: 1.35;
      text-align: left;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .about-mapsection-nav-button::before {
      content: "";
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border: 2px solid rgba(255, 255, 255, 0.78);
      border-radius: 50%;
      transition: 0.2s ease;
    }

    .about-mapsection-nav-button:hover,
    .about-mapsection-nav-button:focus-visible,
    .about-mapsection-nav-button.is-active {
      border-color: rgba(255, 255, 255, 0.72);
      background: var(--white);
      color: var(--deep-purple);
      outline: 0;
      transform: translateX(3px);
    }

    .about-mapsection-nav-button:hover::before,
    .about-mapsection-nav-button:focus-visible::before,
    .about-mapsection-nav-button.is-active::before {
      border-color: var(--deep-purple);
      background: var(--deep-purple);
      box-shadow: 0 0 0 4px rgba(78, 57, 123, 0.1);
    }

    .about-mapsection-nav-button-name {
      min-width: 0;
      flex: 1 1 auto;
    }

    .about-mapsection-nav-button-count {
      display: grid;
      flex: 0 0 auto;
      min-width: 26px;
      height: 26px;
      padding: 0 5px;
      place-items: center;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.13);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
    }

    .about-mapsection-nav-button:hover .about-mapsection-nav-button-count,
    .about-mapsection-nav-button:focus-visible .about-mapsection-nav-button-count,
    .about-mapsection-nav-button.is-active .about-mapsection-nav-button-count {
      background: var(--mist-lavender);
    }

    .about-mapsection-empty {
      margin: 0;
      padding: 11px 12px;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 2px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      line-height: 1.55;
    }

    .about-mapsection-sidebar-footer {
      flex: 0 0 auto;
      padding-top: 16px;
    }

    .about-mapsection-overview-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 15px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.22s ease;
    }

    .about-mapsection-overview-button:hover,
    .about-mapsection-overview-button:focus-visible {
      background: var(--white);
      color: var(--deep-purple);
      outline: 0;
    }

    .about-mapsection-map-wrap {
      position: relative;
      min-width: 0;
      min-height: 0;
      background: var(--mist-lavender);
    }

    #about-mapsection-map {
      width: 100%;
      height: 100%;
      min-height: 100%;
      background: var(--mist-lavender);
    }

    /* Theme only the OpenStreetMap tiles. Roads, labels, buildings, rivers,
       boundaries and all normal map details remain visible. */
    #about-mapsection-map .about-mapsection-theme-tiles {
      filter:
        grayscale(0.78)
        sepia(0.26)
        hue-rotate(215deg)
        saturate(1.05)
        brightness(1.10)
        contrast(0.88);
      opacity: 0.94;
    }

    /* The country mask hides surrounding countries while keeping
       the normal themed basemap visible inside India and Nepal. */
    #about-mapsection-map .about-mapsection-country-mask {
      pointer-events: none;
    }

    /* Selected country/state drill-down border. */
    #about-mapsection-map .about-mapsection-selected-boundary {
      stroke: #4E397B !important;
      stroke-width: 3px !important;
      stroke-opacity: 1 !important;
      vector-effect: non-scaling-stroke;
    }

    .about-mapsection-map-status {
      position: absolute;
      z-index: 700;
      top: 20px;
      right: 20px;
      max-width: 390px;
      padding: 12px 15px;
      border: 1px solid rgba(78, 57, 123, 0.12);
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: var(--shadow-card);
      color: var(--charcoal-plum);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
      backdrop-filter: blur(8px);
      pointer-events: none;
    }

    .about-mapsection-country-marker,
    .about-mapsection-state-marker {
      position: relative;
      cursor: pointer;
    }

    .about-mapsection-country-marker {
      width: 136px;
      height: 63px;
      transform: translate(-34px, -42px);
    }

    .about-mapsection-state-marker {
      width: 124px;
      height: 59px;
      transform: translate(-31px, -40px);
    }

    .about-mapsection-marker-pin {
      position: absolute;
      top: 0;
      left: 50%;
      width: 33px;
      height: 33px;
      border: 5px solid var(--white);
      border-radius: 50% 50% 50% 0;
      background: var(--deep-purple);
      box-shadow: 0 8px 22px rgba(46, 34, 56, 0.32);
      transform: translateX(-50%) rotate(-45deg);
      animation: about-mapsection-pin-pulse 1.8s infinite;
    }

    .about-mapsection-country-marker .about-mapsection-marker-pin {
      background: var(--soft-lavender);
    }

    .about-mapsection-marker-pin::after {
      content: "";
      position: absolute;
      top: 7px;
      left: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--white);
    }

    .about-mapsection-marker-name {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 7px 9px;
      border-radius: 2px;
      background: var(--white);
      box-shadow: 0 8px 24px rgba(46, 34, 56, 0.22);
      color: var(--deep-purple);
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      white-space: nowrap;
    }

    @keyframes about-mapsection-pin-pulse {
      0%, 100% {
        box-shadow: 0 8px 22px rgba(46, 34, 56, 0.32), 0 0 0 0 rgba(139, 116, 181, 0.38);
      }
      50% {
        box-shadow: 0 8px 22px rgba(46, 34, 56, 0.32), 0 0 0 14px rgba(139, 116, 181, 0);
      }
    }

    .about-mapsection-location-pin {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 4px solid var(--white);
      border-radius: 50% 50% 50% 0;
      background: var(--vibrant-violet);
      box-shadow: 0 7px 18px rgba(46, 34, 56, 0.26);
      transform: rotate(-45deg);
    }

    .about-mapsection-location-pin::after {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--white);
    }

    .about-mapsection-popup {
      min-width: 350px;
      max-width: 350px;
      padding: 2px;
    }

    .about-mapsection-popup-kicker {
      margin-bottom: 6px;
      color: var(--vibrant-violet);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .about-mapsection-popup-title {
      margin: 0 0 12px;
      color: var(--charcoal-plum);
      font-size: 19px;
      line-height: 1.25;
    }

    .about-mapsection-popup-details {
      display: grid;
      gap: 9px;
      margin: 0;
    }

    .about-mapsection-popup-row {
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr);
      gap: 9px;
      padding-top: 8px;
      border-top: 1px solid rgba(78, 57, 123, 0.1);
    }

    .about-mapsection-popup-row dt,
    .about-mapsection-popup-row dd {
      margin: 0;
    }

    .about-mapsection-popup-row dt {
      color: var(--deep-purple);
      font-size: 11px;
      font-weight: 800;
    }

    .about-mapsection-popup-row dd {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .leaflet-popup-content-wrapper {
      border-radius: 10px;
      box-shadow: var(--shadow-card);
    }

    .leaflet-popup-content {
      margin: 16px;
    }

    .leaflet-control-zoom a {
      color: var(--deep-purple);
    }

    .marker-cluster-small,
    .marker-cluster-medium,
    .marker-cluster-large {
      background: rgba(139, 116, 181, 0.24);
    }

    .marker-cluster-small div,
    .marker-cluster-medium div,
    .marker-cluster-large div {
      background: var(--deep-purple);
      color: var(--white);
      font-weight: 700;
    }

    @media (max-width: 1100px) {
      .about-mapsection-layout {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
      }
    }

    @media (max-width: 991px) {
      .about-mapsection {
        padding: 70px 16px;
      }

      .about-mapsection-layout {
        height: auto;
        grid-template-columns: 1fr;
      }

      .about-mapsection-sidebar {
        min-height: 0;
        padding: 28px;
      }

      .about-mapsection-navigation {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-rows: 1fr;
        gap: 14px;
      }

      .about-mapsection-nav-group {
        padding: 0 0 0 14px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
      }

      .about-mapsection-nav-group:first-child {
        padding-left: 0;
        border-left: 0;
      }

      .about-mapsection-country-list,
      .about-mapsection-state-list,
      .about-mapsection-place-list {
        height: 188px;
        max-height: 188px;
        min-height: 188px;
      }

      .about-mapsection-map-wrap,
      #about-mapsection-map {
        height: 560px;
        min-height: 560px;
      }
    }

    @media (max-width: 767px) {
      .about-mapsection-heading {
        margin-bottom: 26px;
      }

      .about-mapsection-description {
        font-size: 15px;
        line-height: 1.7;
      }

      .about-mapsection-sidebar {
        padding: 26px 20px 20px;
      }

      .about-mapsection-navigation {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }

      .about-mapsection-nav-group,
      .about-mapsection-nav-group:first-child {
        padding: 12px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-left: 0;
      }

      .about-mapsection-nav-group:first-child {
        padding-top: 0;
        border-top: 0;
      }

      .about-mapsection-country-list {
        height: auto;
        min-height: 0;
        max-height: 118px;
      }

      .about-mapsection-state-list {
        height: auto;
        min-height: 0;
        max-height: 160px;
      }

      .about-mapsection-place-list {
        height: auto;
        min-height: 120px;
        max-height: 250px;
      }

      .about-mapsection-map-wrap,
      #about-mapsection-map {
        height: 470px;
        min-height: 470px;
      }

      .about-mapsection-map-status {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
      }
    }

    @media (max-width: 480px) {
      .about-mapsection {
        padding: 54px 10px;
      }

      .about-mapsection-layout {
        border-radius: var(--radius-md);
      }

      .about-mapsection-sidebar-title {
        font-size: 24px;
      }

      .about-mapsection-map-wrap,
      #about-mapsection-map {
        height: 420px;
        min-height: 420px;
      }

      .about-mapsection-popup {
        min-width: 210px;
      }

      .about-mapsection-popup-row {
        grid-template-columns: 67px minmax(0, 1fr);
      }
    }