/*
Theme Name: IT Tower Varsity
Description: Animated 3D 5-page IT college theme (SBTE Sindh)
Version: 1.0
Text Domain: ittower-varsity
*/

:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#070b1a;--bg2:#0e1530;--tx:#eef1fb;--mut:#9aa4c7;--gold:#e8c26a;--blue:#3aa0ff;--card:rgba(255,255,255,.06);--bd:rgba(232,194,106,.25)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f6f7fc;--bg2:#e9ecf8;--tx:#121833;--mut:#555e80;--gold:#a6781a;--blue:#1769d1;--card:rgba(255,255,255,.75);--bd:rgba(166,120,26,.35)}}
:root[data-theme="light"]{--bg:#f6f7fc;--bg2:#e9ecf8;--tx:#121833;--mut:#555e80;--gold:#a6781a;--blue:#1769d1;--card:rgba(255,255,255,.75);--bd:rgba(166,120,26,.35)}
:root[data-theme="dark"]{--bg:#070b1a;--bg2:#0e1530;--tx:#eef1fb;--mut:#9aa4c7;--gold:#e8c26a;--blue:#3aa0ff;--card:rgba(255,255,255,.06);--bd:rgba(232,194,106,.25)}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;line-height:1.6}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;margin:.2em 0}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
#pre{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center;transition:opacity .6s}
#pre b{font:800 2rem 'Playfair Display',serif;color:var(--gold);animation:pl 1s infinite alternate}
@keyframes pl{to{transform:scale(1.15);text-shadow:0 0 30px var(--gold)}}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:6px;padding:10px 4vw;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);flex-wrap:wrap}
.logo{font:800 1.3rem 'Playfair Display',serif;color:var(--gold);margin-right:auto;cursor:pointer}
nav a{color:var(--tx);padding:8px 12px;border-radius:20px;cursor:pointer;font-size:.9rem;text-decoration:none}
nav a.on,nav a:hover{background:var(--card);color:var(--gold)}
#tg{background:none;border:1px solid var(--bd);color:var(--gold);border-radius:50%;width:36px;height:36px;cursor:pointer}
main{position:relative;z-index:1}
.pg{display:none;padding:0 4vw 60px;max-width:1200px;margin:auto;animation:pi .6s}
.pg.on{display:block}
@keyframes pi{from{opacity:0;transform:translateY(24px)}}
.sec{padding:50px 0 10px}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}h2 span,.gold{color:var(--gold)}
.mut{color:var(--mut)}
.btn{display:inline-block;border:0;cursor:pointer;padding:12px 26px;border-radius:30px;font-weight:600;color:#10142a;background:linear-gradient(135deg,var(--gold),#fff3c4);box-shadow:0 0 24px rgba(232,194,106,.35);transition:.2s;text-decoration:none}
.btn:hover{transform:translateY(-3px) scale(1.04)}
.btn.o{background:none;color:var(--tx);border:1px solid var(--bd);box-shadow:none}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:22px;backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:transform .15s,box-shadow .3s;transform-style:preserve-3d}
.card:hover{box-shadow:0 0 30px rgba(58,160,255,.3)}
.card .gl{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 50%);opacity:0;transition:.3s}
.card:hover .gl{opacity:1}
.ic{font-size:2rem}
/* slider */
.sl{position:relative;min-height:440px;margin-top:20px;border-radius:24px;overflow:hidden;border:1px solid var(--bd);background:linear-gradient(135deg,rgba(58,160,255,.12),rgba(232,194,106,.1))}
.sd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:6vw;opacity:0;transform:translateX(40px);transition:.8s;pointer-events:none}
.sd.on{opacity:1;transform:none;pointer-events:auto}
.sd h1{font-size:clamp(2rem,6vw,3.8rem);max-width:640px;line-height:1.1}
.sd p{max-width:520px}
.ar{position:absolute;top:50%;background:var(--card);border:1px solid var(--bd);color:var(--gold);width:42px;height:42px;border-radius:50%;cursor:pointer;z-index:3}
.dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots i{width:10px;height:10px;border-radius:5px;background:var(--mut);cursor:pointer;transition:.3s}.dots i.on{width:28px;background:var(--gold)}
.num{font:800 2.4rem 'Playfair Display',serif;color:var(--gold)}
.tl{display:flex;gap:14px;overflow-x:auto;padding:10px 2px}
.tl div{min-width:150px;flex:1;text-align:center;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--bd);position:relative}
.tl div b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin:0 auto 6px;background:linear-gradient(135deg,var(--blue),var(--gold));color:#10142a}
.mq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--bd);padding:12px 0;margin-top:40px}
.mq span{display:inline-block;animation:mq 22s linear infinite;color:var(--mut);font-weight:600;letter-spacing:.15em}
@keyframes mq{to{transform:translateX(-50%)}}
.rv{opacity:0;transform:translateY(30px);transition:.8s}.rv.in{opacity:1;transform:none}
.tab{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tab button{background:var(--card);color:var(--tx);border:1px solid var(--bd);padding:8px 16px;border-radius:20px;cursor:pointer}
.tab button.on{background:var(--gold);color:#10142a}
.gal div{height:150px;border-radius:14px;display:grid;place-items:center;font-size:.9rem;color:#fff;cursor:pointer;transition:.3s;font-weight:600}
.gal div:hover{transform:scale(1.05) rotate(-1deg)}
input,select,textarea{width:100%;padding:12px;margin:6px 0;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);font:inherit}
.stp{display:flex;gap:6px;margin:12px 0}.stp i{flex:1;height:5px;border-radius:3px;background:var(--bd)}.stp i.on{background:var(--gold)}
table{width:100%;border-collapse:collapse}th,td{padding:10px;text-align:left;border-bottom:1px solid var(--bd);font-size:.9rem}
details{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:10px 0}summary{cursor:pointer;font-weight:600}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;background:#25d366;color:#fff;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 0 20px #25d366;animation:pl 1.4s infinite alternate}
footer{position:relative;z-index:1;text-align:center;padding:30px;color:var(--mut);border-top:1px solid var(--bd)}
#lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.85);display:none;place-items:center;font:800 2rem 'Playfair Display';color:#fff}
@media(max-width:600px){.sl{min-height:520px}}