*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:Cairo,Arial,sans-serif;line-height:1.6;color:#fff;overflow:hidden;height:100vh}:root{--neon-green: #39FF14;--neon-blue: #00D4FF;--electric-purple: #8A2BE2;--cyber-pink: #FF1493;--dark-overlay: rgba(0, 0, 0, .6);--text-primary: #ffffff;--text-secondary: #e0e0e0;--glow-intensity: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green), 0 0 60px var(--neon-green);--blue-glow: 0 0 25px var(--neon-blue), 0 0 50px var(--neon-blue), 0 0 75px var(--neon-blue);--pulse-duration: 1s}@media (prefers-reduced-motion: reduce){:root{--pulse-duration: 0s}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.portal-container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.background-layer{position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/hills-background-Oal-9JTU.jpg) center center/cover no-repeat;filter:brightness(.8) contrast(1.2) saturate(1.1);z-index:-2}.gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(0,212,255,.1) 0%,transparent 50%),linear-gradient(135deg,#39ff140d,#000c),linear-gradient(180deg,#0006,#000000d9);z-index:-1}.content-wrapper{position:relative;width:90%;max-width:1200px;height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.center-circle{position:relative;width:-moz-fit-content;width:fit-content;min-width:200px;max-width:600px;height:auto;aspect-ratio:5/1;padding:20px 40px;border-radius:20px;background:#fff;display:flex;justify-content:center;align-items:center;z-index:10;margin-bottom:60px;border:3px solid var(--neon-green);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 30px #39ff1466,0 8px 32px #0000004d}.main-logo{width:30%;height:auto;max-width:120px;min-width:60px;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 0 15px rgba(57,255,20,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.2));transition:all .3s ease;z-index:2;position:relative}.glow-effect{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;box-shadow:var(--glow-intensity);pointer-events:none}.center-circle .glow-effect{border-radius:20px;box-shadow:0 0 20px var(--neon-green),0 0 40px var(--neon-green),0 0 60px #39ff144d;z-index:3}.connection-lines{position:absolute;width:100%;height:100%;pointer-events:none;z-index:1}.line{position:absolute;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(57,255,20,.2) 10%,rgba(57,255,20,.8) 30%,var(--neon-green) 50%,rgba(57,255,20,.8) 70%,rgba(57,255,20,.2) 90%,transparent 100%);box-shadow:0 0 8px #39ff1499,0 0 16px #39ff1466,0 0 24px #39ff1433;filter:blur(.5px);transition:all .4s ease}.line-left{top:170px;left:40%;width:280px;height:3px;transform:translate(-50%) rotate(-30deg);transform-origin:left center}.line-right{top:170px;right:40%;width:280px;height:3px;transform:translate(50%) rotate(30deg);transform-origin:right center}.school-options{position:absolute;width:100%;height:80%;top:20%;display:flex;justify-content:space-between;align-items:center}.school-option{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-primary);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;padding:20px;border-radius:20px;background:linear-gradient(145deg,#0006,#0003);-webkit-backdrop-filter:blur(15px) saturate(1.1);backdrop-filter:blur(15px) saturate(1.1);border:2px solid transparent;outline:none;box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff1a;transform:translateY(0) scale(1);width:280px;height:280px;justify-content:center}.school-option:hover,.school-option:focus{border-color:var(--neon-blue);background:linear-gradient(145deg,#00d4ff26,#0064c81a),linear-gradient(145deg,#0006,#0003);transform:scale(1.08) translateY(0);box-shadow:0 0 30px #00d4ff66,0 0 60px #00d4ff33,0 12px 40px #0006,inset 0 1px #fff3}.school-option:focus{box-shadow:0 0 0 3px #00d4ff99,0 0 30px #00d4ff66,0 0 60px #00d4ff33,0 12px 40px #0006}.option-circle{position:relative;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffffffa,#f0f8fff2);display:flex;justify-content:center;align-items:center;margin-bottom:15px;border:3px solid var(--neon-green);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #39ff144d,0 4px 20px #0003,inset 0 1px #fffc}.school-option:hover .option-circle,.school-option:focus .option-circle{border-color:var(--neon-blue);background:radial-gradient(circle at 30% 30%,#fff,#e6f5fffa);box-shadow:0 0 35px #00d4ff80,0 0 70px #00d4ff4d,0 8px 30px #0000004d,inset 0 1px #ffffffe6;transform:scale(1.1)}.school-logo{width:85px;height:85px;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 0 12px rgba(57,255,20,.3)) drop-shadow(0 2px 6px rgba(0,0,0,.2));transition:all .3s ease}.school-option[data-school=ghis] .school-logo{width:70px;height:70px}.school-option:hover .school-logo,.school-option:focus .school-logo{filter:drop-shadow(0 0 20px rgba(0,212,255,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.3));transform:scale(1.05)}.school-name{font-size:1.1rem;font-weight:600;text-align:center;margin-bottom:8px;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 10px rgba(255,255,255,.1);line-height:1.3;transition:all .3s ease}.school-option:hover .school-name,.school-option:focus .school-name{color:var(--neon-blue);text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 15px rgba(0,212,255,.6),0 0 30px rgba(0,212,255,.3);transform:scale(1.02)}.school-code{font-size:.9rem;font-weight:700;color:var(--neon-green);text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 10px rgba(57,255,20,.4);letter-spacing:2px;transition:all .3s ease}.school-option:hover .school-code,.school-option:focus .school-code{color:var(--neon-blue);text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 15px rgba(0,212,255,.6),0 0 30px rgba(0,212,255,.3);transform:scale(1.02)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 35px #00d4ff80,0 0 70px #00d4ff4d,0 8px 30px #0000004d}50%{box-shadow:0 0 45px #00d4ffb3,0 0 90px #00d4ff66,0 8px 30px #0000004d}}.school-option:hover .option-circle,.school-option:focus .option-circle{animation:glow-pulse var(--pulse-duration) ease-in-out infinite}.option-left{position:relative;margin-left:5%}.option-right{position:relative;margin-right:5%}.portal-footer{position:absolute;bottom:30px;width:100%;text-align:center;z-index:10}.portal-footer p{font-size:1rem;font-weight:400;color:var(--text-secondary);text-shadow:1px 1px 2px rgba(0,0,0,.8);letter-spacing:1px}@media (max-width: 1024px){.content-wrapper{height:70vh}.center-circle{width:100px;height:100px}.main-logo{width:52px;height:52px}.school-option{width:240px;height:240px}.option-circle{width:100px;height:100px}.school-logo{width:70px;height:70px}.school-option[data-school=ghis] .school-logo{width:58px;height:58px}.school-name{font-size:1rem}}@media (max-width: 768px){.content-wrapper{height:90vh}.center-circle{width:90%;height:100px;margin-top:30px;margin-bottom:40px}.main-logo{width:64px;height:64px}.connection-lines{display:none}.school-options{flex-direction:column;gap:30px;margin-top:20px;align-items:center;justify-content:center;width:100%}.line-left,.line-right{display:none}.option-left,.option-right{margin-left:0;margin-right:0;width:280px;height:280px}}@media (max-width: 480px){.content-wrapper{width:95%;padding:0 15px 15px;height:95vh;justify-content:flex-start}.center-circle{min-width:140px;max-width:300px;padding:10px 20px;margin-top:20px;margin-bottom:30px}.main-logo{max-width:60px;min-width:30px}.school-options{gap:25px;margin-top:30px;position:static;height:auto;width:100%;top:auto;align-items:center;justify-content:center}.school-option{width:280px;height:280px;padding:20px;justify-content:center}.option-left,.option-right{margin-left:0;margin-right:0;width:280px;height:280px}.option-circle{width:120px;height:120px;margin-bottom:18px}.school-logo{width:85px;height:85px}.school-option[data-school=ghis] .school-logo{width:70px;height:70px}.school-name{font-size:1.1rem;margin-bottom:10px}.school-code{font-size:.9rem}.portal-footer{bottom:20px}.portal-footer p{font-size:.9rem}}@media (prefers-contrast: high){.school-option{border:3px solid var(--neon-green);background:#000c}.center-circle,.option-circle{border:4px solid var(--neon-green)}}@media print{.glow-effect,.connection-lines{display:none}body{color:#000}.gradient-overlay{background:#fffc}}.center-circle{display:inline-flex!important;justify-content:center!important;align-items:center!important;width:auto!important;height:auto!important;min-width:0!important;max-width:90vw!important;aspect-ratio:auto!important;padding:clamp(10px,2vmin,18px)!important}:root{--main-logo-asset-width: 2048px;--main-logo-scale: .1}.main-logo{width:calc(var(--main-logo-asset-width) * var(--main-logo-scale))!important;height:auto!important;max-width:none!important;min-width:0!important;-o-object-fit:contain!important;object-fit:contain!important}@media (max-width: 1024px){.center-circle{width:auto!important;height:auto!important;padding:clamp(10px,2vmin,16px)!important}.main-logo{width:clamp(140px,35vw,320px)!important;height:auto!important}}@media (max-width: 480px){.center-circle{padding:clamp(10px,2.5vmin,14px)!important}.main-logo{width:clamp(120px,50vw,240px)!important}}@media (min-width: 1025px){:root{--main-logo-scale: .1}.main-logo{width:calc(2048px * var(--main-logo-scale))!important;height:auto!important;max-width:none!important;min-width:0!important;-o-object-fit:contain!important;object-fit:contain!important}}@media (min-width: 768px) and (max-width: 1024px){:root{--main-logo-scale: .8}.main-logo{width:clamp(160px,calc(2048px * var(--main-logo-scale)),320px)!important;height:auto!important}.center-circle{margin-bottom:24px!important}}@media (max-width: 767px){:root{--main-logo-scale: .5}.main-logo{width:clamp(140px,calc(2048px * var(--main-logo-scale)),260px)!important;height:auto!important}.center-circle{margin-bottom:20px!important}}@media (max-width: 767px){.school-option{width:240px!important;height:240px!important}.option-circle{width:100px!important;height:100px!important}}.center-circle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-width:0!important;max-width:90vw!important;aspect-ratio:auto!important;padding:clamp(10px,2vmin,18px)!important}.main-logo{width:calc(2048px * var(--main-logo-scale))!important;height:auto!important;max-width:none!important;min-width:0!important;-o-object-fit:contain!important;object-fit:contain!important}@media (min-width: 1025px){:root{--main-logo-scale: .1}}@media (min-width: 768px) and (max-width: 1024px){:root{--main-logo-scale: .08}.center-circle{margin-bottom:24px!important}}@media (max-width: 767px){:root{--main-logo-scale: .05}.center-circle{margin-bottom:20px!important}}@media (max-width: 1024px){.center-circle{width:auto!important;height:auto!important}}.school-option[data-school=ghis] .school-logo{width:70px!important;height:70px!important}@media (max-width: 1024px){.school-option[data-school=ghis] .school-logo,img[alt="Green Heights International School Logo"]{width:60px!important;height:60px!important;-o-object-fit:contain!important;object-fit:contain!important}}@media (max-width: 1024px){.school-option[data-school=ghis]:hover .school-logo,.school-option[data-school=ghis]:focus .school-logo{transform:none!important}}