/* SECTION BACKGROUND */
      .kirana-download-section {
        background: linear-gradient(135deg, #f8fbff, #eef5ff);
      }

      /* TITLE */
      .main-title {
        font-size: 36px;
        color: #0b3d91;
      }

      .sub-text {
        max-width: 750px;
        color: #6c757d;
      }

      /* CARD */
      .template-card {
        background: #fff;
        border-radius: 18px;
        padding: 20px;
        text-align: center;
        position: relative;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
      }
      .template-card {
        filter: blur(0);
        opacity: 1;
      }

      .template-card img {
        width: 100%;
        border-radius: 12px;
        margin-bottom: 15px;
      }

      /* HOVER EFFECT */
      .template-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      }
      /* ✅ ACTIVE CARD (NO BLUR) */
      .template-card:hover {
        filter: blur(0) !important;
        opacity: 1 !important;
        z-index: 20;
      }

      /* BADGE */
      .template-card .badge {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 50px;
        color: #fff;
        letter-spacing: 0.5px;
      }


      .badge.bg-success {
  color: #fff !important;
}

      /* POPULAR CARD HIGHLIGHT */
      .template-card.popular {
        border: 2px solid #ffc107;
      }

      /* BUTTON */
      .download-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 18px;
        background: #0b3d91;
        color: #fff;
        border-radius: 50px;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
      }

      .download-btn:hover {
        background: #082c6c;
      }
      /* 🔥 PREVIEW BOX (CENTER BIG) */
      .preview-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.6);

        width: 75%;
        max-width: 900px;
        height: 80vh;

        background: #fff;
        border-radius: 18px;
        padding: 15px;

        box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);

        opacity: 0;
        pointer-events: none;
        transition: all 0.35s ease;

        z-index: 9999;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      /* IMAGE */
      .preview-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 10px;
        background: #fff;
      }

      /* 🚀 SHOW PREVIEW */
      .template-card:hover .preview-box {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
      }

      /* DEFAULT (NO BLUR) */
      .template-card {
        filter: blur(0);
        opacity: 1;
        transition: all 0.3s ease;
      }

      /* BLUR OTHER CARDS */
      .template-card.blurred {
        filter: blur(4px);
        opacity: 0.3;
        transform: scale(0.95);
      }

      .template-card:hover {
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.2),
          0 0 20px rgba(59, 130, 246, 0.4);
      }

      /* ACTIVE CARD */
      .template-card:hover {
        filter: blur(0) !important;
        opacity: 1 !important;
        transform: scale(1.05);
        z-index: 20;
      }

      /* ✨ DOWNLOAD BUTTON INSIDE PREVIEW */
      .preview-download-btn {
        margin-top: 10px;
        padding: 10px 25px;

        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;

        border-radius: 50px;
        text-align: center;
        text-decoration: none;
        font-weight: 600;

        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);

        transition: 0.3s;
      }

      /* HOVER BUTTON */
      .preview-download-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(37, 99, 235, 0.6);
      }

      /* 🔥 CARD IMAGE EFFECT */
      .template-card img {
        transition: 0.3s;
      }

      .template-card:hover img {
        transform: scale(1.05);
      }

      /* 🎬 ANIMATION */
      .template-card:hover .preview-box {
        animation: zoomIn 0.35s ease;
      }

      @keyframes zoomIn {
        from {
          transform: translate(-50%, -50%) scale(0.6);
          opacity: 0;
        }
        to {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
      }