/* reset */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }

      :root {
        --nav-height: 72px;
        --bg-main: #fff6e6;
        --bg-alt: #faefe4;
        --bg-card: #f5e8d3; /* control navbar height from one place */
      }

      /* Skeleton Loading Animation */
      .skeleton {
        background: linear-gradient(90deg, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.15) 75%) !important;
        background-size: 200% 100% !important;
        animation: shimmer 1.5s infinite !important;
        border-radius: 4px;
        display: inline-block;
        border: none !important;
        box-shadow: none !important;
      }

      .skeleton-dark {
        background: linear-gradient(90deg, #f0f0f0 25%, #ffffff 50%, #f0f0f0 75%) !important;
        background-size: 200% 100% !important;
        animation: shimmer 1.5s infinite !important;
        border-radius: 4px;
        display: block;
        border: none !important;
        box-shadow: none !important;
      }

      @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }

      @font-face {
        font-family: "TempleFont";
        src: url("./fonts/Lato-Regular.ttf") format("truetype");
        font-display: swap;
      }
      @font-face {
        font-family: "Cinzel";
        src: url("./fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
        font-display: swap;
      }

      @font-face {
        font-family: "Inter";
        src: url("./fonts/Inter-VariableFont.ttf") format("truetype");
        font-display: swap;
      }

      /* Continuous warm gradient on the page (single source of truth) */
      body {
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        background: linear-gradient(90deg, #f39a23, #cc3427, #f39a23);
        background-size: 300% 100%;
        background-repeat: repeat-y;
        color: #fff;
        padding-top: var(--nav-height);
      }

      html[lang="te"] body {
        font-family: "Noto Sans Telugu", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      }

      /* Telugu typography (Option A: Noto Sans Telugu for titles + body) */
      html[lang="te"] h1,
      html[lang="te"] h2,
      html[lang="te"] h3,
      html[lang="te"] h4,
      html[lang="te"] h5,
      html[lang="te"] h6 {
        font-family: "Noto Sans Telugu", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
        letter-spacing: 0 !important;
      }

      /* ---------------- NAVBAR ------------------ */
      nav {
        width: 100%;
        height: var(--nav-height);
        padding: 16px 40px;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
      }

      /* Nav inner layout */
      .nav-inner {
        font-family: TempleFont;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }

      .logo a {
        color: #fff;
        text-decoration: none;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 0.6px;
        white-space: normal;
        line-height: 1.15;
        display: block;
      }

      .nav-right {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      /* mobile toggle button (hidden on desktop) */
      .nav-toggle {
        display: none;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.08);
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 18px;
        cursor: pointer;
      }

      .lang-toggle {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .lang-btn {
        background: rgba(255,255,255,0.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.12);
        padding: 6px 10px;
        border-radius: 6px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, transform 0.12s;
      }

      .lang-btn.active,
      .lang-btn:hover {
        background: #fff;
        color: #b02121;
        transform: translateY(-1px);
      }

      nav .logo {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0.5px;
        max-width: 360px;
        min-width: 0;
      }

      nav ul {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 28px;
      }

      nav ul li a {
        color: #fff;
        text-decoration: none;
        padding: 6px 8px;
        display: inline-block;
      }

      nav ul li {
        position: relative;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
      }

      /* hover underline */
      nav ul li:not(.dropdown):after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 2px;
        background: #fff;
        transition: 0.3s;
      }
      nav ul li:hover:after {
        width: 100%;
      }

      /* DROPDOWN */
      .dropdown-label {
        cursor: pointer;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        position: relative;
      }

      .dropdown-label:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 2px;
        background: #fff;
        transition: 0.3s;
      }

      .dropdown:hover .dropdown-label:after {
        width: 100%;
      }

      .dropdown:hover .drop-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0px);
      }

      .drop-menu {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        background: rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(6px);
        padding: 10px 0;
        border-radius: 8px;
        min-width: 140px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: 0.25s ease;
        z-index: 75;
      }

      .drop-menu:before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
      }

      .drop-menu a {
        display: block;
        padding: 8px 16px;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
      }
      .drop-menu a:hover {
        background: rgba(255, 255, 255, 0.12);
      }

      /* MOBILE NAV (handled at 900px breakpoint below) */
      @media (max-width: 700px) {
        nav {
          padding: 10px 16px;
        }
        nav ul {
          gap: 14px;
        }
      }

      /* ------------ PAGE LAYOUT ------------- */
      .wrap {
        position: relative;
        min-height: calc(100vh - var(--nav-height));
        width: 100%;
        display: flex;
        align-items: flex-start;
        padding-left: 60px;
        padding-right: 38vw; /* keeps text away from image */
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .left {
        max-width: 640px;
        z-index: 2;
      }

      .left .inner {
        max-width: 760px;
        padding-top: var(
          --nav-height
        ); /* push ALL content below fixed nav on desktop */
      }

      h1 {
        font-family: "Cinzel", serif;
        font-size: 40px;
        line-height: 1;
        margin-bottom: 18px;
        font-weight: 800;
      }
      h2 {
        font-family: "TempleFont", serif;
        letter-spacing: 2px;
      }

      p.lead {
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.7;
        margin-bottom: 18px;
      }

      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 50vw;
        height: 100%; /* match .wrap height instead of 100vh */
        overflow: hidden;
      }

      .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
        pointer-events: none;
      }

      @media (max-width: 900px) {
        :root {
          --mobile-nav-offset: 110px;
        }

        body {
          padding-top: var(--mobile-nav-offset); /* Adjust for taller mobile navbar */
        }

        .wrap {
          flex-direction: column-reverse;
          align-items: center;
          justify-content: flex-start;
          padding: 0;
          margin: 0;
        }

        /* Pull hero up so the image begins behind the fixed navbar */
        .wrap {
          margin-top: calc(-1 * var(--mobile-nav-offset));
        }

        /* Responsive navbar: show hamburger, collapse links */
        nav {
          height: auto;
          min-height: var(--nav-height);
          padding: 10px 16px;
        }

        .nav-inner {
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 10px;
        }

        .logo {
          flex: 1;
          order: 1;
          min-width: 0;
          padding-right: 10px;
        }

        .logo a {
          font-size: 16px;
          white-space: normal;
          line-height: 1.2;
          display: block;
        }

        .nav-right {
          display: contents;
        }

        .nav-toggle {
          display: inline-block;
          order: 3;
          margin-left: 0;
        }

        .lang-toggle {
          order: 2;
          width: auto;
          justify-content: flex-end;
          margin-top: 0;
          padding-top: 0;
          border-top: none;
        }

        .nav-right > ul {
          display: flex;
          visibility: hidden;
          opacity: 0;
          transform: translateY(-8px);
          position: absolute;
          top: 100%;
          right: 0;
          left: 0;
          background: rgba(0,0,0,0.95);
          flex-direction: column;
          gap: 0;
          padding: 12px 16px 20px;
          z-index: 60;
          max-height: 80vh;
          overflow: auto;
          transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
        }

        nav.mobile-open .nav-right > ul {
          visibility: visible;
          opacity: 1;
          transform: translateY(0);
        }

        .nav-right > ul li {
          padding: 8px 0;
        }

        .nav-right > ul li a {
          display: block;
          padding: 8px 10px;
        }

        /* Mobile: make dropdown items flow inside the menu (no absolute positioning)
           and collapse by default. Tapping the header toggles the .open class. */
        .drop-menu {
          position: static;
          background: transparent;
          padding: 0 0 12px 12px;
          border-radius: 0;
          min-width: auto;
          opacity: 1;
          transform: none;
          pointer-events: auto;
          display: none;
        }

        .dropdown.open > .drop-menu {
          display: block;
        }

        .drop-menu a {
          padding: 8px 12px;
          display: block;
          color: #fff;
        }

        .right {
          width: 100%;
          position: relative;
          height: auto;
          margin: 0;
          padding: 0;
        }

        /* remove top & bottom extra space around image */
        .hero-img {
          width: 100%;
          height: auto;
          max-height: none;
          margin: 0;
          padding: 0;
          object-fit: cover;
          object-position: center;
          content: url("hero_banner_mobile.webp");
        }

        .left {
          width: 100%;
          padding: 20px;
          text-align: center;
          margin: 0;
          position: relative;
          z-index: 2;
        }

        /* remove padding gap between image and content */
        .left .inner {
          max-width: 640px;
          padding-top: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
        }

        .left h1 {
          display: none;
        }

        .mobile-hero-title {
          font-family: "Cinzel", serif;
          animation: fadeSlide 1.2s ease-out forwards;
          opacity: 0;
          position: absolute;
          bottom: 8px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 26px;
          font-weight: 900;
          color: white;
          text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
          text-align: center;
        }

        html[lang="te"] .mobile-hero-title {
          font-family: "Noto Sans Telugu", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
          font-size: clamp(16px, 4.8vw, 22px);
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: 0;
          max-width: 94%;
        }

        html[lang="te"] .lead {
          font-size: 16px;
          line-height: 1.75;
        }

        html[lang="te"] .timing-col p {
          font-size: 14px;
        }

        .lead {
          font-size: 15px;
          line-height: 1.6;
        }

        .cta-pill {
          font-size: 14px;
          padding: 8px 20px;
          margin: 18px auto;
          display: inline-block;
        }

        .time-pill {
          font-size: 13px;
          padding: 6px 14px;
        }

        .timing-col p {
          font-size: 13px;
        }

        .timing {
          margin-top: 10px;
          width: 100%;
          max-width: 640px;
          margin-left: auto;
          margin-right: auto;
        }

        .timing-grid {
          flex-direction: column;
          gap: 16px;
          align-items: center;
          text-align: center;
        }

        .timing-col {
          width: 100%;
          padding: 10px 0;
        }

        .timing-col + .timing-col {
          border-left: none !important;
          border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .lang-btn {
          padding: 6px 8px;
        }
      }

      /* ------- ANNOUNCEMENT TICKER -------- */
      .announcement-bar {
        width: 100%;
        background: rgba(0, 0, 0, 0.28);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 8px 0;
        backdrop-filter: blur(4px);
      }

      .announcement-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0 24px;
        overflow: hidden;
      }

      .announcement-label {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
        white-space: nowrap;
      }

      .ticker {
        flex: 1;
        overflow: hidden;
        position: relative;
        white-space: nowrap;
      }

      .ticker-track {
        display: inline-block;
        padding-left: 100%;
        animation: ticker-slide 20s linear infinite;
        font-size: 14px;
      }

      .ticker-track.loading {
        padding-left: 0;
        animation: none;
      }

      .ticker-item {
        margin-right: 40px;
      }

      .announcement-inner:hover .ticker-track {
        animation-play-state: paused;
      }

      @keyframes ticker-slide {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

      /* ====== IMAGE CAROUSEL + LATEST UPDATES SECTION ====== */

      .info-section {
        padding: 40px 40px 60px 40px;
        background: var(--bg-alt); /* soft background behind cards */
        color: #222;
      }

      .info-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: flex; /* flex instead of grid for equal heights */
        gap: 24px;
        align-items: stretch;
      }

      /* ---- Carousel ---- */
      .carousel {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        background: #000;

        /* 16:9 aspect ratio */
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;

        flex: 2 1 0;
      }

      .carousel-inner {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .carousel-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.6s ease;
      }

      .carousel-slide.active {
        opacity: 1;
      }

      .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .carousel-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.55),
          rgba(0, 0, 0, 0.1)
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 28px 32px;
        color: #fff;
      }

      .carousel-title {
        font-family: "Cinzel", serif;
        font-size: 28px;
        margin-bottom: 8px;
      }

      .carousel-subtitle {
        font-size: 16px;
        margin-bottom: 18px;
      }

      .carousel-cta {
        font-weight: 600;
        font-size: 15px;
        padding: 8px 18px;
        border-radius: 999px;
        background: rgba(255, 215, 0, 0.9);
        color: #5b1909;
        display: inline-block;
      }

      .carousel-dots {
        position: absolute;
        bottom: 14px;
        right: 20px;
        display: flex;
        gap: 6px;
      }

      .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }

      .carousel-dot.active {
        background: #ffd700;
      }

      .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: none;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .carousel-arrow.left {
        left: 12px;
      }

      .carousel-arrow.right {
        right: 12px;
      }

      /* ---- Latest Updates ---- */
      .updates-card {
        background: var(--bg-card);
        border-radius: 24px;
        padding: 18px 20px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        flex: 1 1 0; /* shares height with carousel */
      }

      .updates-card h3 {
        font-family: "Cinzel", serif;
        font-size: 18px;
        margin-bottom: 12px;
        color: #3a1533;
      }

      .updates-list {
        list-style: none;
        padding-right: 4px;
        flex: 1 1 auto; /* fill remaining height */
        overflow-y: auto; /* scroll INSIDE list */
      }

      .updates-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        margin-bottom: 8px;
        color: #333;
      }

      .updates-item:last-child {
        margin-bottom: 0;
      }

      .updates-dot {
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 50%;
        background: #b3261e;
        margin-top: 6px;
        flex: 0 0 auto;
      }

      .updates-content a {
        color: #5b179e;
        text-decoration: underline;
      }

      .badge-new {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 2px 6px;
        border-radius: 999px;
        background: #ffebe8;
        color: #b3261e;
        margin-bottom: 2px;
      }

      @media (max-width: 900px) {
        .carousel {
          aspect-ratio: auto; /* ignore 16:9 for small screens */
          height: 500px; /* or 240 / 260px if you want taller */
          flex: none; /* <--- ADD THIS LINE to stop it from collapsing */
          width: 100%;
        }

        .carousel-inner {
          height: 100%; /* make slides fill the new height */
        }
        .info-section {
          padding: 30px 16px 40px 16px;
        }

        .info-grid {
          flex-direction: column; /* stack carousel + updates */
        }

        .updates-card {
          height: 260px; /* enough to show ~5 items */
        }
      }

      /* ------- SECTION BELOW HERO -------- */
      .below {
        width: 100%;
        padding: 80px 40px;
        background: var(--bg-main);
        color: #222;
      }

      .below-inner {
        max-width: 900px;
        margin: auto;
        text-align: center;
      }

      .below h2 {
        font-size: 32px;
        font-weight: 800;
        margin-bottom: 18px;
        color: #cc3427;
      }

      .below p {
        font-size: 18px;
        line-height: 1.7;
        color: #444;
      }

      @media (max-width: 700px) {
        .below {
          padding: 50px 20px;
        }
        .below h2 {
          font-size: 26px;
        }
        .below p {
          font-size: 16px;
        }

        .announcement-inner {
          padding: 0 12px;
          gap: 10px;
        }

        .announcement-label {
          display: none; /* optional: hide label on very small screens */
        }
      }

      /* --- MAIN WHITE PILLS (Mandir Info / Darshan Timings) */
      .cta-pill {
        display: inline-block;
        background: #ffffff;
        color: #b02121; /* deep temple red */
        font-weight: 700;
        padding: 10px 28px;
        border-radius: 50px;
        font-size: 16px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
        margin: 18px 0;
        text-align: center;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .cta-pill:hover {
        transform: translateY(-3px);
        box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }

      /* --- TIMING CARD --- */
      .timing {
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.08);
        padding: 18px 24px;
        border-radius: 12px;
        backdrop-filter: blur(3px);
        font-size: 15px;
      }

      /* --- CONTACT CHIPS (quick actions) --- */
      .contact-chips {
        margin-top: 14px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .contact-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.2px;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.92);
        color: #b02121;
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.18);
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      }

      .contact-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.24);
        background: #ffffff;
      }

      .contact-chip:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.9);
        outline-offset: 2px;
      }

      .contact-numbers {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .contact-numbers a {
        color: rgba(255, 255, 255, 0.94);
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 0.2px;
      }

      .contact-numbers a:hover {
        text-decoration: underline;
      }

      .timing-grid {
        display: flex;
      }

      .timing-col {
        flex: 1;
        padding: 0 20px;
      }

      /* vertical line between columns */
      .timing-col + .timing-col {
        border-left: 1px solid rgba(255, 255, 255, 0.3);
      }

      .timing-col p {
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.94);
      }

      /* Mini red labels */
      .time-pill {
        display: inline-block;
        background: #b02121;
        color: #fff;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 999px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }

      @media (max-width: 1200px) {
        .left .inner,
        .timing {
          max-width: 640px;
          margin-left: auto;
          margin-right: auto;
        }
      }

      @keyframes fadeSlide {
        0% {
          opacity: 0;
          transform: translateX(-50%) translateY(20px);
        }
        100% {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }

      /* services */

      .services-grid {
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
      }
      .service-card {
        text-align: center;
        text-decoration: none;
        color: #222;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .service-icon {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        background: #b02121;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease;
      }

      .service-icon img {
        max-width: 55px;
        max-height: 55px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
      }

      /* Only icon hover effect */
      .service-card:hover .service-icon {
        transform: scale(1.12);
      }

      .service-icon-symbol {
        font-size: 22px;
        font-weight: 700;
        color: var(--bg-card);
      }

      .service-label {
        color: #cc3427;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.4;
      }

      @media (max-width: 768px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 480px) {
        .services-grid {
          grid-template-columns: repeat(1, 1fr);
        }
      }

      /* ---------- FOOTER ---------- */

      .site-footer {
        background: #2a0f04;
        color: #fff;
        padding: 50px 40px 20px;
        margin-top: 60px;
      }

      .footer-container {
        max-width: 1200px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
      }

      .footer-section h4 {
        margin-bottom: 14px;
        font-size: 18px;
        font-weight: 700;
        font-family: "Cinzel", serif;
      }

      .footer-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .footer-section ul li {
        margin-bottom: 8px;
      }

      .footer-section ul li a {
        text-decoration: none;
        color: #f5e8d3;
        font-size: 14px;
        transition: color 0.25s ease;
      }

      .footer-section ul li a:hover {
        color: #ffd381;
      }

      .footer-bottom {
        margin-top: 40px;
        text-align: center;
        font-size: 13px;
        opacity: 0.8;
      }

      /* Responsive Footer */
      @media (max-width: 768px) {
        .footer-container {
          grid-template-columns: 1fr;
          text-align: center;
        }
      }

      /* ============================================
         ABOUT PAGE - EVENTS SECTION STYLING
         ============================================ */

      /* Container for the events section */
      [data-i18n="about.events"] {
        margin-top: 48px;
        padding: 32px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }

      /* Styled ordered list with multi-grid layout */
      [data-i18n="about.events"] ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        counter-reset: event-counter;
      }

      /* Individual list items */
      [data-i18n="about.events"] ol li {
        counter-increment: event-counter;
        position: relative;
        padding: 20px 24px 20px 60px;
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        border-radius: 12px;
        border-left: 4px solid #f39a23;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        color: #333;
        font-size: 15px;
        line-height: 1.6;
        font-weight: 500;
      }

      /* Hover effect for list items */
      [data-i18n="about.events"] ol li:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(243, 154, 35, 0.2);
        border-left-color: #cc3427;
      }

      /* Custom number styling */
      [data-i18n="about.events"] ol li::before {
        content: counter(event-counter);
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #f39a23 0%, #cc3427 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        box-shadow: 0 3px 8px rgba(243, 154, 35, 0.3);
      }

      /* Section heading before the list */
      [data-i18n="about.events"]::before {
        content: "";
        display: block;
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #f39a23, #cc3427);
        margin-bottom: 24px;
        border-radius: 2px;
      }

      /* Tablet responsiveness */
      @media (max-width: 768px) {
        [data-i18n="about.events"] {
          padding: 24px 20px;
          margin-top: 32px;
        }

        [data-i18n="about.events"] ol {
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 16px;
        }

        [data-i18n="about.events"] ol li {
          padding: 16px 20px 16px 56px;
          font-size: 14px;
        }

        [data-i18n="about.events"] ol li::before {
          width: 32px;
          height: 32px;
          font-size: 14px;
          left: 14px;
        }
      }

      /* Mobile responsiveness */
      @media (max-width: 480px) {
        [data-i18n="about.events"] {
          padding: 20px 16px;
          margin-top: 24px;
          border-radius: 12px;
        }

        [data-i18n="about.events"] ol {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        [data-i18n="about.events"] ol li {
          padding: 14px 16px 14px 52px;
          font-size: 13px;
        }

        [data-i18n="about.events"] ol li::before {
          width: 28px;
          height: 28px;
          font-size: 13px;
          left: 12px;
        }
      }

      /* History section styling for consistency */
      [data-i18n="about.history"] {
        background: rgba(255, 255, 255, 0.95);
        padding: 32px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        color: #333;
        line-height: 1.8;
      }

      [data-i18n="about.history"] h2 {
        color: #cc3427;
        margin-bottom: 20px;
      }

      [data-i18n="about.history"] p {
        margin-bottom: 16px;
        color: #444;
      }

      @media (max-width: 768px) {
        [data-i18n="about.history"] {
          padding: 24px 20px;
        }
      }

      @media (max-width: 480px) {
        [data-i18n="about.history"] {
          padding: 20px 16px;
          border-radius: 12px;
        }
      }

      /* ========== SEVA PAGE STYLING ========== */

      /* Seva Banner */
      .seva-banner {
        width: 100%;
        height: 400px;
        overflow: hidden;
        position: relative;
        margin-top: 0;
      }

      .seva-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      /* Seva Heading Wrapper */
      .seva-heading-wrapper {
        text-align: center;
        padding: 50px 24px;
        background: #fff6e6;
      }

      .seva-heading-wrapper h1 {
        font-size: 48px;
        color: #cc3427;
        margin: 0;
        letter-spacing: 1px;
      }

      /* Seva Cards Wrapper with Light Background */
      .seva-cards-wrapper {
        background: linear-gradient(180deg, #faf8f3 0%, #f5f0e8 100%);
        padding: 20px 24px;
      }

      .seva-cards-section {
        max-width: 1200px;
        margin: 0 auto;
      }

      .seva-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        margin: 0;
      }

      /* Card Styling */
      .seva-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .seva-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
      }

      .seva-card-image {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f0;
      }

      .seva-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      .seva-card-title {
        font-family: "Ramabhadra", serif;
        font-size: 22px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        padding: 28px 24px 14px;
        margin: 0;
      }

      .seva-card-description {
        font-size: 15px;
        color: #666;
        text-align: center;
        padding: 0 24px 20px;
        line-height: 1.7;
        flex-grow: 1;
      }

      .seva-card-link {
        text-align: center;
        color: #cc3427;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        padding: 0 24px 22px;
        transition: all 0.3s ease;
        display: inline-block;
        align-self: center;
      }

      .seva-card-link span {
        margin-left: 6px;
        display: inline-block;
        transition: transform 0.3s ease;
      }

      .seva-card-link:hover span {
        transform: translateX(4px);
      }

      .seva-card-link:hover {
        color: #b02121;
      }

      .seva-card-button {
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        border: none;
        border-radius: 28px;
        padding: 14px 36px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        margin: 0 24px 28px;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .seva-card-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(204, 52, 39, 0.35);
      }

      /* ========== SEVA PRICING TABLE ========== */
      .seva-pricing-section {
        padding: 60px 40px;
        max-width: 1200px;
        margin: 0 auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        border-radius: 12px;
      }

      .seva-pricing-title {
        font-size: 32px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        margin: 0 0 40px 0;
        letter-spacing: 0.5px;
      }

      .seva-table-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        border: 1px solid rgba(204, 52, 39, 0.1);
      }

      .seva-pricing-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 15px;
      }

      .seva-pricing-table thead {
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
      }

      .seva-pricing-table th {
        color: #fff;
        padding: 18px 24px;
        text-align: left;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 16px;
        text-transform: uppercase;
      }

      .seva-pricing-table th:last-child {
        text-align: right;
      }

      .seva-pricing-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease;
      }

      .seva-pricing-table tbody tr:hover {
        background-color: #fafafa;
      }

      .seva-pricing-table tbody tr:last-child {
        border-bottom: none;
      }

      .seva-pricing-table td {
        padding: 16px 24px;
        color: #333;
      }

      .seva-pricing-table td:first-child {
        font-weight: 500;
        color: #333;
      }

      .seva-pricing-table td:last-child {
        text-align: right;
        font-weight: 700;
        color: #2d5016;
        font-size: 16px;
      }

      /* Responsive Seva Pricing Table */
      @media (max-width: 768px) {
        .seva-pricing-section {
          padding: 40px 24px;
        }

        .seva-pricing-title {
          font-size: 28px;
          margin-bottom: 30px;
        }

        .seva-pricing-table {
          font-size: 14px;
        }

        .seva-pricing-table th {
          padding: 14px 16px;
          font-size: 14px;
        }

        .seva-pricing-table td {
          padding: 12px 16px;
        }

        .seva-pricing-table td:last-child {
          font-size: 14px;
        }
      }

      @media (max-width: 480px) {
        .seva-pricing-section {
          padding: 30px 16px;
        }

        .seva-pricing-title {
          font-size: 24px;
          margin-bottom: 20px;
        }

        .seva-table-container {
          overflow-x: auto;
        }

        .seva-pricing-table {
          font-size: 13px;
          min-width: 100%;
        }

        .seva-pricing-table th {
          padding: 12px;
          font-size: 12px;
        }

        .seva-pricing-table td {
          padding: 10px 12px;
        }

        .seva-pricing-table td:last-child {
          font-size: 13px;
          white-space: nowrap;
        }
      }

      /* ========== DONATIONS PAGE STYLES ========== */
      
      /* Donations Banner */
      .donations-banner {
        position: relative;
        width: 100%;
        height: 320px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -72px;
        padding-top: 72px;
      }

      .donations-banner-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .donations-banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1;
      }

      .donations-banner-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #fff;
        animation: fadeInDown 0.8s ease-out;
      }

      .donations-banner-title {
        font-size: 48px;
        font-weight: 700;
        margin: 0 0 12px 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        letter-spacing: 1px;
      }

      .donations-banner-subtitle {
        font-size: 18px;
        font-weight: 400;
        margin: 0;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
      }

      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Donations Intro Section */
      .donations-intro {
        padding: 60px 40px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .donations-intro-content {
        background: rgba(255, 255, 255, 0.95);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      }

      .donations-intro-text {
        font-size: 16px;
        color: #333;
        line-height: 1.8;
        margin: 0;
        text-align: center;
        font-weight: 500;
      }

      /* Donations Cards Wrapper */
      .donations-cards-wrapper {
        padding: 60px 40px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
      }

      .donations-cards-section {
        max-width: 1200px;
        margin: 0 auto;
      }

      .donations-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 40px;
        margin: 0;
      }

      /* Donations Card */
      .donations-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        border: 1px solid rgba(204, 52, 39, 0.1);
      }

      .donations-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 48px rgba(204, 52, 39, 0.2);
        border-color: rgba(204, 52, 39, 0.3);
      }

      .donations-card-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        z-index: 3;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(204, 52, 39, 0.3);
      }

      .donations-card-image {
        width: 100%;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        background: linear-gradient(135deg, #f5e8d3 0%, #faefe4 100%);
        position: relative;
      }

      .donations-card-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
        pointer-events: none;
      }

      .donations-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.5s ease;
      }

      .donations-card:hover .donations-card-image img {
        transform: scale(1.08);
      }

      .donations-card-content {
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
      }

      .donations-card-title {
        font-family: "Ramabhadra", serif;
        font-size: 22px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        margin: 0 0 16px 0;
        padding: 0;
        line-height: 1.3;
      }

      .donations-card-description {
        font-size: 15px;
        color: #666;
        text-align: center;
        line-height: 1.7;
        flex-grow: 1;
        margin: 0 0 24px 0;
      }

      .donations-card-button {
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        border: none;
        border-radius: 28px;
        padding: 14px 32px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        align-self: center;
        box-shadow: 0 6px 20px rgba(204, 52, 39, 0.25);
      }

      .donations-card-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(204, 52, 39, 0.4);
      }

      .donations-card-button:active {
        transform: translateY(-1px);
      }

      /* ========== RECENT DONORS CAROUSEL ========== */
      .recent-donors-section {
        padding: 60px 40px;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }

      .recent-donors-title {
        font-size: 32px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        margin: 0 0 50px 0;
        letter-spacing: 0.5px;
      }

      .donors-carousel-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%);
        border-radius: 12px;
        padding: 30px 0;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
      }

      .donors-carousel-wrapper::before,
      .donors-carousel-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        width: 200px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
      }

      .donors-carousel-wrapper::before {
        left: 0;
        background: linear-gradient(90deg, rgba(243, 154, 35, 0.8) 0%, transparent 100%);
      }

      .donors-carousel-wrapper::after {
        right: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(243, 154, 35, 0.8) 100%);
      }

      .donors-carousel {
        display: flex;
        gap: 40px;
        animation: scroll-left 30s linear infinite;
        padding: 0 40px;
        width: fit-content;
      }

      @keyframes scroll-left {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      .donors-carousel:hover {
        animation-play-state: paused;
      }

      .donor-item {
        flex-shrink: 0;
        min-width: 200px;
        text-align: center;
        background: #fff;
        padding: 20px 28px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 2px solid rgba(204, 52, 39, 0.2);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .donor-item-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
      }

      .donor-item-amount {
        font-size: 16px;
        font-weight: 700;
        color: #2d5016;
        white-space: nowrap;
      }

      .donor-item:hover {
        border-color: #cc3427;
        box-shadow: 0 8px 20px rgba(204, 52, 39, 0.15);
        transform: translateY(-4px);
      }

      /* Loading animation for donors */
      .donor-item.loading {
        opacity: 0.7;
        animation: pulse 1.5s infinite ease-in-out;
      }

      @keyframes pulse {
        0% { opacity: 0.5; }
        50% { opacity: 1; }
        100% { opacity: 0.5; }
      }

      /* Remove old table styles */
      .donors-scroll-container {
        display: none;
      }

      .donors-table {
        display: none;
      }

      .donors-table thead {
        display: none;
      }

      .donors-table th {
        display: none;
      }

      .donors-table tbody tr {
        display: none;
      }

      .donors-table td {
        display: none;
      }

      /* ========== MAJOR DONORS SECTION ========== */
      .major-donors-section {
        padding: 60px 40px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .major-donors-title {
        font-size: 32px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        margin: 0 0 40px 0;
        letter-spacing: 0.5px;
      }

      .major-donors-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
      }

      .major-donor-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        border: 2px solid transparent;
      }

      .major-donor-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(204, 52, 39, 0.2);
        border-color: #cc3427;
      }

      .donor-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        position: relative;
        background: linear-gradient(135deg, #f5e8d3 0%, #faefe4 100%);
      }

      .major-donor-card.featured .donor-photo {
        height: auto;
        aspect-ratio: 3 / 4;
      }

      .donor-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.4s ease;
      }

      .major-donor-card.featured .donor-photo img {
        object-fit: contain;
      }

      .major-donor-card:hover .donor-photo img {
        transform: scale(1.05);
      }

      .major-donor-card.featured {
        /* take a full row in the grid */
        grid-column: 1 / -1;
        /* center the card within that row */
        justify-self: center;
        /* slightly wider than regular cards */
        max-width: 380px;
        width: 100%;
        background: linear-gradient(135deg, #f5e8d3 0%, #faefe4 100%);
        border: 3px solid #cc3427;
      }

      .major-donor-card.featured:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 50px rgba(204, 52, 39, 0.3);
      }

      .donor-rank {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(204, 52, 39, 0.4);
        z-index: 5;
      }

      .donor-info {
        padding: 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      .donor-desc {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin: 0;
        padding: 0;
        line-height: 1.6;
      }

      .donor-amount {
        font-size: 18px;
        font-weight: 700;
        color: #2d5016;
        margin: 0 0 6px 0;
      }

      .donor-category {
        font-size: 13px;
        color: #666;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }

      /* ========== DONATION CTA SECTION ========== */
      .donation-cta-section {
        padding: 80px 40px;
        text-align: center;
        background: linear-gradient(135deg, rgba(204, 52, 39, 0.1) 0%, rgba(204, 52, 39, 0.05) 100%);
      }

      .cta-title {
        font-size: 36px;
        font-weight: 700;
        color: #cc3427;
        margin: 0 0 16px 0;
        letter-spacing: 0.5px;
      }

      .cta-text {
        font-size: 16px;
        color: #333;
        margin: 0 0 32px 0;
        line-height: 1.6;
      }

      .donation-cta-button {
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        border: none;
        border-radius: 28px;
        padding: 16px 48px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        box-shadow: 0 6px 20px rgba(204, 52, 39, 0.3);
      }

      .donation-cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(204, 52, 39, 0.4);
      }

      .donation-cta-button:active {
        transform: translateY(-1px);
      }

      /* Responsive Design for Donations */
      @media (max-width: 768px) {
        .donations-banner {
          height: 240px;
        }

        .donations-banner-title {
          font-size: 36px;
        }

        .donations-banner-subtitle {
          font-size: 16px;
        }

        .seva-banner {
          height: 240px;
        }

        .seva-banner-title {
          font-size: 36px;
        }

        .donations-intro {
          padding: 40px 24px;
        }

        .donations-intro-content {
          padding: 30px 24px;
        }

        .donations-intro-text {
          font-size: 15px;
        }

        .donations-cards-wrapper {
          padding: 40px 24px;
        }

        .donations-cards-grid {
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 30px;
        }

        .donations-card-image {
          height: 180px;
        }

        .donations-card-content {
          padding: 24px 20px;
        }

        .donations-card-title {
          font-size: 20px;
        }

        .donations-card-description {
          font-size: 14px;
        }

        .donations-card-button {
          padding: 12px 28px;
          font-size: 14px;
        }

        /* Recent Donors Responsive */
        .recent-donors-section {
          padding: 40px 24px;
        }

        .recent-donors-title {
          font-size: 28px;
          margin-bottom: 30px;
        }

        .donors-carousel-wrapper {
          padding: 24px 0;
        }

        .donors-carousel-wrapper::before,
        .donors-carousel-wrapper::after {
          width: 150px;
        }

        .donors-carousel {
          gap: 24px;
          padding: 0 24px;
          animation: scroll-left 25s linear infinite;
        }

        .donor-item {
          min-width: 160px;
          font-size: 16px;
          padding: 16px 20px;
        }

        .donor-item-name {
          font-size: 15px;
        }

        .donor-item-amount {
          font-size: 14px;
        }

        /* Major Donors Responsive */
        .major-donors-section {
          padding: 40px 24px;
        }

        .major-donors-title {
          font-size: 28px;
          margin-bottom: 30px;
        }

        .major-donors-grid {
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 24px;
        }

        .major-donor-card {
          padding: 20px;
          gap: 16px;
        }

        /* On smaller screens (incl. many phones), don't cap featured width */
        .major-donor-card.featured {
          max-width: none;
          width: 100%;
          justify-self: stretch;
        }

        .donor-photo {
          height: auto;
          aspect-ratio: 16 / 9;
        }

        .major-donor-card.featured .donor-photo {
          height: auto;
          aspect-ratio: 3 / 4;
        }

        .donor-rank {
          width: 50px;
          height: 50px;
          font-size: 28px;
        }

        .donor-info {
          padding: 20px;
        }

        .donor-desc {
          font-size: 16px;
        }

        .donor-amount {
          font-size: 16px;
        }

        /* CTA Responsive */
        .donation-cta-section {
          padding: 60px 24px;
        }

        .cta-title {
          font-size: 28px;
          margin-bottom: 12px;
        }

        .cta-text {
          font-size: 15px;
          margin-bottom: 24px;
        }

        .donation-cta-button {
          padding: 14px 40px;
          font-size: 15px;
        }
      }

      @media (max-width: 480px) {
        .donations-banner {
          height: 180px;
        }

        .donations-banner-title {
          font-size: 28px;
        }

        .donations-banner-subtitle {
          font-size: 14px;
        }

        .seva-banner {
          height: 180px;
        }

        .seva-banner-title {
          font-size: 28px;
        }

        .donations-intro {
          padding: 30px 16px;
        }

        .donations-intro-content {
          padding: 24px 16px;
        }

        .donations-intro-text {
          font-size: 14px;
          line-height: 1.6;
        }

        .donations-cards-wrapper {
          padding: 30px 16px;
        }

        .donations-cards-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .donations-card {
          border-radius: 12px;
        }

        .donations-card-image {
          height: 160px;
        }

        .donations-card-content {
          padding: 20px 16px;
        }

        .donations-card-title {
          font-size: 18px;
          margin-bottom: 12px;
        }

        .donations-card-description {
          font-size: 13px;
          margin-bottom: 18px;
        }

        .donations-card-button {
          padding: 11px 24px;
          font-size: 13px;
        }

        .donations-card-badge {
          font-size: 11px;
          padding: 5px 12px;
        }

        /* Recent Donors Mobile */
        .recent-donors-section {
          padding: 30px 16px;
        }

        .recent-donors-title {
          font-size: 24px;
          margin-bottom: 20px;
        }

        .donors-carousel-wrapper {
          padding: 20px 0;
          border-radius: 8px;
        }

        .donors-carousel-wrapper::before,
        .donors-carousel-wrapper::after {
          width: 80px;
        }

        .donors-carousel {
          gap: 16px;
          padding: 0 16px;
          animation: scroll-left 20s linear infinite;
        }

        .donor-item {
          min-width: 120px;
          font-size: 14px;
          padding: 12px 16px;
          border-radius: 6px;
        }

        .donor-item-name {
          font-size: 13px;
          font-weight: 500;
        }

        .donor-item-amount {
          font-size: 12px;
          font-weight: 700;
        }

        /* Major Donors Mobile */
        .major-donors-section {
          padding: 30px 16px;
        }

        .major-donors-title {
          font-size: 24px;
          margin-bottom: 20px;
        }

        .major-donors-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .major-donor-card {
          padding: 16px;
          gap: 12px;
        }

        /* On mobile, make featured card behave exactly like others (only border/color differ) */
        .major-donor-card.featured {
          grid-column: auto;
          justify-self: stretch;
          max-width: none;
          width: 100%;
        }

        .donor-photo {
          height: auto;
          aspect-ratio: 16 / 9;
        }

        .major-donor-card.featured .donor-photo {
          height: auto;
          aspect-ratio: 3 / 4;
        }

        .donor-rank {
          width: 45px;
          height: 45px;
          font-size: 24px;
          top: 10px;
          right: 10px;
        }

        .donor-info {
          padding: 16px;
        }

        .donor-desc {
          font-size: 15px;
        }

        .donor-amount {
          font-size: 15px;
          margin-bottom: 4px;
        }

        .donor-category {
          font-size: 12px;
        }

        /* CTA Mobile */
        .donation-cta-section {
          padding: 40px 16px;
        }

        .cta-title {
          font-size: 24px;
          margin-bottom: 10px;
        }

        .cta-text {
          font-size: 14px;
          margin-bottom: 20px;
        }

        .donation-cta-button {
          padding: 12px 32px;
          font-size: 14px;
        }
      }
        .seva-cards-grid {
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 30px;
        }

        .seva-card-image {
          height: 180px;
        }
      

      @media (max-width: 480px) {
        .seva-cards-wrapper {
          padding: 40px 0;
        }

        .seva-cards-grid {
          grid-template-columns: 1fr;
          gap: 24px;
          padding: 0 16px;
        }

        .seva-card-image {
          height: 160px;
        }

        .seva-card-title {
          font-size: 18px;
          padding: 20px 18px 10px;
        }

        .seva-card-description {
          font-size: 13px;
          padding: 0 18px 16px;
        }

        .seva-card-link {
          padding: 0 18px 16px;
          font-size: 13px;
        }

        .seva-card-button {
          margin: 0 18px 20px;
          padding: 12px 28px;
          font-size: 13px;
        }
      }

      /* ========== SEVA CARDS SECTION ========== */
      .seva-cards-section {
        max-width: 1200px;
        margin: 0 auto;
      }

      .seva-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        margin: 0;
      }

      /* Card Styling */
      .seva-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .seva-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
      }

      .seva-card-image {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        background: transparent;
      }

      .seva-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      .seva-card-title {
        font-family: "Ramabhadra", serif;
        font-size: 22px;
        font-weight: 700;
        color: #cc3427;
        text-align: center;
        padding: 28px 24px 14px;
        margin: 0;
      }

      .seva-card-description {
        font-size: 15px;
        color: #666;
        text-align: center;
        padding: 0 24px 20px;
        line-height: 1.7;
        flex-grow: 1;
      }

      .seva-card-link {
        text-align: center;
        color: #cc3427;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        padding: 0 24px 22px;
        transition: all 0.3s ease;
        display: inline-block;
        align-self: center;
      }

      .seva-card-link span {
        margin-left: 6px;
        display: inline-block;
        transition: transform 0.3s ease;
      }

      .seva-card-link:hover span {
        transform: translateX(4px);
      }

      .seva-card-link:hover {
        color: #b02121;
      }

      .seva-card-button {
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        border: none;
        border-radius: 28px;
        padding: 14px 36px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        margin: 0 24px 28px;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .seva-card-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(204, 52, 39, 0.35);
      }
      /* ========== CONTACT PAGE STYLES ========== */

      /* Contact Banner */
      .contact-banner {
        position: relative;
        width: 100%;
        height: 320px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -72px;
        padding-top: 72px;
      }

      .contact-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 600\"><path d=\"M0,300 Q300,200 600,300 T1200,300 L1200,600 L0,600 Z\" fill=\"rgba(255,255,255,0.05)\"/></svg>') center/cover;
        opacity: 0.1;
        z-index: 1;
      }

      .contact-banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1;
      }

      .contact-banner-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #fff;
        padding: 0 20px;
        animation: fadeInDown 0.8s ease-out;
      }

      .contact-banner-content h1 {
        font-family: 'Ramabhadra', 'Noto Sans Telugu', serif;
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 12px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        letter-spacing: 1px;
      }

      .contact-banner-content p {
        font-size: 18px;
        font-weight: 400;
        opacity: 1;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
      }

      /* Contact Information Section */
      .contact-info-section {
        padding: 80px 40px;
        background: transparent;
        max-width: 1400px;
        margin: 0 auto;
      }

      .contact-intro {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px;
      }

      .contact-intro h2 {
        font-family: 'Ramabhadra', 'Noto Sans Telugu', serif;
        font-size: 32px;
        color: #cc3427;
        margin-bottom: 20px;
        font-weight: 700;
        letter-spacing: 0.5px;
      }

      .contact-intro p {
        font-size: 18px;
        color: #fff;
        line-height: 1.8;
        opacity: 0.9;
      }

      .contact-details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 32px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .contact-detail-card {
        background: #fff;
        border-radius: 16px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        border: 2px solid transparent;
      }

      .contact-detail-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(204, 52, 39, 0.2);
        border-color: #cc3427;
      }

      .contact-icon {
        width: 72px;
        height: 72px;
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        color: #fff;
        transition: transform 0.3s ease;
      }

      .contact-detail-card:hover .contact-icon {
        transform: scale(1.1) rotate(5deg);
      }

      .contact-detail-card h3 {
        font-family: 'Ramabhadra', 'Noto Sans Telugu', serif;
        font-size: 24px;
        color: #333;
        margin-bottom: 16px;
        font-weight: 700;
      }

      .contact-detail-card p {
        font-size: 16px;
        color: #666;
        margin: 8px 0;
        line-height: 1.6;
      }

      .contact-detail-card a {
        color: #cc3427;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
      }

      .contact-detail-card a:hover {
        color: #b02121;
        text-decoration: underline;
      }

      /* Map Section */
      .contact-map-section {
        padding: 80px 40px;
        background: transparent;
      }

      .map-container {
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.1);
      }

      .map-container iframe {
        display: block;
        width: 100%;
        min-height: 600px;
      }

      /* Contact Form Section */
      .contact-form-section {
        padding: 80px 40px;
        background: linear-gradient(135deg, rgba(204, 52, 39, 0.1) 0%, rgba(204, 52, 39, 0.05) 100%);
      }

      .contact-form-container {
        max-width: 800px;
        margin: 0 auto;
      }

      .contact-form {
        background: #fff;
        padding: 48px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        border: 2px solid transparent;
      }

      .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 24px;
      }

      .form-group {
        display: flex;
        flex-direction: column;
      }

      .form-group label {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }

      .form-group input,
      .form-group textarea {
        padding: 14px 16px;
        font-size: 15px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        transition: all 0.3s ease;
        background: #fafafa;
      }

      .form-group input:focus,
      .form-group textarea:focus {
        outline: none;
        border-color: #cc3427;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(204, 52, 39, 0.1);
      }

      .form-group textarea {
        resize: vertical;
        min-height: 150px;
      }

      .submit-btn {
        width: 100%;
        background: linear-gradient(135deg, #cc3427 0%, #b02121 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 12px;
      }

      .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(204, 52, 39, 0.35);
      }

      .submit-btn:active {
        transform: translateY(0);
      }

      /* Responsive Contact Page */
      @media (max-width: 768px) {
        .contact-banner {
          height: 300px;
        }

        .contact-banner-content h1 {
          font-size: 40px;
        }

        .contact-banner-content p {
          font-size: 16px;
        }

        .contact-info-section,
        .contact-map-section,
        .contact-form-section {
          padding: 50px 24px;
        }

        .contact-intro h2 {
          font-size: 32px;
        }

        .contact-intro p {
          font-size: 16px;
        }

        .contact-details-grid {
          gap: 24px;
        }

        .contact-detail-card {
          padding: 32px 24px;
        }

        .contact-form {
          padding: 32px 24px;
        }

        .form-row {
          grid-template-columns: 1fr;
          gap: 20px;
          margin-bottom: 20px;
        }

        .map-container iframe {
          min-height: 400px;
        }
      }

      @media (max-width: 480px) {
        .contact-banner {
          height: 250px;
        }

        .contact-banner-content h1 {
          font-size: 32px;
        }

        .contact-banner-content p {
          font-size: 14px;
        }

        .contact-info-section,
        .contact-map-section,
        .contact-form-section {
          padding: 40px 16px;
        }

        .contact-intro h2 {
          font-size: 28px;
          margin-bottom: 16px;
        }

        .contact-intro p {
          font-size: 15px;
        }

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

        .contact-detail-card {
          padding: 28px 20px;
        }

        .contact-icon {
          width: 60px;
          height: 60px;
        }

        .contact-icon svg {
          width: 28px;
          height: 28px;
        }

        .contact-detail-card h3 {
          font-size: 20px;
        }

        .contact-detail-card p {
          font-size: 14px;
        }

        .contact-form {
          padding: 24px 20px;
        }

        .form-group input,
        .form-group textarea {
          padding: 12px 14px;
          font-size: 14px;
        }

        .submit-btn {
          padding: 14px 28px;
          font-size: 14px;
        }

        .map-container iframe {
          min-height: 300px;
        }
      }