/* =====================================================================
   NEWTRI effects v3 - ONE CSS FILE (load after styles.css)
   ===================================================================== */
:root{--nx-ease:cubic-bezier(.2,.8,.2,1);--nx-navy:#0B2F6B;--nx-blue:#1E6FE0;--nx-cyan:#19B8FF}
body{overflow-x:clip}

/* ---------- 1. OPENING CURTAIN ---------- */
html.nx-loading{overflow:hidden}
html.nx-loading::before{content:"";position:fixed;inset:0;background:#031B3A;z-index:99998}
#nxCurtain{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center}
#nxCurtain .nx-cp{position:absolute;top:0;bottom:0;width:50.6%;background:#031B3A;
  transition:transform 1.1s cubic-bezier(.77,0,.18,1),box-shadow 1.1s ease}
#nxCurtain .nx-cl{left:0}#nxCurtain .nx-cr{right:0}
#nxCurtain .nx-cmid{position:relative;z-index:2;text-align:center;padding:0 16px;transition:opacity .5s ease,transform .8s cubic-bezier(.77,0,.18,1)}
#nxCurtain .nx-cname{display:flex;justify-content:center;padding-left:.12em;color:#fff;font:700 clamp(46px,12vw,124px)/1 'Space Grotesk',Inter,sans-serif;letter-spacing:.12em}
#nxCurtain .nx-cname span{display:inline-block;opacity:0;transform:translateY(60%) scale(.9);filter:blur(8px);
  animation:nxLetter .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--k) * .09s)}
@keyframes nxLetter{to{opacity:1;transform:none;filter:blur(0)}}
#nxCurtain .nx-csub{margin-top:14px;padding-left:.7em;color:#19B8FF;opacity:0;font:600 clamp(11px,2.2vw,20px)/1 Inter,sans-serif;letter-spacing:.7em;animation:nxCFade .8s ease 1s forwards}
@keyframes nxCFade{to{opacity:1}}
#nxCurtain .nx-cbar{width:min(260px,60vw);height:3px;margin:26px auto 0;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.14)}
#nxCurtain .nx-cbar i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#1E6FE0,#19B8FF);animation:nxCBar 1.7s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes nxCBar{to{transform:scaleX(1)}}
#nxCurtain.nx-open{pointer-events:none}
#nxCurtain.nx-open .nx-cl{transform:translateX(-101%);box-shadow:8px 0 60px rgba(25,184,255,.35)}
#nxCurtain.nx-open .nx-cr{transform:translateX(101%);box-shadow:-8px 0 60px rgba(25,184,255,.35)}
#nxCurtain.nx-open .nx-cmid{opacity:0;transform:scale(1.15)}

/* ---------- 2. HERO HEADLINE ----------
   Solid colours are set from JS (with !important), so the text can never disappear.
   Line 1-2 = your dark colour, blue only under the cursor.  Last line = permanent blue + moving shine + underline. */
