{"id":11,"date":"2026-05-05T07:27:47","date_gmt":"2026-05-05T07:27:47","guid":{"rendered":"https:\/\/gascuthiramerur.in\/?page_id=11"},"modified":"2026-05-05T07:48:37","modified_gmt":"2026-05-05T07:48:37","slug":"home","status":"publish","type":"page","link":"https:\/\/gascuthiramerur.in\/","title":{"rendered":"Home"},"content":{"rendered":"<p><!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n   <head><br \/>\n      <meta charset=\"UTF-8\"><br \/>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n      <!-- Bootstrap & Bootstrap Icons -->\n      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/>\n      <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\" \/>\n<style>\n        @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format(\"woff2\");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format(\"woff2\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiEyp8kv8JHgFVrJJfecg.woff2) format(\"woff2\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format(\"woff2\");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format(\"woff2\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format(\"woff2\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format(\"woff2\");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format(\"woff2\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format(\"woff2\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format(\"woff2\");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format(\"woff2\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format(\"woff2\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format(\"woff2\");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format(\"woff2\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}\n@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(https:\/\/fonts.gstatic.com\/s\/poppins\/v24\/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format(\"woff2\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}<\/p>\n<p>:root{--bg:#f8fafc;--fg:#0f172a;--muted:#64748b;--muted-bg:#f1f5f9;--border:#e2e8f0;--card:#fff;--card-border:#e2e8f0;--primary:#3b82f6;--primary-2:#2563eb;--input-bg:#fff;--shadow-lg:0 8px 24px #0000001a 0 4px 6px -1px #0000000d;--shadow-xl:0 16px 40px #0000001f 0 8px 10px -1px #0000000d;--safe:#16a34a;--safe-bg:#dcfce7;--safe-border:#bbf7d0;--warn:#d97706;--warn-bg:#fef9c3;--warn-border:#fde68a;--danger:#dc2626;--danger-bg:#fee2e2;--danger-border:#fecaca}\nhtml.dark{--bg:#0b1220;--fg:#e2e8f0;--muted:#94a3b8;--muted-bg:#111a2e;--border:#1e293b;--card:#111a2e;--card-border:#1e293b;--primary:#3b82f6;--primary-2:#60a5fa;--input-bg:#0f1a30;--safe:#22c55e;--safe-bg:#14532d59;--safe-border:#14532d;--warn:#f59e0b;--warn-bg:#78350f4d;--warn-border:#78350f;--danger:#ef4444;--danger-bg:#7f1d1d59;--danger-border:#7f1d1d}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:'Poppins',system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;background:var(--bg);color:var(--fg);margin:0;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}\na{text-decoration:none}\n.text-muted-c{color:var(--muted)!important}\n.app-header{position:sticky;top:0;z-index:1040}\n.app-header .topbar{background:linear-gradient(90deg,#6d28d9 0%,#7c3aed 50%,#4f46e5 100%);box-shadow:0 4px 24px 0 #6d28d959}\n.app-header .topbar-inner{max-width:1024px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}\n.brand{display:flex;align-items:center;gap:8px;user-select:none}\n.brand-text{line-height:1.1;color:#fff;font-weight:700;font-size:14px}\n.brand-text .small-only{font-size:12px}\n.nav-pill{padding:8px 16px;border-radius:999px;color:#ddd6fe;font-weight:500;font-size:14px;white-space:nowrap;transition:all .2s ease;cursor:pointer}\n.nav-pill:hover{color:#7dd3fc;background:#ffffff26}\n.nav-icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid #fff3;background:#ffffff1a;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease}\n.nav-icon-btn:hover{background:#fff3}\n.contact-menu .dropdown-menu{background:#0f172a;border:1px solid #ffffff1a;border-radius:12px;padding:6px 0;box-shadow:0 14px 40px #0006;min-width:192px}\n.contact-menu .dropdown-item{color:#cbd5e1;font-size:14px;padding:10px 16px}\n.contact-menu .dropdown-item:hover{background:#ffffff14;color:#7dd3fc}\n.mobile-panel{background:#0f172a;border-top:1px solid #ffffff1a;display:none}\n.mobile-panel.show{display:block;animation:fadeIn .25s ease}\n.mobile-panel a{display:flex;align-items:center;height:40px;padding:0 12px;color:#cbd5e1;font-size:14px;font-weight:500;border-radius:8px}\n.mobile-panel a:hover{color:#fff;background:#ffffff1a}\n.mobile-panel .legal-label{font-size:11px;color:#64748b;padding:6px 12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}\n.mobile-panel .divider{height:1px;background:#ffffff1a;margin:4px 0}\n.hero{padding:12px 16px 24px}\n@media (min-width: 576px) {\n.hero{padding:20px 24px 40px}\n}\n.hero h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;line-height:1.1}\n@media (min-width: 576px) {\n.hero h1{font-size:36px}\n}\n@media (min-width: 992px) {\n.hero h1{font-size:48px}\n}\n.hero h1 .accent{color:var(--primary)}\n.hero p.lead{color:var(--muted);font-size:16px;max-width:600px;margin:0 auto 32px}\n@media (min-width: 576px) {\n.hero p.lead{font-size:18px}\n}\n.calc-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow-lg);padding:24px;text-align:left}\n@media (min-width: 576px) {\n.calc-card{padding:32px}\n}\n.form-label-c{display:block;font-size:14px;font-weight:500;margin-bottom:4px;color:var(--fg)}\n.form-input{width:100%;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--border);background:var(--input-bg);color:var(--fg);font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}\n.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f640}\n.form-input.is-invalid{border-color:#f87171}\n.form-input.is-invalid:focus{box-shadow:0 0 0 3px #fecaca99}\n.form-help{margin-top:4px;font-size:12px;color:var(--muted)}\n.form-error{margin-top:4px;font-size:12px;color:#ef4444}\n.btn-primary-c{flex:1;height:44px;border-radius:12px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:opacity .15s ease,transform .1s ease;box-shadow:0 1px 2px #0000000f}\n.btn-primary-c:hover{opacity:.9}\n.btn-primary-c:active{transform:scale(.98)}\n.btn-icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}\n.btn-icon:hover{background:var(--muted-bg)}\n.result-card{margin-top:24px;border-radius:12px;border:1px solid;padding:20px;animation:scaleIn .35s ease forwards}\n.result-card.safe{background:var(--safe-bg);border-color:var(--safe-border)}\n.result-card.warning{background:var(--warn-bg);border-color:var(--warn-border)}\n.result-card.danger{background:var(--danger-bg);border-color:var(--danger-border)}\n.result-pct{font-size:48px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center}\n.result-pct.safe{color:var(--safe)}\n.result-pct.warning{color:var(--warn)}\n.result-pct.danger{color:var(--danger)}\n.result-status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;margin-top:6px}\n.result-status.safe{color:var(--safe)}\n.result-status.warning{color:var(--warn)}\n.result-status.danger{color:var(--danger)}\n.progress-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}\n.progress-bar-c{position:relative;height:12px;border-radius:999px;background:#0000000f;overflow:hidden;border:1px solid var(--border)}\nhtml.dark .progress-bar-c{background:#ffffff0f}\n.progress-bar-fill{height:100%;border-radius:999px;transition:width .7s ease}\n.progress-bar-fill.safe{background:#10b981}\n.progress-bar-fill.warning{background:#f59e0b}\n.progress-bar-fill.danger{background:#ef4444}\n.progress-marker{position:absolute;top:0;bottom:0;width:2px;background:#0000004d}\nhtml.dark .progress-marker{background:#fff6}\n.bunk-card{border-radius:16px;padding:20px;border:2px solid;cursor:default;user-select:none;transition:transform .2s ease,box-shadow .2s ease;animation:bunkReveal .45s cubic-bezier(.34,1.56,.64,1) forwards}\n.bunk-card.has{background:#dcfce7b3;border-color:#86efac}\n.bunk-card.no{background:#fee2e2b3;border-color:#fca5a5}\nhtml.dark .bunk-card.has{background:#14532d66;border-color:#166534}\nhtml.dark .bunk-card.no{background:#7f1d1d66;border-color:#991b1b}\n.bunk-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}\n.bunk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}\n.bunk-title{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}\n.bunk-card.has .bunk-title,.bunk-card.has .bunk-icon{color:#15803d}\n.bunk-card.no .bunk-title,.bunk-card.no .bunk-icon{color:#dc2626}\nhtml.dark .bunk-card.has .bunk-title,html.dark .bunk-card.has .bunk-icon{color:#4ade80}\nhtml.dark .bunk-card.no .bunk-title,html.dark .bunk-card.no .bunk-icon{color:#f87171}\n.bunk-pill{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px}\n.bunk-card.has .bunk-pill{background:#d1fae5;color:#15803d}\n.bunk-card.no .bunk-pill{background:#fee2e2;color:#b91c1c}\nhtml.dark .bunk-card.has .bunk-pill{background:#14532d80;color:#6ee7b7}\nhtml.dark .bunk-card.no .bunk-pill{background:#7f1d1d80;color:#fca5a5}\n.bunk-num{font-size:60px;font-weight:800;text-align:center;margin:12px 0;font-variant-numeric:tabular-nums}\n.bunk-card.has .bunk-num{color:#16a34a}\n.bunk-card.no .bunk-num{color:#ef4444}\nhtml.dark .bunk-card.has .bunk-num{color:#4ade80}\nhtml.dark .bunk-card.no .bunk-num{color:#f87171}\n.bunk-msg{text-align:center;font-size:14px;font-weight:500}\n.bunk-card.has .bunk-msg{color:#15803d}\n.bunk-card.no .bunk-msg{color:#b91c1c}\nhtml.dark .bunk-card.has .bunk-msg{color:#6ee7b7}\nhtml.dark .bunk-card.no .bunk-msg{color:#fca5a5}\n.stat-card{background:#fff9;border:1px solid #00000014;border-radius:8px;padding:12px}\nhtml.dark .stat-card{background:#ffffff0d;border-color:#ffffff1a}\n.stat-card .lbl{font-size:12px;color:var(--muted);margin-bottom:2px}\n.stat-card .val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}\n.stat-card .val.warn{color:var(--warn)}\n.stat-card .note{font-size:12px;color:var(--muted);margin-top:2px}\n.btn-pdf{width:100%;height:40px;border-radius:12px;border:1px solid var(--border);background:#fff9;font-size:14px;font-weight:500;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s ease}\nhtml.dark .btn-pdf{background:#ffffff0d}\n.btn-pdf:hover{background:var(--card)}\nhtml.dark .btn-pdf:hover{background:#ffffff14}\n.predict-card{margin-top:20px;border-radius:12px;border:1px solid var(--border);background:var(--card);padding:20px;animation:fadeIn .3s ease forwards}\n.predict-card h2{font-size:16px;font-weight:600;margin:0 0 2px}\n.predict-card p{font-size:12px;color:var(--muted);margin:0 0 16px}\n.predict-table-wrap{border-radius:8px;border:1px solid var(--border);overflow:hidden;overflow-x:auto}\n.predict-table{width:100%;font-size:14px;border-collapse:collapse;margin:0}\n.predict-table thead tr{background:#0000000a;color:var(--muted)}\nhtml.dark .predict-table thead tr{background:#ffffff0a}\n.predict-table th{padding:10px 16px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}\n.predict-table th:first-child{text-align:left}\n.predict-table th:not(:first-child){text-align:center}\n.predict-table td{padding:10px 16px;border-top:1px solid var(--border)}\n.predict-table td.cell-mid{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}\n.predict-table tr:hover td{background:#00000006}\nhtml.dark .predict-table tr:hover td{background:#ffffff08}\n.status-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}\n.status-badge.safe{background:#d1fae5;color:#15803d}\n.status-badge.warning{background:#fef3c7;color:#92400e}\n.status-badge.danger{background:#fee2e2;color:#b91c1c}\nhtml.dark .status-badge.safe{background:#14532d66;color:#6ee7b7}\nhtml.dark .status-badge.warning{background:#78350f66;color:#fcd34d}\nhtml.dark .status-badge.danger{background:#7f1d1d66;color:#fca5a5}\n.cell-pct.safe{color:var(--safe)}\n.cell-pct.warning{color:var(--warn)}\n.cell-pct.danger{color:var(--danger)}\n.section{padding:56px 16px}\n@media (min-width: 576px) {\n.section{padding:56px 24px}\n}\n.section.muted{background:#f1f5f999;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}\nhtml.dark .section.muted{background:#0f172a8c}\n.section.bordered{border-top:1px solid var(--border)}\n.section h2{font-size:24px;font-weight:700;text-align:center;margin:0 0 40px}\n@media (min-width: 576px) {\n.section h2{font-size:28px}\n}\n.section .sub-h{text-align:center;color:var(--muted);margin:-28px 0 32px;font-size:14px}\n@media (min-width: 576px) {\n.section .sub-h{font-size:16px}\n}\n.gradient-card{border:1px solid;border-radius:16px;padding:20px;transition:transform .3s ease,box-shadow .3s ease;cursor:default}\n.gradient-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}\n.g-blue{background:linear-gradient(135deg,#3b82f61a,#6366f11a);border-color:#bfdbfe}\n.g-violet{background:linear-gradient(135deg,#8b5cf61a,#a855f71a);border-color:#ddd6fe}\n.g-amber{background:linear-gradient(135deg,#f59e0b1a,#f973161a);border-color:#fde68a}\n.g-emerald{background:linear-gradient(135deg,#10b9811a,#14b8a61a);border-color:#a7f3d0}\n.g-pink{background:linear-gradient(135deg,#ec48991a,#f43f5e1a);border-color:#fbcfe8}\n.g-cyan{background:linear-gradient(135deg,#06b6d41a,#0ea5e91a);border-color:#a5f3fc}\nhtml.dark .g-blue{border-color:#1e3a8a}\nhtml.dark .g-violet{border-color:#4c1d95}\nhtml.dark .g-amber{border-color:#78350f}\nhtml.dark .g-emerald{border-color:#064e3b}\nhtml.dark .g-pink{border-color:#831843}\nhtml.dark .g-cyan{border-color:#155e75}\n.step-circle{width:44px;height:44px;border-radius:50%;color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-lg)}\n.step-circle.b1{background:#3b82f6}\n.step-circle.b2{background:#8b5cf6}\n.step-circle.b3{background:#10b981}\n.gradient-card h3{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--fg)}\n.gradient-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}\n.gradient-card .icon{font-size:20px;flex-shrink:0;margin-top:2px}\n.icon-blue{color:#2563eb}\nhtml.dark .icon-blue{color:#60a5fa}\n.icon-violet{color:#7c3aed}\nhtml.dark .icon-violet{color:#a78bfa}\n.icon-amber{color:#f59e0b}\n.icon-emerald{color:#059669}\nhtml.dark .icon-emerald{color:#34d399}\n.icon-pink{color:#ec4899}\n.icon-cyan{color:#06b6d4}\n.styled-table-wrap{border-radius:16px;border:1px solid;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}\n.styled-table-wrap:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}\n.tbl-blue{background:linear-gradient(135deg,#3b82f61a,#6366f11a);border-color:#bfdbfe}\n.tbl-violet{background:linear-gradient(135deg,#8b5cf61a,#a855f71a);border-color:#ddd6fe}\nhtml.dark .tbl-blue{border-color:#1e3a8a}\nhtml.dark .tbl-violet{border-color:#4c1d95}\n.tbl-blue thead tr{background:#3b82f633}\n.tbl-violet thead tr{background:#8b5cf633}\nhtml.dark .tbl-blue thead tr{background:#1e3a8a66}\nhtml.dark .tbl-violet thead tr{background:#4c1d9566}\n.tbl-blue th{color:#1e40af}\n.tbl-violet th{color:#5b21b6}\nhtml.dark .tbl-blue th{color:#93c5fd}\nhtml.dark .tbl-violet th{color:#c4b5fd}\n.styled-table{width:100%;border-collapse:collapse;font-size:14px}\n.styled-table th,.styled-table td{padding:14px 24px;text-align:left}\n.styled-table tbody tr td{border-top:1px solid}\n.tbl-blue tbody tr td{border-color:#3b82f64d}\n.tbl-violet tbody tr td{border-color:#8b5cf64d}\nhtml.dark .tbl-blue tbody tr td{border-color:#1e3a8a80}\nhtml.dark .tbl-violet tbody tr td{border-color:#4c1d9580}\n.styled-table .big{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}\n.color-success{color:#16a34a}\n.color-success-dark{color:#16a34a}\nhtml.dark .color-success-dark{color:#4ade80}\n.color-danger{color:#ef4444;font-weight:500}\n.info-card{background:linear-gradient(135deg,#6366f11a,#3b82f61a);border:1px solid #c7d2fe;border-radius:16px;padding:24px;transition:transform .3s ease,box-shadow .3s ease}\nhtml.dark .info-card{border-color:#3730a3}\n.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}\n.info-card p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}\n.info-card strong{color:var(--fg)}\n.chip-card{border:1px solid;border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:500;transition:transform .3s ease,box-shadow .3s ease}\n.chip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}\n.faq-item{background:var(--card);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;margin-bottom:12px}\n.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:14px;font-weight:500;text-align:left;background:transparent;border:0;color:var(--fg);cursor:pointer;transition:background .15s ease}\n.faq-q:hover{background:#00000008}\nhtml.dark .faq-q:hover{background:#ffffff0a}\n.faq-q i{color:var(--muted);flex-shrink:0}\n.faq-a{display:none;padding:0 20px 16px;font-size:14px;color:var(--muted);line-height:1.6;border-top:1px solid var(--border)}\n.faq-a.show{display:block;animation:fadeIn .25s ease}\n.faq-a p{padding-top:12px;margin:0}\n.about-heading{display:inline-block;padding:8px 24px;border-radius:12px;background:linear-gradient(90deg,#7c3aed,#4f46e5);color:#fff;font-weight:800;box-shadow:var(--shadow-lg);letter-spacing:-.01em}\n.about-card{display:flex;flex-direction:column;gap:32px;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg);transition:transform .3s ease,box-shadow .3s ease}\n@media (min-width: 576px) {\n.about-card{flex-direction:row;padding:32px}\n}\n.about-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}\n.about-photo{width:176px;height:224px;object-fit:cover;object-position:top;border-radius:16px;box-shadow:var(--shadow-xl);outline:4px solid #ddd6fe;outline-offset:0}\nhtml.dark .about-photo{outline-color:#4c1d95}\n.about-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}\n.about-name{font-weight:700;font-size:16px}\n.about-role{font-size:11px;font-weight:600;color:#7c3aed;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}\nhtml.dark .about-role{color:#a78bfa}\n.about-bio{color:var(--muted);font-size:15px;line-height:1.7}\n.about-bio p{margin:0 0 16px}\n.about-bio strong{color:var(--fg)}\n.about-bio ul{list-style:none;padding:0;margin:0 0 16px}\n.about-bio ul li{display:flex;align-items:center;gap:8px;margin:6px 0}\n.about-bio ul li .dot{width:6px;height:6px;border-radius:50%;background:#8b5cf6;flex-shrink:0}\n.about-bio ul li span{font-weight:500;color:var(--fg)}\nfooter.site-footer{background:#0f172a;color:#e2e8f0}\nfooter.site-footer .accent{height:4px;background:linear-gradient(90deg,#7c3aed,#38bdf8,#7c3aed)}\nfooter.site-footer .footer-grid{max-width:1024px;margin:0 auto;padding:48px 16px;display:grid;gap:40px;grid-template-columns:1fr}\n@media (min-width: 576px) {\nfooter.site-footer .footer-grid{grid-template-columns:1fr 1fr;padding:48px 24px}\n}\n@media (min-width: 992px) {\nfooter.site-footer .footer-grid{grid-template-columns:repeat(4,1fr)}\n}\nfooter h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;padding-bottom:8px;color:#fff;border-bottom:1px solid #1e293b}\nfooter p,footer li,footer a,footer address{font-size:14px;color:#94a3b8;line-height:1.6}\nfooter p.small{font-size:12px;color:#64748b;margin-top:8px}\nfooter .quick-links{list-style:none;padding:0;margin:0}\nfooter .quick-links li{margin:8px 0}\nfooter .quick-links a{display:inline-flex;align-items:center;gap:6px;transition:color .2s ease,transform .2s ease}\nfooter .quick-links a:hover{color:#38bdf8;transform:translateX(4px)}\nfooter .quick-links a .bullet{width:8px;height:8px;border-radius:50%;background:#38bdf8;flex-shrink:0}\nfooter .contact-list{list-style:none;padding:0;margin:0}\nfooter .contact-list li{display:flex;gap:8px;margin:12px 0}\nfooter .contact-list i{color:#38bdf8;flex-shrink:0;margin-top:2px}\nfooter .contact-list a{transition:color .2s ease;word-break:break-all}\nfooter .contact-list a:hover{color:#38bdf8}\nfooter .map-iframe{width:100%;height:160px;border:0;border-radius:10px}\nfooter .footer-bottom{border-top:1px solid #1e293b; text-align: center; }\nfooter .footer-bottom .row{max-width:1024px;margin:0 auto;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:12px;color:#ffffff;gap:8px}\n@media (min-width: 576px) {\nfooter .footer-bottom .row{flex-direction:row;padding:16px 24px}\n}\nfooter .footer-bottom a{color:#475569;transition:color .2s ease;font-size:12px}\nfooter .footer-bottom a:hover{color:#38bdf8}\nfooter .footer-bottom .sep{color:#1e293b;margin:0 8px}\nfooter .owner-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}\nfooter .owner-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;outline:2px solid #38bdf866;flex-shrink:0;box-shadow:var(--shadow-lg)}\nfooter .owner-name{color:#ffffff;font-weight:600;font-size:14px;line-height:1.2}\nfooter .owner-role{font-size:12px;color:#38bdf8}\n@keyframes fadeIn {\nfrom{opacity:0}\nto{opacity:1}\n}\n@keyframes fadeInUp {\nfrom{opacity:0;transform:translateY(20px)}\nto{opacity:1;transform:translateY(0)}\n}\n@keyframes scaleIn {\nfrom{opacity:0;transform:scale(.95)}\nto{opacity:1;transform:scale(1)}\n}\n@keyframes bunkReveal {\nfrom{opacity:0;transform:scale(.88) translateY(8px)}\nto{opacity:1;transform:scale(1) translateY(0)}\n}\n@keyframes bunkPulse {\n0%,100%{transform:scale(1)}\n50%{transform:scale(1.04)}\n}\n.fade-up{animation:fadeInUp .5s ease forwards}\n.bunk-pulse{animation:bunkPulse .6s ease .45s 1 forwards}\n.container-narrow{max-width:672px;margin:0 auto}\n.container-mid{max-width:768px;margin:0 auto}\n.container-wide{max-width:1024px;margin:0 auto}\n.hide-sm{display:none}\n@media (min-width: 576px) {\n.hide-sm{display:block}\n.show-sm{display:none!important}\n}\n.row-gap-3 > * + *{margin-top:12px}\n.grid-3{display:grid;gap:24px;grid-template-columns:1fr}\n@media (min-width: 576px) {\n.grid-3{grid-template-columns:repeat(3,1fr)}\n}\n.grid-2{display:grid;gap:20px;grid-template-columns:1fr}\n@media (min-width: 576px) {\n.grid-2{grid-template-columns:repeat(2,1fr)}\n}\n.grid-stat{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}\n@media (min-width: 576px) {\n.grid-stat{grid-template-columns:repeat(3,1fr)}\n}\n.flex-row-c{display:flex;gap:12px;align-items:center}\ninput::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\ninput[type=number]{-moz-appearance:textfield}\n       <\/style>\n<p>   <\/head><br \/>\n   <body><br \/>\n      <!-- Header --><\/p>\n<header class=\"app-header\" data-testid=\"app-header\">\n<div class=\"topbar\">\n<div class=\"topbar-inner\">\n               <!-- Logo --><br \/>\n               <a href=\"#calculator\" class=\"brand\" data-testid=\"brand-link\"><br \/>\n                  <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                     <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#2563EB\" \/>\n                     <text x=\"12\" y=\"26\" font-family=\"Poppins,Arial,sans-serif\" font-weight=\"800\" font-size=\"18\"\n                        fill=\"white\">75<\/text>\n                     <polyline points=\"8,24 15,31 30,14\" stroke=\"#22C55E\" stroke-width=\"4\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" fill=\"none\" \/>\n                  <\/svg><\/p>\n<div class=\"brand-text hide-sm\">\n<div>Attendance<\/div>\n<div>Calculator<\/div>\n<\/p><\/div>\n<div class=\"brand-text show-sm small-only\" style=\"display:block;\">\n<div>Attendance<\/div>\n<div>Calculator<\/div>\n<\/p><\/div>\n<p>               <\/a><br \/>\n               <!-- Desktop nav --><\/p>\n<nav class=\"hide-sm align-items-center\" style=\"gap:2px; font-size:14px; flex-direction:row;\">\n<div style=\"display:flex; align-items:center; gap:2px;\">\n                     <a class=\"nav-pill\" href=\"\/\" data-testid=\"nav-home\">Home<\/a><br \/>\n                     <a class=\"nav-pill\" href=\"#calculator\" data-testid=\"nav-calculator\">Calculator<\/a><br \/>\n                     <a class=\"nav-pill\" href=\"#how-to-use\" data-testid=\"nav-how-to-use\">How to Use<\/a><br \/>\n                     <a class=\"nav-pill\" href=\"https:\/\/75attendancecalculator.com\/about-us\/\" data-testid=\"nav-about\">About<\/a><br \/>\n                     <a class=\"nav-pill\" href=\"https:\/\/75attendancecalculator.com\/category\/blog\/\" data-testid=\"nav-about\">Blog<\/a><\/p>\n<div class=\"dropdown contact-menu\">\n                        <button class=\"nav-pill dropdown-toggle d-inline-flex align-items-center gap-1\" type=\"button\"\n                           data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-testid=\"nav-contact-toggle\"\n                           style=\"border:0;background:transparent;\"><br \/>\n                        Pages<br \/>\n                        <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a class=\"dropdown-item\" href=\"https:\/\/75attendancecalculator.com\/contact-us\/\" data-testid=\"nav-disclaimer\">Contact<\/a><\/li>\n<li><a class=\"dropdown-item\" href=\"https:\/\/75attendancecalculator.com\/privacy-policy\/\" data-testid=\"nav-privacy\">Privacy Policy<\/a><\/li>\n<li><a class=\"dropdown-item\" href=\"https:\/\/75attendancecalculator.com\/disclaimer\/\" data-testid=\"nav-disclaimer\">Disclaimer<\/a><\/li>\n<li><a class=\"dropdown-item\" href=\"https:\/\/75attendancecalculator.com\/terms-and-conditions\/\" data-testid=\"nav-terms\">Terms &amp; Conditions<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/nav>\n<p>               <!-- Right --><\/p>\n<div class=\"d-flex align-items-center gap-2\">\n                  <button id=\"darkToggle\" class=\"nav-icon-btn\" aria-label=\"Toggle dark mode\" data-testid=\"dark-mode-toggle\"><br \/>\n                  <i class=\"bi bi-moon-fill\" id=\"darkIcon\"><\/i><br \/>\n                  <\/button><br \/>\n                  <button id=\"mobileMenuBtn\" class=\"nav-icon-btn d-sm-none\" aria-label=\"Toggle menu\"\n                     data-testid=\"mobile-menu-toggle\"><br \/>\n                  <i class=\"bi bi-list\" id=\"mobileIcon\"><\/i><br \/>\n                  <\/button>\n               <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>         <!-- Mobile panel --><\/p>\n<div id=\"mobilePanel\" class=\"mobile-panel d-sm-none\">\n<nav style=\"display:flex; flex-direction:column; padding: 12px 16px; gap: 4px;\">\n               <a href=\"#\" data-testid=\"m-nav-home\">Home<\/a><br \/>\n               <a href=\"#calculator\" data-testid=\"m-nav-calculator\">Calculator<\/a><br \/>\n               <a href=\"#how-to-use\" data-testid=\"m-nav-how\">How to Use<\/a><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/about-us\/\" data-testid=\"m-nav-about\">About<\/a><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/contact-us\/\" data-testid=\"m-nav-contact\">Contact Us<\/a><\/p>\n<div class=\"divider\"><\/div>\n<p class=\"legal-label\" style=\"margin:0;\">Legal<\/p>\n<p>               <a href=\"https:\/\/75attendancecalculator.com\/privacy-policy\/\" style=\"padding-left: 20px;\" data-testid=\"m-nav-privacy\">Privacy Policy<\/a><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/disclaimer\/\" style=\"padding-left: 20px;\" data-testid=\"m-nav-disclaimer\">Disclaimer<\/a><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/terms-and-conditions\/\" style=\"padding-left: 20px;\" data-testid=\"m-nav-terms\">Terms &amp; Conditions<\/a><br \/>\n            <\/nav>\n<\/p><\/div>\n<\/header>\n<p>      <main><br \/>\n         <!-- Hero \/ Calculator --><\/p>\n<section id=\"calculator\" class=\"hero\">\n<div class=\"container-mid text-center fade-up\">\n<h1>\n                  75% Attendance Calculator<br \/>\n                  <span class=\"accent\">Check Eligibility Instantly<\/span><br \/>\n               <\/h1>\n<p class=\"lead\">\n                  Enter your target attendance percentage, present classes, and total classes held. Instantly check if you meet<br \/>\n                  the 75% rule \u2014 plus find exactly how many classes you can bunk or need to attend.\n               <\/p>\n<div class=\"calc-card\">\n                  <!-- Target % --><\/p>\n<div class=\"mb-3\">\n                     <label for=\"target\" class=\"form-label-c\">Target Percentage<\/label><br \/>\n                     <input type=\"number\" id=\"target\" min=\"1\" max=\"100\" placeholder=\"75\" class=\"form-input\" value=\"75\"\n                        data-testid=\"input-target\" \/><\/p>\n<p class=\"form-help\">Default is 75% (most common college rule).<\/p>\n<p class=\"form-error d-none\" id=\"err-target\">\n<\/p><\/div>\n<p>                  <!-- Present + Total --><\/p>\n<div class=\"row g-3 mb-4\">\n<div class=\"col-12 col-sm-6\">\n                        <label for=\"attended\" class=\"form-label-c\">Present Classes<\/label><br \/>\n                        <input type=\"number\" id=\"attended\" min=\"0\" placeholder=\"e.g. 40\" class=\"form-input\"\n                           data-testid=\"input-attended\" \/><\/p>\n<p class=\"form-help\">How many classes you attended.<\/p>\n<p class=\"form-error d-none\" id=\"err-attended\">\n<\/p><\/div>\n<div class=\"col-12 col-sm-6\">\n                        <label for=\"total\" class=\"form-label-c\">Total Classes<\/label><br \/>\n                        <input type=\"number\" id=\"total\" min=\"1\" placeholder=\"e.g. 50\" class=\"form-input\"\n                           data-testid=\"input-total\" \/><\/p>\n<p class=\"form-help\">Total classes conducted so far.<\/p>\n<p class=\"form-error d-none\" id=\"err-total\">\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"d-flex gap-2\">\n                     <button id=\"btnCalculate\" class=\"btn-primary-c\" data-testid=\"btn-calculate\">Calculate Attendance<\/button><br \/>\n                     <button id=\"btnReset\" class=\"btn-icon\" aria-label=\"Reset\" data-testid=\"btn-reset\"><i\n                        class=\"bi bi-arrow-counterclockwise\"><\/i><\/button>\n                  <\/div>\n<div id=\"resultArea\"><\/div>\n<div id=\"predictArea\"><\/div>\n<\/p><\/div>\n<p class=\"mt-3 form-help\" style=\"text-align:center;\">\n                  Your inputs are saved automatically in your browser. No data is sent to any server.\n               <\/p>\n<\/p><\/div>\n<\/section>\n<p>         <!-- How to Use --><\/p>\n<section id=\"how-to-use\" class=\"section muted\">\n<div class=\"container-mid\">\n<h2>How to Use the Attendance Calculator<\/h2>\n<div class=\"grid-3\">\n<div class=\"gradient-card g-blue\">\n<div class=\"step-circle b1\">1<\/div>\n<h3>Set Your Target %<\/h3>\n<p>Enter your college&#8217;s required attendance percentage. The default is 75%, but you can adjust it to match<br \/>\n                        your institution&#8217;s rule.\n                     <\/p>\n<\/p><\/div>\n<div class=\"gradient-card g-violet\">\n<div class=\"step-circle b2\">2<\/div>\n<h3>Enter Present &amp; Total Classes<\/h3>\n<p>Type how many classes you attended (present) and the total classes conducted so far. The tool validates<br \/>\n                        your input instantly.\n                     <\/p>\n<\/p><\/div>\n<div class=\"gradient-card g-emerald\">\n<div class=\"step-circle b3\">3<\/div>\n<h3>Get Instant Results<\/h3>\n<p>Click &#8216;Calculate&#8217; to see your percentage, status, classes you can bunk or need to attend, and a future<br \/>\n                        impact prediction table.\n                     <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Why 75% --><\/p>\n<section id=\"why-75\" class=\"section\">\n<div class=\"container-mid\">\n<h2>Why is 75% Attendance Important?<\/h2>\n<p class=\"sub-h\">Understanding the 75% rule can help you plan your academic year more effectively.<\/p>\n<div class=\"grid-2\">\n<div class=\"gradient-card g-blue d-flex gap-3\">\n                     <i class=\"bi bi-file-text icon icon-blue\"><\/i><\/p>\n<div>\n<h3>Mandatory Academic Rule<\/h3>\n<p>Most universities and colleges mandate 75% attendance as the minimum to be eligible to sit for final<br \/>\n                           examinations. It is enshrined in academic regulations.\n                        <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-violet d-flex gap-3\">\n                     <i class=\"bi bi-book icon icon-violet\"><\/i><\/p>\n<div>\n<h3>Better Learning Outcomes<\/h3>\n<p>Regular attendance correlates strongly with better academic performance. In-class explanations,<br \/>\n                           discussions, and practical sessions are irreplaceable.\n                        <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-amber d-flex gap-3\">\n                     <i class=\"bi bi-exclamation-triangle icon icon-amber\"><\/i><\/p>\n<div>\n<h3>Avoid Exam Debarment<\/h3>\n<p>Falling below 75% can result in being debarred from sitting the semester exams, which directly impacts<br \/>\n                           your academic progress and career.\n                        <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-emerald d-flex gap-3\">\n                     <i class=\"bi bi-bullseye icon icon-emerald\"><\/i><\/p>\n<div>\n<h3>Plan Your Leaves Wisely<\/h3>\n<p>Knowing your attendance percentage in real-time lets you plan leaves for illness, events, or personal<br \/>\n                           needs without jeopardizing your eligibility.\n                        <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Example calculation --><\/p>\n<section class=\"section bordered\">\n<div class=\"container-mid\">\n<h2>Example of Attendance Calculation<\/h2>\n<p class=\"sub-h\">Example: Total classes = 50, Present = 40, then attendance = <strong>80%<\/strong>.<\/p>\n<div class=\"styled-table-wrap tbl-blue\">\n<table class=\"styled-table\">\n<thead>\n<tr>\n<th>Total Classes<\/th>\n<th>Present<\/th>\n<th>Attendance %<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"big\">50<\/td>\n<td class=\"big\">40<\/td>\n<td class=\"big color-success-dark\">80%<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Key Features --><\/p>\n<section class=\"section muted\">\n<div class=\"container-mid\">\n<h2>Key Features of This Tool<\/h2>\n<div class=\"grid-2\">\n<div class=\"gradient-card g-blue d-flex gap-3\">\n                     <i class=\"bi bi-check-circle icon icon-blue\"><\/i><\/p>\n<div>\n<h3>Instant Calculation<\/h3>\n<p>Attendance %, safety status, and insights in one click.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-violet d-flex gap-3\">\n                     <i class=\"bi bi-cup-hot icon icon-violet\"><\/i><\/p>\n<div>\n<h3>Bunk Planner<\/h3>\n<p>Know exactly how many classes you can safely skip without crossing the limit.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-amber d-flex gap-3\">\n                     <i class=\"bi bi-bullseye icon icon-amber\"><\/i><\/p>\n<div>\n<h3>Smart Suggestions<\/h3>\n<p>Personalised tips based on your current attendance situation.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-emerald d-flex gap-3\">\n                     <i class=\"bi bi-mortarboard icon icon-emerald\"><\/i><\/p>\n<div>\n<h3>Mobile Friendly<\/h3>\n<p>Works perfectly on all screen sizes \u2014 phone, tablet, or desktop.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-pink d-flex gap-3\">\n                     <i class=\"bi bi-file-earmark-text icon icon-pink\"><\/i><\/p>\n<div>\n<h3>No Login Required<\/h3>\n<p>Fast, private, and free \u2014 no account or sign-up needed, ever.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"gradient-card g-cyan d-flex gap-3\">\n                     <i class=\"bi bi-graph-up icon icon-cyan\"><\/i><\/p>\n<div>\n<h3>Future Prediction<\/h3>\n<p>Preview what happens to your percentage if you attend or miss upcoming classes.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Benefits + Who Can Use --><\/p>\n<section class=\"section bordered\">\n<div class=\"container-mid\">\n<div class=\"row g-4\">\n<div class=\"col-12 col-sm-6\">\n<h2 style=\"text-align:left; font-size: 22px; margin-bottom: 24px;\">Benefits of Using Online Calculator<\/h2>\n<div class=\"row-gap-3\">\n<div class=\"chip-card g-blue\"><i class=\"bi bi-check-circle icon-emerald\"><\/i> Saves time \u2014 no manual maths<br \/>\n                           needed.\n                        <\/div>\n<div class=\"chip-card g-violet\"><i class=\"bi bi-check-circle icon-emerald\"><\/i> Accurate results \u2014 fewer<br \/>\n                           mistakes.\n                        <\/div>\n<div class=\"chip-card g-emerald\"><i class=\"bi bi-check-circle icon-emerald\"><\/i> Helps maintain exam<br \/>\n                           eligibility.\n                        <\/div>\n<div class=\"chip-card g-amber\"><i class=\"bi bi-check-circle icon-emerald\"><\/i> Easy planning with<br \/>\n                           predictions and bunk limits.\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-12 col-sm-6\">\n<h2 style=\"text-align:left; font-size: 22px; margin-bottom: 24px;\">Who Can Use This Tool?<\/h2>\n<div class=\"row-gap-3\">\n<div class=\"chip-card g-blue align-items-center\" style=\"align-items:center;\"><i\n                           class=\"bi bi-mortarboard icon-blue\"><\/i> College Students<\/div>\n<div class=\"chip-card g-violet align-items-center\" style=\"align-items:center;\"><i\n                           class=\"bi bi-mortarboard icon-violet\"><\/i> School Students<\/div>\n<div class=\"chip-card g-emerald align-items-center\" style=\"align-items:center;\"><i\n                           class=\"bi bi-mortarboard icon-emerald\"><\/i> University Students<\/div>\n<div class=\"chip-card g-amber align-items-center\" style=\"align-items:center;\"><i\n                           class=\"bi bi-mortarboard icon-amber\"><\/i> Teachers \u2014 for tracking class attendance<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Minimum Attendance Rules --><\/p>\n<section class=\"section muted\">\n<div class=\"container-mid\">\n<h2>Minimum Attendance Rules in Colleges<\/h2>\n<div class=\"info-card\">\n<p>The <strong>75% rule<\/strong> means that out of every 100 classes held, a student must attend at least<br \/>\n                     <strong>75<\/strong>. Some institutions set the bar at <strong>70%<\/strong> or <strong>80%<\/strong>, but 75%<br \/>\n                     remains the most common benchmark \u2014 especially for end-semester exam eligibility. Always verify the exact<br \/>\n                     requirement with your institution.\n                  <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Calculator vs Manual --><\/p>\n<section class=\"section bordered\">\n<div class=\"container-mid\">\n<h2>Attendance Calculator vs Manual Calculation<\/h2>\n<div class=\"styled-table-wrap tbl-violet\">\n<table class=\"styled-table\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Manual<\/th>\n<th>This Tool<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Speed<\/td>\n<td class=\"color-danger\">Slow<\/td>\n<td class=\"color-success-dark fw-semibold\">Instant<\/td>\n<\/tr>\n<tr>\n<td>Accuracy<\/td>\n<td class=\"color-danger\">Medium<\/td>\n<td class=\"color-success-dark fw-semibold\">High<\/td>\n<\/tr>\n<tr>\n<td>Bunk Planning<\/td>\n<td class=\"color-danger\">No<\/td>\n<td class=\"color-success-dark fw-semibold\">Yes<\/td>\n<\/tr>\n<tr>\n<td>Future Prediction<\/td>\n<td class=\"color-danger\">No<\/td>\n<td class=\"color-success-dark fw-semibold\">Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- Tips --><\/p>\n<section class=\"section muted\">\n<div class=\"container-mid\">\n<h2>Tips to Maintain Good Attendance<\/h2>\n<div class=\"grid-2\">\n<div class=\"gradient-card g-blue d-flex gap-3\">\n<div class=\"step-circle\"\n                        style=\"width:28px; height:28px; font-size:12px; background:#3b82f6; margin:2px 0 0;\">1<\/div>\n<p style=\"font-weight:500; color: var(--fg);\">Attend regularly \u2014 even small misses add up over time.<\/p>\n<\/p><\/div>\n<div class=\"gradient-card g-violet d-flex gap-3\">\n<div class=\"step-circle\"\n                        style=\"width:28px; height:28px; font-size:12px; background:#3b82f6; margin:2px 0 0;\">2<\/div>\n<p style=\"font-weight:500; color: var(--fg);\">Avoid unnecessary bunks \u2014 save leaves for real emergencies.\n                     <\/p>\n<\/p><\/div>\n<div class=\"gradient-card g-amber d-flex gap-3\">\n<div class=\"step-circle\"\n                        style=\"width:28px; height:28px; font-size:12px; background:#3b82f6; margin:2px 0 0;\">3<\/div>\n<p style=\"font-weight:500; color: var(--fg);\">Track your percentage every week so exam season has no<br \/>\n                        surprises.\n                     <\/p>\n<\/p><\/div>\n<div class=\"gradient-card g-emerald d-flex gap-3\">\n<div class=\"step-circle\"\n                        style=\"width:28px; height:28px; font-size:12px; background:#3b82f6; margin:2px 0 0;\">4<\/div>\n<p style=\"font-weight:500; color: var(--fg);\">If your percentage is low, make a recovery plan and start<br \/>\n                        attending every class.\n                     <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>         <!-- FAQ --><\/p>\n<section id=\"faq\" class=\"section muted\" style=\"border-top:1px solid var(--border);\">\n<div class=\"container-narrow\">\n<h2>Frequently Asked Questions<\/h2>\n<div id=\"faqList\" data-testid=\"faq-list\"><\/div>\n<\/p><\/div>\n<\/section>\n<p>      <\/main><br \/>\n      <!-- About --><\/p>\n<section id=\"about\" class=\"section bordered\">\n<div class=\"container-wide\">\n<div class=\"text-center mb-4 pb-2\">\n<h2 class=\"about-heading\">About the Author<\/h2>\n<\/p><\/div>\n<div class=\"about-card\">\n<div class=\"about-photo-wrap\">\n                  <img class=\"about-photo\" id=\"authorPhoto\" alt=\"Akash Dhakad \u2014 Creator of 75 Attendance Calculator\" \/><\/p>\n<div class=\"text-center\">\n<div class=\"about-name\">Akash Dhakad<\/div>\n<div class=\"about-role\">Creator &amp; Owner<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"about-bio\">\n<p><strong>Akash Dhakad<\/strong> is the creator of <strong>75 Attendance Calculator<\/strong>. He has been<br \/>\n                     working in the field of blogging and tool development for the past 4\u20135 years.\n                  <\/p>\n<p>During his student life, he faced many challenges, especially related to attendance management in college.<br \/>\n                     One of the major problems he experienced was calculating attendance percentage and understanding how many<br \/>\n                     classes were required to meet the minimum attendance criteria. Like many other students, he found it<br \/>\n                     confusing and time-consuming.\n                  <\/p>\n<p>To solve this problem, he built this tool to make attendance calculation simple, fast, and accurate for<br \/>\n                     students. This tool is designed with a focus on:\n                  <\/p>\n<ul>\n<li><span class=\"dot\"><\/span><span>Simplicity<\/span><\/li>\n<li><span class=\"dot\"><\/span><span>Accuracy<\/span><\/li>\n<li><span class=\"dot\"><\/span><span>User-friendly experience<\/span><\/li>\n<li><span class=\"dot\"><\/span><span>Mobile compatibility<\/span><\/li>\n<\/ul>\n<p>Akash Dhakad has also created multiple online tools and continues to work on building practical solutions<br \/>\n                     that help students in their daily academic life. Through this website, his goal is to help students solve<br \/>\n                     real academic problems, create useful and easy-to-use tools, share helpful information through guides and<br \/>\n                     blogs, and understand user needs to build better solutions.\n                  <\/p>\n<p>He is continuously working to improve this platform and provide maximum value to users.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>      <!-- Footer --><\/p>\n<footer class=\"site-footer\" id=\"contact\">\n<div class=\"accent\"><\/div>\n<div class=\"footer-grid\">\n<div>\n<div class=\"d-flex align-items-center gap-2 mb-3\">\n                  <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                     <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#2563EB\" \/>\n                     <text x=\"12\" y=\"26\" font-family=\"Poppins,Arial,sans-serif\" font-weight=\"800\" font-size=\"18\"\n                        fill=\"white\">75<\/text>\n                     <polyline points=\"8,24 15,31 30,14\" stroke=\"#22C55E\" stroke-width=\"4\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" fill=\"none\" \/>\n                  <\/svg><\/p>\n<div style=\"line-height:1.1;\">\n<div style=\"color:#fff; font-weight:700; font-size:15px;\">Attendance<\/div>\n<div style=\"color:#fff; font-weight:700; font-size:15px;\">Calculator<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>75 Attendance Calculator is a fast and simple tool that helps students calculate attendance percentage, plan<br \/>\n                  bunks, and predict future attendance.\n               <\/p>\n<p class=\"small\">Results are for guidance only. Always verify with your institution.<\/p>\n<\/p><\/div>\n<div>\n<h3>Quick Links<\/h3>\n<ul class=\"quick-links\">\n<li><a href=\"#calculator\"><span class=\"bullet\"><\/span>Calculator<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/category\/blog\/\"><span class=\"bullet\"><\/span>Blog<\/a><\/li>\n<li><a href=\"#how-to-use\"><span class=\"bullet\"><\/span>How to Use<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/about-us\/\"><span class=\"bullet\"><\/span>About<\/a><\/li>\n<li><a href=\"#faq\"><span class=\"bullet\"><\/span>FAQ<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/contact-us\/\"><span class=\"bullet\"><\/span>Contact<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/privacy-policy\/\"><span class=\"bullet\"><\/span>Privacy Policy<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/disclaimer\/\"><span class=\"bullet\"><\/span>Disclaimer<\/a><\/li>\n<li><a href=\"https:\/\/75attendancecalculator.com\/terms-and-conditions\/\"><span class=\"bullet\"><\/span>Terms &amp; Conditions<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h3>Owner &amp; Contact<\/h3>\n<div class=\"owner-row\">\n                  <img class=\"owner-photo\" id=\"ownerPhoto\" alt=\"Akash Dhakad\" \/><\/p>\n<div>\n<div class=\"owner-name\">Akash Dhakad<\/div>\n<div class=\"owner-role\">Creator &amp; Owner<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<ul class=\"contact-list\">\n<li><i class=\"bi bi-telephone\"><\/i><span>+91 7024651639<\/span><\/li>\n<li><i class=\"bi bi-envelope\"><\/i><span>75attendence@gmail.com<\/span><\/li>\n<li><i class=\"bi bi-globe\"><\/i><a href=\"\/\" target=\"_blank\"\n                     rel=\"noopener noreferrer\">75attendancecalculator.com<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h3>Our Location<\/h3>\n<div class=\"d-flex gap-2 mb-3\">\n                  <i class=\"bi bi-geo-alt\" style=\"color:#38bdf8; flex-shrink:0; margin-top:2px;\"><\/i><\/p>\n<address style=\"font-style:normal; color:#94a3b8; line-height:1.6; margin:0; font-size:14px;\">\n                     Parmar Hardware &amp; Electricals<br \/>\n                     118, Ward No. 53, Bagsewania Main Road<br \/>\n                     Bagsewaniya, Bagh Swaniya<br \/>\n                     Bhopal, Madhya Pradesh 462043<br \/>\n                  <\/address>\n<\/p><\/div>\n<p>               <iframe class=\"map-iframe\"\n                  src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3667.3138439630807!2d77.4617437!3d23.195230399999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x397c43dad44c1c2f%3A0x4294e4b826e147f!2sParmar%20Hardware%20%26%20Electricals!5e0!3m2!1sen!2sin!4v1777806565343!5m2!1sen!2sin\"\n                  loading=\"lazy\" title=\"Parmar Hardware &#038; Electricals location\"><\/iframe>\n            <\/div>\n<\/p><\/div>\n<div class=\"footer-bottom\">\n<div class=\"row\">\n               <span>\u00a9 2026  75AttendanceCalculator.Com  \u2014 All Rights Reserved<\/span><br \/>\n               <span><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/privacy-policy\/\">Privacy<\/a><span class=\"sep\">\u2022<\/span><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/terms-and-conditions\/\">Terms<\/a><span class=\"sep\">\u2022<\/span><br \/>\n               <a href=\"https:\/\/75attendancecalculator.com\/disclaimer\/\">Disclaimer<\/a><br \/>\n               <\/span>\n            <\/div>\n<\/p><\/div>\n<\/footer>\n<p>      <script><\/p>\n<p>\/* ============== Author photo (base64 embedded) ============== *\/\nconst AUTHOR_IMG = \"http:\/\/75attendancecalculator.com\/wp-content\/uploads\/2026\/05\/Mr-Pawan-Sharma.jpeg\";\ndocument.getElementById(\"authorPhoto\").src = AUTHOR_IMG;\ndocument.getElementById(\"ownerPhoto\").src = AUTHOR_IMG;<\/p>\n<p>\/* ============== Dark mode ============== *\/\nconst html = document.documentElement;\nconst darkIcon = document.getElementById(\"darkIcon\");\nconst mobileIcon = document.getElementById(\"mobileIcon\");\nfunction applyDark(isDark) {\n  html.classList.toggle(\"dark\", isDark);\n  darkIcon.className = isDark ? \"bi bi-sun-fill\" : \"bi bi-moon-fill\";\n  localStorage.setItem(\"darkMode\", String(isDark));\n}\nconst savedDark = localStorage.getItem(\"darkMode\");\nconst initialDark = savedDark !== null ? savedDark === \"true\" : window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\napplyDark(initialDark);\ndocument.getElementById(\"darkToggle\").addEventListener(\"click\", () => applyDark(!html.classList.contains(\"dark\")));<\/p>\n<p>\/* ============== Mobile menu ============== *\/\nconst mobilePanel = document.getElementById(\"mobilePanel\");\nconst mobileBtn = document.getElementById(\"mobileMenuBtn\");\nmobileBtn.addEventListener(\"click\", () => {\n  const open = mobilePanel.classList.toggle(\"show\");\n  mobileIcon.className = open ? \"bi bi-x-lg\" : \"bi bi-list\";\n});\nmobilePanel.querySelectorAll(\"a\").forEach(a => a.addEventListener(\"click\", () => {\n  mobilePanel.classList.remove(\"show\");\n  mobileIcon.className = \"bi bi-list\";\n}));<\/p>\n<p>\/* ============== FAQ ============== *\/\nconst FAQS = [\n  { q: \"What is the 75% attendance rule?\", a: \"Most universities and colleges require students to maintain at least 75% attendance in each subject. Falling below this threshold can result in being barred from appearing in exams or other academic penalties.\" },\n  { q: \"How is attendance percentage calculated?\", a: \"Attendance percentage = (Present Classes \u00f7 Total Classes) \u00d7 100. For example, if you attended 60 out of 80 classes, your attendance is (60 \u00f7 80) \u00d7 100 = 75%.\" },\n  { q: \"How many classes can I miss and still stay on target?\", a: \"If your attendance is above the target, bunk allowed = floor(Attended \u00f7 (Target% \/ (100 \u2212 Target%)) \u2212 (Total \u2212 Attended)). Use the calculator above for precise results.\" },\n  { q: \"How many classes do I need to attend to reach my target?\", a: \"Classes needed = ceil((Target% \u00d7 Total \u2212 100 \u00d7 Attended) \u00f7 (100 \u2212 Target%)). Each future class counts in both total and attended, so the formula accounts for that compounding ratio.\" },\n  { q: \"Does this calculator save my data?\", a: \"Yes! Your inputs are saved automatically in your browser's local storage, so they persist across refreshes. No data is ever sent to any server.\" },\n  { q: \"How does a monthly attendance calculator work?\", a: \"A monthly attendance calculator works the same way \u2014 divide the number of days present by the total working days in the month, then multiply by 100. For example, if there were 26 working days and you attended 20, your monthly attendance is (20 \u00f7 26) \u00d7 100 \u2248 76.9%.\" },\n  { q: \"75 percent attendance means how many days in a month?\", a: \"It depends on the number of working days. If a month has 26 working days, 75% means you must attend at least 20 days (26 \u00d7 0.75 = 19.5, rounded up to 20). For 24 working days, you need at least 18 days.\" },\n  { q: \"How do I calculate 100 percent attendance?\", a: \"100% attendance means you have attended every single class or working day \u2014 zero absences. Attendance % = (Present \u00f7 Total) \u00d7 100, so for 100% you need Present = Total. Use this calculator with your actual numbers to see how close you are.\" },\n  { q: \"Is there an attendance calculator app I can use on my phone?\", a: \"This website works as a fully mobile-friendly attendance calculator \u2014 no app install needed. Open it in any mobile browser, enter your numbers, and get instant results. Your data is saved locally so you can revisit anytime.\" },\n  { q: \"How to calculate attendance percentage step by step?\", a: \"Step 1: Count the total number of classes or days held. Step 2: Count the number of classes or days you attended. Step 3: Divide attended by total. Step 4: Multiply by 100. Formula: (Attended \u00f7 Total) \u00d7 100 = Attendance %. This calculator does all four steps instantly.\" },\n  { q: \"How does a school attendance calculator differ from a college one?\", a: \"The formula is identical \u2014 (Days Present \u00f7 Total School Days) \u00d7 100. The only difference is the minimum required percentage: schools may require 75\u201385% while colleges typically follow the 75% rule. You can set your own target % in this calculator to match your institution.\" },\n  { q: \"75 percent attendance means how many days in college?\", a: \"It depends on how many total classes your college conducts. If total classes = 100, you must attend at least 75. If total = 120, you need 90 (120 \u00d7 0.75). Use this calculator \u2014 enter your total classes and target 75 to see the exact number required.\" },\n  { q: \"75 percentage attendance means how many days overall?\", a: \"75% of any total = Total \u00d7 0.75. For 200 classes \u2192 150 days. For 150 classes \u2192 113 days. For 100 classes \u2192 75 days. The exact count always depends on your total. Enter your numbers above for a precise, instant answer.\" }\n];\nconst faqList = document.getElementById(\"faqList\");\nFAQS.forEach((f, i) => {\n  const item = document.createElement(\"div\");\n  item.className = \"faq-item\";\n  item.innerHTML = `\n    <button class=\"faq-q\" aria-expanded=\"false\" data-testid=\"faq-q-${i}\">\n      <span>${f.q}<\/span>\n      <i class=\"bi bi-chevron-down\"><\/i>\n    <\/button><\/p>\n<div class=\"faq-a\" data-testid=\"faq-a-${i}\">\n<p>${f.a}<\/p>\n<\/div>\n<p>`;\n  faqList.appendChild(item);\n});\nfaqList.addEventListener(\"click\", e => {\n  const btn = e.target.closest(\".faq-q\");\n  if (!btn) return;\n  const ans = btn.nextElementSibling;\n  const open = ans.classList.toggle(\"show\");\n  btn.setAttribute(\"aria-expanded\", String(open));\n  btn.querySelector(\"i\").className = open ? \"bi bi-chevron-up\" : \"bi bi-chevron-down\";\n});<\/p>\n<p>\/* ============== Calculator ============== *\/\nconst $target = document.getElementById(\"target\");\nconst $total = document.getElementById(\"total\");\nconst $attended = document.getElementById(\"attended\");\nconst $errTarget = document.getElementById(\"err-target\");\nconst $errTotal = document.getElementById(\"err-total\");\nconst $errAttended = document.getElementById(\"err-attended\");\nconst $resultArea = document.getElementById(\"resultArea\");\nconst $predictArea = document.getElementById(\"predictArea\");<\/p>\n<p>\/\/ Restore from localStorage\n$target.value = localStorage.getItem(\"att_target\") || \"75\";\n$total.value = localStorage.getItem(\"att_total\") || \"\";\n$attended.value = localStorage.getItem(\"att_attended\") || \"\";<\/p>\n<p>[$target, $total, $attended].forEach(el => {\n  el.addEventListener(\"input\", () => {\n    const key = el.id === \"target\" ? \"att_target\" : el.id === \"total\" ? \"att_total\" : \"att_attended\";\n    if (el.value) localStorage.setItem(key, el.value);\n    else localStorage.removeItem(key);\n    clearError(el);\n  });\n  el.addEventListener(\"keydown\", e => { if (e.key === \"Enter\") handleCalculate(); });\n});<\/p>\n<p>function setError(input, errEl, msg) {\n  input.classList.add(\"is-invalid\");\n  errEl.textContent = msg;\n  errEl.classList.remove(\"d-none\");\n}\nfunction clearError(input) {\n  input.classList.remove(\"is-invalid\");\n  const errEl = document.getElementById(\"err-\" + input.id);\n  if (errEl) { errEl.textContent = \"\"; errEl.classList.add(\"d-none\"); }\n}\nfunction validate() {\n  let ok = true;\n  clearError($target); clearError($total); clearError($attended);\n  const tg = Number($target.value), t = Number($total.value), a = Number($attended.value);\n  if (!$target.value || isNaN(tg) || tg <= 0 || tg > 100) { setError($target, $errTarget, \"Enter a valid target between 1 and 100.\"); ok = false; }\n  if (!$total.value || isNaN(t) || t <= 0 || !Number.isInteger(t)) { setError($total, $errTotal, \"Enter a valid positive whole number for total classes.\"); ok = false; }\n  if (!$attended.value || isNaN(a) || a < 0 || !Number.isInteger(a)) { setError($attended, $errAttended, \"Enter a valid non-negative whole number for present classes.\"); ok = false; }\n  if (ok &#038;&#038; a > t) { setError($attended, $errAttended, \"Present classes cannot exceed total classes.\"); ok = false; }\n  return ok;\n}\nfunction calcAttendance(total, attended, target) {\n  const percentage = (attended \/ total) * 100;\n  const tRatio = target \/ 100;\n  let status = \"danger\";\n  if (percentage >= target) status = \"safe\";\n  else if (percentage >= target - 10) status = \"warning\";\n  let classesNeeded = 0;\n  if (percentage < target) {\n    classesNeeded = Math.ceil((tRatio * total - attended) \/ (1 - tRatio));\n    if (classesNeeded < 0) classesNeeded = 0;\n  }\n  let canBunk = 0;\n  if (percentage >= target) {\n    canBunk = Math.floor(attended \/ (tRatio \/ (1 - tRatio)) - (total - attended));\n    if (canBunk < 0) canBunk = 0;\n  }\n  return { percentage, status, classesNeeded, canBunk, target };\n}\nfunction scenarioCalc(total, attended, target, extraAttend, extraMiss) {\n  const newTotal = total + extraAttend + extraMiss;\n  const newAttended = attended + extraAttend;\n  const pct = (newAttended \/ newTotal) * 100;\n  let status = \"danger\";\n  if (pct >= target) status = \"safe\";\n  else if (pct >= target - 10) status = \"warning\";\n  return { pct, status };\n}<\/p>\n<p>const STATUS_TXT = { safe: \"Safe \u2014 You're Good!\", warning: \"Warning \u2014 Borderline Attendance\", danger: \"Danger \u2014 Attendance Too Low\" };\nconst STATUS_ICON = { safe: \"bi-check-circle-fill\", warning: \"bi-exclamation-triangle-fill\", danger: \"bi-x-circle-fill\" };<\/p>\n<p>function handleCalculate() {\n  if (!validate()) return;\n  const t = Number($total.value), a = Number($attended.value), tg = Number($target.value);\n  const r = calcAttendance(t, a, tg);\n  renderResult(r, t, a);\n  renderPrediction(r, t, a, tg);\n  setTimeout(() => { document.getElementById(\"resultBlock\")?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); }, 100);\n}<\/p>\n<p>function renderResult(r, t, a) {\n  const progressPct = Math.min(r.percentage, 100);\n  const statsHtml = `<\/p>\n<div class=\"grid-stat\">\n<div class=\"stat-card\">\n<div class=\"lbl\">Target %<\/div>\n<div class=\"val\">${r.target}%<\/div>\n<\/div>\n<div class=\"stat-card\">\n<div class=\"lbl\">Present<\/div>\n<div class=\"val\">${a}<\/div>\n<\/div>\n<div class=\"stat-card\">\n<div class=\"lbl\">Total<\/div>\n<div class=\"val\">${t}<\/div>\n<\/div>\n<div class=\"stat-card\">\n<div class=\"lbl\">Missed<\/div>\n<div class=\"val\">${t - a}<\/div>\n<\/div>\n<p>      ${r.status !== \"safe\" ? `<\/p>\n<div class=\"stat-card\">\n<div class=\"lbl\">Classes Needed<\/div>\n<div class=\"val warn\">${r.classesNeeded}<\/div>\n<div class=\"note\">to reach ${r.target}%<\/div>\n<\/div>\n<p>` : \"\"}\n    <\/p><\/div>\n<p>`;\n  const hasBunk = r.canBunk > 0;\n  const bunkHtml = `<\/p>\n<div class=\"bunk-card ${hasBunk ? \"has\" : \"no\"}\" data-testid=\"bunk-card\">\n<div class=\"bunk-head\">\n<div class=\"d-flex align-items-center gap-2\"><i class=\"bi bi-cup-hot bunk-icon\" style=\"font-size:18px;\"><\/i><span class=\"bunk-title\">Bunk Allowed<\/span><\/div>\n<p>        <span class=\"bunk-pill\">${hasBunk ? \"You're Safe\" : \"No Bunk\"}<\/span>\n      <\/div>\n<div class=\"bunk-num bunk-pulse\" id=\"bunkNum\">0<\/div>\n<p class=\"bunk-msg\">${hasBunk ? `You can safely miss ${r.canBunk} class${r.canBunk !== 1 ? \"es\" : \"\"} and still stay above ${r.target}%` : \"No safe bunk \u2014 attend every class to reach your target\"}<\/p>\n<\/p><\/div>\n<p>`;\n  $resultArea.innerHTML = `<\/p>\n<div id=\"resultBlock\" class=\"result-card ${r.status}\" data-testid=\"result-card\">\n<div class=\"text-center mb-3\">\n<div class=\"result-pct ${r.status}\" data-testid=\"result-percentage\">${r.percentage.toFixed(2)}%<\/div>\n<div class=\"result-status ${r.status}\"><i class=\"bi ${STATUS_ICON[r.status]}\"><\/i> ${STATUS_TXT[r.status]}<\/div>\n<\/p><\/div>\n<div style=\"margin-bottom: 20px;\">\n<div class=\"progress-row\"><span>0%<\/span><span style=\"font-weight:500;\">${r.target}% target<\/span><span>100%<\/span><\/div>\n<div class=\"progress-bar-c\">\n<div class=\"progress-bar-fill ${r.status}\" style=\"width: ${progressPct}%\"><\/div>\n<div class=\"progress-marker\" style=\"left: ${r.target}%\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"mb-3\">${bunkHtml}<\/div>\n<p>      ${statsHtml}\n      <button id=\"btnPdf\" class=\"btn-pdf\" data-testid=\"btn-save-pdf\"><i class=\"bi bi-file-earmark-text\"><\/i> Save Your Attendance PDF<\/button>\n    <\/div>\n<p>`;\n  \/\/ count up bunk\n  if (hasBunk) animateCount(document.getElementById(\"bunkNum\"), r.canBunk, 650);\n  else document.getElementById(\"bunkNum\").textContent = \"0\";\n  document.getElementById(\"btnPdf\").addEventListener(\"click\", () => savePdf(r, t, a));\n}<\/p>\n<p>function renderPrediction(r, t, a, tg) {\n  const scenarios = [\n    { s: \"Attend next class\", ...scenarioCalc(t, a, tg, 1, 0) },\n    { s: \"Miss next class\", ...scenarioCalc(t, a, tg, 0, 1) },\n    { s: \"Attend next 5 classes\", ...scenarioCalc(t, a, tg, 5, 0) },\n    { s: \"Miss next 3 classes\", ...scenarioCalc(t, a, tg, 0, 3) }\n  ];\n  $predictArea.innerHTML = `<\/p>\n<div class=\"predict-card\" data-testid=\"prediction-card\">\n<h2>Next Class Impact Prediction<\/h2>\n<p>See what happens if you attend or miss the next classes.<\/p>\n<div class=\"predict-table-wrap\">\n<table class=\"predict-table\">\n<thead>\n<tr>\n<th>Scenario<\/th>\n<th>Attendance %<\/th>\n<th>Result<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n            ${scenarios.map(row => `<\/p>\n<tr>\n<td style=\"font-weight:500;\">${row.s}<\/td>\n<td class=\"cell-mid cell-pct ${row.status}\">${row.pct.toFixed(2)}%<\/td>\n<td class=\"cell-mid\"><span class=\"status-badge ${row.status}\">${row.status === \"safe\" ? \"Safe\" : row.status === \"warning\" ? \"Warning\" : \"Danger\"}<\/span><\/td>\n<\/tr>\n<p>`).join(\"\")}\n          <\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<p>`;\n}<\/p>\n<p>function animateCount(el, target, duration) {\n  const start = performance.now();\n  function step(now) {\n    const p = Math.min((now - start) \/ duration, 1);\n    const eased = 1 - Math.pow(1 - p, 3);\n    el.textContent = Math.round(eased * target);\n    if (p < 1) requestAnimationFrame(step);\n  }\n  requestAnimationFrame(step);\n}\n\nfunction savePdf(r, t, a) {\n  const tg = r.target;\n  const statusLabel = r.status === \"safe\" ? \"SAFE\" : r.status === \"warning\" ? \"WARNING\" : \"DANGER\";\n  const date = new Date().toLocaleDateString(\"en-US\", { year: \"numeric\", month: \"long\", day: \"numeric\" });\n  const color = r.status === \"safe\" ? \"#16a34a\" : r.status === \"warning\" ? \"#d97706\" : \"#dc2626\";\n  const bg = r.status === \"safe\" ? \"#dcfce7\" : r.status === \"warning\" ? \"#fef9c3\" : \"#fee2e2\";\n  const fg = r.status === \"safe\" ? \"#15803d\" : r.status === \"warning\" ? \"#92400e\" : \"#991b1b\";\n  const w = window.open(\"\", \"_blank\");\n  if (!w) return;\n  w.document.write(`<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Attendance Report<\/title><\/p>\n<style>\n*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Arial,sans-serif;background:#f8fafc;color:#1e293b;padding:40px}\n.container{max-width:560px;margin:0 auto;background:white;border-radius:16px;padding:40px;box-shadow:0 4px 24px rgba(0,0,0,.10)}\n.logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}\n.logo-icon{width:40px;height:40px;background:#3b82f6;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}\n.logo-text{font-size:18px;font-weight:700;color:#1e40af}\nh1{font-size:22px;font-weight:700;margin-bottom:4px}\n.date{font-size:13px;color:#64748b;margin-bottom:28px}\n.divider{height:1px;background:#e2e8f0;margin:20px 0}\n.percent{font-size:36px;font-weight:800;color:${color};text-align:center;margin:20px 0 8px}\n.status-badge{display:block;padding:6px 20px;border-radius:999px;font-size:14px;font-weight:700;text-align:center;width:fit-content;margin:0 auto 20px;background:${bg};color:${fg}}\n.info-box{background:#f1f5f9;border-radius:10px;padding:16px;margin-top:16px}\n.info-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;border-bottom:1px solid #e2e8f0}\n.info-row:last-child{border-bottom:none}.label{color:#64748b}.value{font-weight:600;color:#1e293b}\n.footer{margin-top:28px;text-align:center;font-size:12px;color:#94a3b8}\n@media print{body{background:white;padding:0}.container{box-shadow:none}}\n<\/style>\n<p><\/head><body><\/p>\n<div class=\"container\">\n<div class=\"logo\">\n<div class=\"logo-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg><\/div>\n<p><span class=\"logo-text\">75% Attendance Calculator<\/span><\/div>\n<h1>Attendance Report<\/h1>\n<div class=\"date\">Generated on ${date}<\/div>\n<div class=\"divider\"><\/div>\n<div class=\"percent\">${r.percentage.toFixed(2)}%<\/div>\n<div class=\"status-badge\">${statusLabel}<\/div>\n<div class=\"info-box\">\n<div class=\"info-row\"><span class=\"label\">Target Attendance<\/span><span class=\"value\">${tg}%<\/span><\/div>\n<div class=\"info-row\"><span class=\"label\">Total Classes<\/span><span class=\"value\">${t}<\/span><\/div>\n<div class=\"info-row\"><span class=\"label\">Present Classes<\/span><span class=\"value\">${a}<\/span><\/div>\n<div class=\"info-row\"><span class=\"label\">Classes Missed<\/span><span class=\"value\">${t - a}<\/span><\/div>\n<p>${r.status !== \"safe\" ? `<\/p>\n<div class=\"info-row\"><span class=\"label\">Classes Needed for ${tg}%<\/span><span class=\"value\">${r.classesNeeded}<\/span><\/div>\n<p>` : \"\"}\n${r.status === \"safe\" ? `<\/p>\n<div class=\"info-row\"><span class=\"label\">Bunk Allowed (stay above ${tg}%)<\/span><span class=\"value\">${r.canBunk}<\/span><\/div>\n<p>` : \"\"}\n<\/p><\/div>\n<div class=\"footer\">Generated by 75% Attendance Calculator \u2022 For educational purposes only<\/div>\n<\/div>\n<p><script>window.onload=function(){window.print();}<\\\/script><\/body><\/html>`);\n  w.document.close();\n}<\/p>\n<p>function handleReset() {\n  $target.value = \"75\"; $total.value = \"\"; $attended.value = \"\";\n  $resultArea.innerHTML = \"\"; $predictArea.innerHTML = \"\";\n  clearError($target); clearError($total); clearError($attended);\n  localStorage.removeItem(\"att_target\");\n  localStorage.removeItem(\"att_total\");\n  localStorage.removeItem(\"att_attended\");\n}<\/p>\n<p>document.getElementById(\"btnCalculate\").addEventListener(\"click\", handleCalculate);\ndocument.getElementById(\"btnReset\").addEventListener(\"click\", handleReset);\n <\/script><br \/>\n      <!-- Bootstrap JS --><br \/>\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script><br \/>\n   <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>75 Attendance Calculator Attendance Calculator Home Calculator How to Use About Blog Pages Contact Privacy Policy Disclaimer Terms &amp; Conditions [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":4,"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/gascuthiramerur.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}