:root{
      --bg:#f5f7fb;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#6b7280;
      --pri:#0ea5e9;
      --ok:#16a34a;
      --warn:#eab308;
      --err:#dc2626;
      --ring: 0 0 0 3px rgba(14,165,233,.25);
      --radius:18px;
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      --chip:#eef2ff;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: "Arial Unicode MS", "Lucida Sans Unicode", Arial, sans-serif;
      color:var(--text); background:linear-gradient(180deg,#fff 0%, var(--bg) 100%);
    }
    header{
       top:0; z-index:5;
      background:linear-gradient(90deg,#ff9f1c, #ffffff, #2ecc71);
      padding:18px 16px; box-shadow:0 6px 16px rgba(0,0,0,.06);
    }
    .brand{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px}
    .brand .title{font-size:clamp(18px,3vw,24px); font-weight:700; letter-spacing:.2px}
    .wrap{max-width:1100px; margin:24px auto; padding:0 16px 40px}
    .card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
    .card-head{padding:22px 22px 10px; flex-wrap:wrap; align-items:end;     color: blue; gap:10px}
    .card-head h2{margin:0; font-size:clamp(20px,3.2vw,28px)}
    .badge{padding:6px 10px; background:#ecfeff; color:#0369a1; border-radius:999px; font-size:12px; font-weight:600}
    form{padding:10px 22px 22px}
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
    @media (max-width:880px){.grid{grid-template-columns:repeat(6,1fr)}}
    @media (max-width:540px){.grid{grid-template-columns:repeat(2,1fr)}}
    .field{grid-column:span 6; display:flex; flex-direction:column; gap:6px}
    .field.span-12{grid-column:span 12}
    .label{font-weight:800; font-size:20px}
    .hint{font-size:12px; color:var(--muted)}
    input[type="text"], input[type="email"], input[type="number"], textarea, select{
      width:100%; padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; color:var(--text);
      transition:.2s border-color, .2s box-shadow;
    }
    input:focus, textarea:focus, select:focus{outline:none; border-color:var(--pri); box-shadow:var(--ring)}
    textarea{min-height:96px; resize:vertical}
    .row{display:flex; gap:14px; flex-wrap:wrap}
    .radio{
      display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:999px;
      cursor:pointer; user-select:none;
    }
    .radio input{accent-color:var(--pri)}
    .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
    .chip{background:var(--chip); padding:6px 10px; border-radius:999px; font-size:12px}
    .controls{display:flex; gap:10px; justify-content:flex-end; padding:10px 22px 22px}
    .btn{appearance:none; border:0; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer}
    .btn.primary{background:var(--pri); color:#fff}
    .btn.ghost{background:#f1f5f9}
    .btn.print{background:var(--ok); color:#fff}
    .req{color:var(--err)}
    .counter{font-size:12px; color:var(--muted); text-align:right}
    .toast{position:fixed; right:18px; bottom:18px; background:#111827; color:#fff; padding:12px 14px; border-radius:12px; opacity:0; transform:translateY(8px); transition:.2s; box-shadow:var(--shadow)}
    .toast.show{opacity:1; transform:translateY(0)}
    .error{border-color:var(--err)!important}
    .error-text{font-size:12px; color:var(--err)}
    footer{max-width:1100px;margin:12px auto 40px; padding:0 16px; color:var(--muted); font-size:12px}
    @media print{
      header,.controls,.toast{display:none!important}
      body{background:#fff}
      .card{box-shadow:none}
      input,textarea,select{border-color:#d1d5db}
    }

    .btn.primary{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#fff;
  transition:.3s;
}
.btn.primary:hover{background:linear-gradient(135deg,#2563eb,#0ea5e9); transform:translateY(-2px);}

.btn.reset{
  background:linear-gradient(135deg,#f97316,#f59e0b);
  color:#fff;
  transition:.3s;
}
.btn.reset:hover{background:linear-gradient(135deg,#f59e0b,#f97316); transform:translateY(-2px);}

.btn.print{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  transition:.3s;
}
.btn.print:hover{background:linear-gradient(135deg,#22c55e,#16a34a); transform:translateY(-2px);}

.bod{
  border: 1px solid black;
}


/* Base Button */
.custom-btn {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Success Button */
.success-btn {
  background: linear-gradient(135deg, #00c853, #4caf50);
  color: #fff;
}
.success-btn:hover {
  background: linear-gradient(135deg, #4caf50, #00c853);
  transform: translateY(-2px);
}

/* Primary Button */
.primary-btn {
  background: linear-gradient(135deg, #ff6600, #ff9900);
  color: #fff;
}
.primary-btn:hover {
  background: linear-gradient(135deg, #ff9900, #ff6600);
  transform: translateY(-2px);
}

/* Click effect */
.custom-btn:active {
  transform: scale(0.95);
}


.blink-link {
      display:inline-block;
      margin-left:10px;
      padding:10px 16px;
      font-size:15px;
      text-decoration:none;
      border-radius:6px;
      border:2px solid #d33;
      color:#d33;
      background: rgba(255,230,230,0.9);
      cursor:pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform .12s ease;
      vertical-align: middle;
      font-weight:600;
    }
    .blink-link:active{ transform: translateY(1px); }

    /* softer blink animation (accessibility-friendly) */
    @keyframes gentle-blink {
      0%   { opacity: 1; transform: translateY(0); }
      50%  { opacity: 0.35; transform: translateY(-1px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .blink {
      animation: gentle-blink 1.4s ease-in-out infinite;
    }

    /* focus-visible for keyboard users */
    .blink-link:focus {
      outline: 3px solid rgba(211,33,33,0.25);
      outline-offset: 3px;
    }

    /* Print: hide interactive controls */
    @media print {
      .blink-link { display:none; }
    }
	
	.bgcolor{

    text-decoration: none;
    color: white;
    font-size: 18px;

	
	}
	
	
	/*new css link*/
@media screen and (min-width: 480px) {
  .exmaple {
    background-color: lightgreen;
  }
}
@media screen and (max-width: 600px) {
.example {
    font-size: 30px;
  }
}