.nxh-l{display:block;position:relative}
.nxh-l::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.nxh-hl::after{color:#1E6FE0;-webkit-text-fill-color:#1E6FE0;
  -webkit-mask-image:radial-gradient(circle 78px at var(--cx,-700px) var(--cy,-700px),#000 0,#000 40%,transparent 100%);
          mask-image:radial-gradient(circle 78px at var(--cx,-700px) var(--cy,-700px),#000 0,#000 40%,transparent 100%)}
.nxh-blue{filter:drop-shadow(0 8px 18px rgba(30,111,224,.32))}
.nxh-blue::after{color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,transparent 0%,transparent 38%,rgba(190,240,255,.95) 50%,transparent 62%,transparent 100%) no-repeat;
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  animation:nxhShine 3.4s ease-in-out 2.2s infinite}
@keyframes nxhShine{from{background-position:135% 0}to{background-position:-35% 0}}
.nxh-blue::before{content:"";position:absolute;left:.03em;bottom:-.05em;height:.07em;width:0;border-radius:99px;
  background:linear-gradient(90deg,#1E6FE0,#19B8FF,#8FE3FF);box-shadow:0 0 14px rgba(25,184,255,.7);
  animation:nxhUl 1.1s var(--nx-ease) 2.4s forwards}
@keyframes nxhUl{to{width:min(100%,5.4em)}}

/* ---------- 3. SECTION ENTRANCES (no clipping, so nothing gets cut off) ----------
   left right up round spiral flip zoom diagonal swing cube fold skew drop blur rise3d */
.nx-js .nx-sec{transition:opacity 1.9s var(--nx-ease),transform 2.6s var(--nx-ease),filter 2s var(--nx-ease),clip-path 2.8s var(--nx-ease)}

.nx-js .nx-sec.fx-left:not(.nx-in){opacity:0;transform:translateX(-80vw)}
.nx-js .nx-sec.fx-right:not(.nx-in){opacity:0;transform:translateX(80vw)}
.nx-js .nx-sec.fx-up:not(.nx-in){opacity:0;transform:translateY(45vh)}
.nx-js .nx-sec.fx-spiral:not(.nx-in){opacity:0;transform:rotate(-30deg) scale(.4)}
.nx-js .nx-sec.fx-flip:not(.nx-in){opacity:0;transform:perspective(1500px) rotateX(70deg) translateY(140px);transform-origin:50% 100%}
.nx-js .nx-sec.fx-zoom:not(.nx-in){opacity:0;transform:scale(.55)}
.nx-js .nx-sec.fx-diagonal:not(.nx-in){opacity:0;transform:translate(-60vw,40vh) rotate(-9deg)}
.nx-js .nx-sec.fx-swing:not(.nx-in){opacity:0;transform:perspective(1500px) rotateY(-95deg);transform-origin:0 50%}
.nx-js .nx-sec.fx-cube:not(.nx-in){opacity:0;transform:perspective(1800px) translateZ(-420px) rotateY(75deg);transform-origin:100% 50%}
.nx-js .nx-sec.fx-fold:not(.nx-in){opacity:0;transform:perspective(1600px) rotateX(-75deg) translateY(-60px);transform-origin:50% 0}
.nx-js .nx-sec.fx-skew:not(.nx-in){opacity:0;transform:translateX(65vw) skewX(-22deg)}
.nx-js .nx-sec.fx-rise3d:not(.nx-in){opacity:0;transform:perspective(1400px) translateY(160px) translateZ(-300px) rotateX(18deg)}
.nx-js .nx-sec.fx-drop:not(.nx-in){opacity:0;transform:translate3d(0,-70vh,0)}
.nx-js .nx-sec.fx-drop.nx-in{transition:opacity 1.2s ease,transform 2.3s cubic-bezier(.3,1.35,.5,1)}
.nx-js .nx-sec.fx-blur:not(.nx-in){opacity:0;filter:blur(26px);transform:scale(1.12)}
.nx-js .nx-sec.fx-blur.nx-in{filter:none}
/* round: opens like a circle, then the clip is removed completely */
.nx-js .nx-sec.fx-round:not(.nx-in){opacity:1;clip-path:circle(0% at 50% 25%);transform:scale(.92)}
.nx-js .nx-sec.fx-round.nx-in{clip-path:circle(150% at 50% 25%)}
.nx-js .nx-sec.fx-round.nx-done{clip-path:none}

/* failsafe added by the watchdog if a section ever stays invisible */
.nx-js .nx-sec.nx-force{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
.nx-js .nx-sec.nx-force .nx-kid{opacity:1!important}

/* ---------- 4. CARDS: each card arrives differently ---------- */
.nx-js .nx-kid{transition:opacity 1.5s var(--nx-ease) calc(.8s + var(--i,0) * 170ms),
  transform 1.7s var(--nx-ease) calc(.8s + var(--i,0) * 170ms),
  box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.nx-js .nx-sec.nx-done .nx-kid{transition-delay:0s;transition-duration:.35s,.35s,.25s,.25s,.25s}
.nx-js .nx-sec:not(.nx-in) .nx-kid{opacity:0}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k0{transform:translateX(-110px)}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k1{transform:translateY(90px) scale(.9)}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k2{transform:translateX(110px)}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k3{transform:scale(.45) rotate(-10deg)}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k4{transform:perspective(900px) rotateY(75deg)}
.nx-js .nx-sec:not(.nx-in) .nx-kid.k5{transform:translateY(-80px) scale(.92)}

/* ---------- 5. BUTTONS: magnetic + ripple ---------- */
.btn{position:relative;overflow:hidden;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease,translate .3s ease}
.nx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;transform:scale(0);animation:nxRipple .75s ease-out forwards}
@keyframes nxRipple{to{transform:scale(1);opacity:0}}

.btn::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn:hover::before{left:130%}

/* ---------- 6. SPOTLIGHT ON CARDS ---------- */
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card){position:relative}
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(30,111,224,.14),transparent 65%)}
:is(.offer-card,.why-card,.trainer-card,.course-card,.institution-card,.faq-item,.contact-card):hover::after{opacity:1}

/* ---------- 7. HEADINGS ---------- */
.nx-wh .nx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.nx-wh .nx-w>span{display:inline-block;transform:translateY(115%);transition:transform 1.3s var(--nx-ease);transition-delay:calc(.9s + var(--wi) * 110ms)}
.nx-wh.nx-wh-in .nx-w>span{transform:none}
.nx-wh::after{content:"";display:block;width:0;height:3px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,#1E6FE0,#19B8FF);transition:width 1.3s var(--nx-ease) 1.6s}
.nx-wh.nx-wh-in::after{width:84px}
.section-head.center .nx-wh::after{margin-left:auto;margin-right:auto}

/* ---------- 8. BACKGROUND GLOWS, CURSOR GLOW, PROGRESS BAR ---------- */
.nx-blob{position:fixed;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.16;pointer-events:none;z-index:0;will-change:translate}
.nx-blob.b1{top:-12vmax;left:-12vmax;background:#1E6FE0}
.nx-blob.b2{bottom:-14vmax;right:-14vmax;background:#19B8FF}
#nxCursor{position:fixed;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(30,111,224,.20),rgba(25,184,255,.07) 50%,transparent 72%);opacity:0;transition:opacity .4s ease;will-change:transform}
#nxProgress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:99990;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#0B2F6B,#1E6FE0,#19B8FF);pointer-events:none}

/* ---------- 9. DOT MENU ---------- */
#nxDots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:14px;padding:12px 8px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(11,47,107,.15)}
#nxDots a{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:#B9CDEA;transition:transform .25s ease,background .25s ease}
#nxDots a:hover{transform:scale(1.35);background:#1E6FE0}
#nxDots a.on{transform:scale(1.35);background:#0B2F6B}
#nxDots a span{position:absolute;right:24px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;padding:5px 10px;border-radius:6px;background:#0B2F6B;color:#fff;font:600 12px Inter,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#nxDots a:hover span{opacity:1;transform:translateY(-50%)}
@media (max-width:900px){#nxDots{display:none}}

/* ---------- 10. COLLEGE STRIP: full page width, edge to edge ---------- */
.nx-strip{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:34px 0 30px;overflow:hidden;
  background:linear-gradient(180deg,rgba(30,111,224,.06),rgba(25,184,255,.10),rgba(30,111,224,.06));}
.nx-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:14px 0 26px;      /* room for the lift and the shadow */
  margin:-14px 0 0;         /* cancels the top padding so the layout stays the same */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.nx-track{display:flex;gap:14px;width:max-content}
.nx-chip{flex:none;padding:13px 24px;border-radius:999px;background:#fff;color:#0B2F6B;white-space:nowrap;font:600 14px/1 Inter,sans-serif;border:1px solid #D6E3F5;box-shadow:0 4px 14px rgba(11,47,107,.07);transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.nx-chip:hover{transform:translateY(-3px);background:#0B2F6B;color:#fff;box-shadow:0 10px 22px rgba(11,47,107,.25)}
.nx-strip .nx-stats{max-width:1100px;margin:22px auto 0;padding:0 20px}

/* highlighted sentence above the colleges */
.nx-strip-lead{margin:0 auto 24px;padding:0 20px;max-width:960px;text-align:center;color:#0B2F6B;
  font:700 clamp(20px,2.7vw,34px)/1.35 'Space Grotesk',Inter,sans-serif;
  transition:opacity 1.2s var(--nx-ease),transform 1.4s var(--nx-ease)}
.nx-strip-lead mark{color:#1E6FE0;padding:0 .12em;border-radius:6px;
  background:linear-gradient(90deg,rgba(25,184,255,.38),rgba(30,111,224,.22)) no-repeat 0 90%/0% .5em;
  transition:background-size 1.6s var(--nx-ease) .9s}
.nx-strip.nx-lit .nx-strip-lead mark{background-size:100% .5em}
.nx-strip.nx-pre:not(.nx-lit) .nx-strip-lead{opacity:0;transform:translateY(26px)}
.nx-strip .nx-marquee{transition:opacity 1.4s ease}
.nx-strip.nx-pre:not(.nx-lit) .nx-marquee{opacity:0}

.nx-net{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- 11. EXTRA STATS ---------- */
.nx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:28px 0 4px}
.nx-stat{padding:20px 16px;border-radius:16px;background:#fff;border:1px solid #D6E3F5;text-align:center;box-shadow:0 6px 20px rgba(11,47,107,.08)}
.nx-stat b{display:block;font:700 clamp(28px,4vw,40px)/1.1 'Space Grotesk',Inter,sans-serif;color:#1E6FE0}
.nx-stat span{display:block;margin-top:6px;font:600 13px Inter,sans-serif;color:#0B2F6B;opacity:.8}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  #nxCurtain,html.nx-loading::before,#nxCursor,#nxProgress{display:none}
  html.nx-loading{overflow:auto}
  .nxh-blue::after,.nxh-blue::before{animation:none}.nxh-blue::before{width:min(100%,5.4em)}
  .nx-wh .nx-w>span{transform:none}.nx-wh::after{width:84px}
  .nx-ripple{display:none}
  .nx-js .nx-sec,.nx-js .nx-kid{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
}