@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
  --bg:#070a13;
  --bg2:#0d1222;
  --card:#11182b;

  --text:#f7f8ff;
  --muted:#aab2c8;

  --line:rgba(255,255,255,.10);

  --primary:#7c5cff;
  --primary2:#00d4ff;
  --accent:#ff4ecd;

  --max:1180px;

  --shadow:0 25px 80px rgba(0,0,0,.35);

  /* Compatibility variables */
  --bg-alt:#0d1222;
  --text-muted:#aab2c8;
  --line-bright:rgba(255,255,255,.16);
  --accent-2:#00d4ff;

  --radius:22px;
  --transition:.3s ease;

  /* Animation / Gaming compatibility */
  --bg-base:#070a13;
  --bg-surface:#0d1222;
  --bg-panel:#0d1222;
  --bg-panel-2:#11182b;

  --text-primary:#f7f8ff;
  --text-dim:#aab2c8;

  --cyan:#00d4ff;
  --magenta:#ff4ecd;
  --amber:#ffc24b;

  --accent-glow:rgba(255,78,205,.35);
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}

body{
  font-family:Inter,Arial,sans-serif;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(124,92,255,.15),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(0,212,255,.10),
      transparent 28%
    ),
    var(--bg);

  color:var(--text);
  line-height:1.6;

  overflow-x:hidden;
}

body.modal-open{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img,
video{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   GLOBAL CONTAINER / SECTIONS
========================================================= */

.container{
  width:min(var(--max),calc(100% - 40px));
  margin-inline:auto;
}

.section{
  padding:100px 0;
}

section{
  padding:84px 0;
}

.section-head{
  max-width:720px;
  margin-bottom:42px;
}

.section-head.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  color:#b9adff;

  text-transform:uppercase;
  letter-spacing:.14em;

  font-size:12px;
  font-weight:700;

  margin-bottom:14px;
}

.eyebrow:before{
  content:"";

  width:28px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary2)
    );
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4{
  font-family:Outfit,Arial,sans-serif;
  line-height:1.05;
}

h1{
  font-size:clamp(44px,7vw,82px);
  letter-spacing:-.05em;
}

h2{
  font-size:clamp(34px,5vw,58px);
  letter-spacing:-.035em;
}

h3{
  font-size:24px;
}

p{
  color:var(--muted);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border:0;
  cursor:pointer;

  padding:14px 21px;

  border-radius:13px;

  background:
    linear-gradient(
      100deg,
      var(--primary),
      #9a65ff 55%,
      var(--accent)
    );

  color:#fff;

  font-weight:700;

  box-shadow:
    0 12px 35px rgba(124,92,255,.25);

  transition:
    .25s transform,
    .25s box-shadow;
}

.btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 45px rgba(124,92,255,.35);
}

.btn-outline{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  box-shadow:none;
}

.btn-outline:hover{
  background:rgba(255,255,255,.08);
}

.btn-small{
  padding:10px 15px;
  border-radius:10px;
  font-size:14px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:fixed;

  z-index:1000;

  top:0;
  left:0;
  right:0;

  background:rgba(7,10,19,.70);

  backdrop-filter:blur(18px);

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.nav{
  height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:22px;
}

.logo{
  display:flex;
  align-items:center;
  gap:11px;

  font-family:Outfit;
  font-weight:800;
  font-size:19px;

  white-space:nowrap;
}

.logo img{
  width:74px;
  height:auto;
}


/* Navigation */

.nav-links{
  display:flex;

  align-items:center;

  gap:6px;

  list-style:none;
}

.nav-links>li{
  position:relative;
}

.nav-links>li>a{
  display:flex;
  align-items:center;

  gap:7px;

  padding:11px 13px;

  color:#dfe3f1;

  font-size:14px;

  border-radius:10px;
}

.nav-links>li>a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

/* Hide mobile actions on desktop */
#navList > .mobile-nav-actions {
  display: none;
}

/* Dropdown */

.dropdown{
  position:absolute;

  top:calc(100% + 12px);
  left:0;

  width:285px;

  padding:10px;

  background:rgba(13,18,34,.97);

  border:1px solid var(--line);

  border-radius:17px;

  box-shadow:var(--shadow);

  opacity:0;
  visibility:hidden;

  transform:translateY(8px);

  transition:.2s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
}

.dropdown-title{
  padding:10px 12px 6px;

  color:#7f8aa5;

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-weight:700;
}

.dropdown a{
  display:block;

  padding:10px 12px;

  border-radius:10px;

  font-size:14px;

  color:#d9deed;
}

.dropdown a:hover{
  background:rgba(124,92,255,.13);
  color:#fff;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.menu-toggle{
  display:none;

  border:1px solid var(--line);

  background:rgba(255,255,255,.04);

  color:#fff;

  border-radius:10px;

  width:42px;
  height:42px;

  cursor:pointer;
}

/* FLOATING ACTION BUTTONS */
    .call-float:hover { transform: scale(1.12); color: #fff; }
    @keyframes pulse-call { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 46, 0.55); } 70% { box-shadow: 0 0 0 18px rgba(255, 91, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 46, 0); } }
    .wa-float {
      position: fixed; bottom: 28px; right: 28px; z-index: 1200;
      width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: 30px;
      box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); cursor: pointer; transition: transform 0.3s ease; animation: pulse-wa 2.4s infinite;
    }
    .wa-float:hover { transform: scale(1.12); color: #fff; }
    @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
    .back-top {
      position: fixed; bottom: 28px; left: 28px; z-index: 1200; width: 48px; height: 48px;
      border-radius: 50%; background: var(--card); border: 1px solid var(--line-bright); color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: 16px;
      opacity: 0; pointer-events: none; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .back-top.show { opacity: 1; pointer-events: auto; }
    .back-top:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-4px); }


/* =========================================================
   MAIN VIDEO HERO
========================================================= */

.main_hero{
  position:relative;

  width:100%;

  height:100vh;

  min-height:600px;

  overflow:hidden;

  display:flex;

  align-items:center;
  justify-content:center;
}


/* Background video */

.hero-video{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:1;

  z-index:1;
}


/* Overlay */

.main_hero::after{
  content:"";

  position:absolute;

  inset:0;

  background:rgba(7,10,19,.35);

  z-index:2;

  pointer-events:none;
}


/* Hero content */

.hero-overlay-content{
  position:relative;

  z-index:3;

  width:90%;

  max-width:900px;

  margin:auto;

  text-align:center;

  color:white;
}

.hero-overlay-content span{
  display:block;

  margin-bottom:20px;

  font-size:14px;

  font-weight:700;

  letter-spacing:3px;

  color:#b9a9ff;

  text-transform:uppercase;
}

.hero-overlay-content h1{
  margin:0 0 25px;

  font-size:clamp(45px,7vw,90px);

  line-height:1;

  font-weight:800;

  letter-spacing:-3px;
}

.hero-overlay-content h1 strong{
  background:
    linear-gradient(
      90deg,
      #7c5cff,
      #00d4ff,
      #ff4ecd
    );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}

.hero-overlay-content p{
  max-width:650px;

  margin:0 auto 30px;

  font-size:18px;

  line-height:1.7;

  color:rgba(255,255,255,.85);
}

.hero-btn{
  display:inline-block;

  padding:14px 28px;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #7c5cff,
      #ff4ecd
    );

  color:white;

  text-decoration:none;

  font-weight:700;

  transition:.3s ease;
}

.hero-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 10px 30px rgba(124,92,255,.35);
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  overflow:hidden;

  background:rgba(255,255,255,.025);
}

.marquee-track{
  display:flex;

  gap:55px;

  white-space:nowrap;

  padding:17px 0;

  width:max-content;

  animation:scroll 22s linear infinite;
}

.marquee span{
  font-family:Outfit;

  font-size:14px;

  color:#9ca6bd;

  text-transform:uppercase;

  letter-spacing:.14em;
}

@keyframes scroll{
  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

.cards{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;
}

.category-card{
  position:relative;

  min-height:360px;

  border:1px solid var(--line);

  border-radius:22px;

  overflow:hidden;

  background:#0c1120;

  transition:.35s;

  isolation:isolate;
}

.category-card:hover{
  transform:translateY(-8px);

  border-color:rgba(124,92,255,.45);

  box-shadow:
    0 25px 60px rgba(0,0,0,.3);
}

.category-card img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:.5;

  transition:.5s;
}

.category-card:hover img{
  transform:scale(1.08);
  opacity:.65;
}

.category-card:after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(5,8,17,.05),
      rgba(5,8,17,.95)
    );
}

.category-content{
  position:absolute;

  z-index:2;

  left:22px;
  right:22px;
  bottom:22px;
}

.category-content .count{
  font-size:12px;
  color:#b8c0d4;
}

.category-content h3{
  margin:6px 0 7px;
}

.category-content p{
  font-size:13px;
}


/* =========================================================
   COURSE GRID / COURSE CARDS
========================================================= */

.course-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;
}

.course-card{
  border:1px solid var(--line);

  border-radius:16px;

  overflow:hidden;

  background:var(--bg-base);

  display:flex;

  flex-direction:column;

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.course-card:hover{
  transform:translateY(-6px);

  border-color:var(--magenta);
}

.course-image{
  height:205px;

  position:relative;

  overflow:hidden;
}

.course-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.5s;
}

.course-card:hover .course-image img{
  transform:scale(1.06);
}

.course-tag{
  position:absolute;

  top:13px;
  left:13px;

  background:rgba(7,10,19,.78);

  border:1px solid var(--line);

  backdrop-filter:blur(10px);

  padding:6px 9px;

  border-radius:999px;

  font-size:11px;
}

.course-body{
  padding:21px;
}

.course-body h3{
  margin-bottom:9px;
}

.course-body p{
  font-size:13px;
  margin-bottom:16px;
}

.course-meta{
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-bottom:17px;
}

.meta{
  font-size:11px;

  color:#b9c1d3;

  padding:5px 8px;

  border-radius:7px;

  background:rgba(255,255,255,.05);
}

.course-buttons{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}


/* =========================================================
   ANIMATION / GAMING HERO
========================================================= */

.hero{
  position:relative;

  padding:88px 0 64px;

  overflow:hidden;

  border-bottom:1px solid var(--line);
}

.hero::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      600px 300px at 85% -10%,
      rgba(255,77,141,.18),
      transparent 60%
    ),
    radial-gradient(
      500px 260px at 10% 110%,
      rgba(52,228,234,.14),
      transparent 60%
    );

  pointer-events:none;
}

.hero-grid{
  position:relative;

  display:grid;

  grid-template-columns:1.15fr .85fr;

  gap:48px;

  align-items:center;
}

.eyebrow-line{
  display:flex;

  align-items:center;

  gap:10px;

  color:var(--cyan);

  font-size:.85rem;

  font-weight:600;

  margin-bottom:18px;
}

.eyebrow-line .dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--cyan);

  box-shadow:
    0 0 10px var(--cyan);
}

.hero h1{
  font-size:clamp(3rem,7vw,5.4rem);

  color:var(--text-primary);
}

.hero h1 .accent{
  color:var(--magenta);
}

.hero p.lede{
  color:var(--text-muted);

  font-size:1.12rem;

  max-width:46ch;

  margin:22px 0 30px;
}

.hero-cta-row{
  display:flex;

  gap:16px;

  align-items:center;

  flex-wrap:wrap;
}

.hero-link-quiet{
  color:var(--text-muted);

  font-size:.92rem;

  border-bottom:1px solid var(--line);

  padding-bottom:2px;
}

.hero-link-quiet:hover{
  color:var(--text-primary);

  border-color:var(--text-primary);
}

.hero-art{
  position:relative;

  aspect-ratio:1/1;
}

.hero-art svg{
  width:100%;
  height:100%;
}


/* =========================================================
   JUMP TABS
========================================================= */

.jump-tabs{
  border-bottom:1px solid var(--line);

  background:var(--bg-surface);
}

.jump-tabs .wrap{
  display:flex;

  gap:32px;

  overflow-x:auto;

  padding-top:0;
  padding-bottom:0;
}

.jump-tabs a{
  display:inline-block;

  padding:16px 2px;

  font-size:.92rem;

  color:var(--text-muted);

  border-bottom:2px solid transparent;

  white-space:nowrap;
}

.jump-tabs a:hover{
  color:var(--text-primary);

  border-color:var(--line);
}


/* =========================================================
   STATS
========================================================= */

.stats{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  border:1px solid var(--line);

  border-radius:22px;

  overflow:hidden;

  background:rgba(255,255,255,.025);
}

.stat{
  padding:30px;

  border-right:1px solid var(--line);
}

.stat:last-child{
  border-right:0;
}

.stat strong{
  font:800 42px Outfit;

  display:block;
}

.stat span{
  font-size:13px;

  color:var(--muted);
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-wrap{
  display:grid;

  grid-template-columns:1fr 1.15fr;

  gap:60px;

  align-items:center;
}

.about-media-box{
  position:relative;

  border-radius:var(--radius);

  overflow:hidden;

  border:1px solid var(--line-bright);

  box-shadow:
    0 25px 60px rgba(0,0,0,.5);

  background:var(--card);
}

.about-media-box img{
  width:100%;

  height:auto;

  object-fit:cover;

  display:block;

  transition:transform .6s ease;
}

.about-media-box:hover img{
  transform:scale(1.03);
}

.about-media-badge{
  position:absolute;

  bottom:24px;
  left:24px;

  background:rgba(8,9,13,.85);

  backdrop-filter:blur(12px);

  border:1px solid rgba(255,91,46,.4);

  padding:14px 20px;

  border-radius:12px;

  display:flex;

  align-items:center;

  gap:14px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}

.about-media-badge .badge-icon{
  font-size:28px;

  color:var(--accent-2);
}

.about-media-badge .badge-text h4{
  font-size:18px;

  font-weight:800;

  color:#fff;
}

.about-media-badge .badge-text span{
  font-size:12px;

  color:var(--text-muted);
}

.about-content h2{
  font-size:clamp(28px,3.5vw,42px);

  line-height:1.2;

  margin-bottom:20px;
}

.about-content p{
  color:var(--text-muted);

  font-size:15.5px;

  line-height:1.75;

  margin-bottom:18px;
}

.stat-row{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;

  margin-top:36px;

  padding-top:28px;

  border-top:1px solid var(--line);
}

.stat-item{
  background:var(--card);

  border:1px solid var(--line);

  padding:20px;

  border-radius:14px;

  text-align:center;

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.stat-item:hover{
  transform:translateY(-5px);

  border-color:var(--accent);
}

.stat-item h3{
  font-size:36px;

  font-weight:900;

  color:#ff4ecd;

  line-height:1;

  margin-bottom:6px;

  font-family:'Outfit',sans-serif;
}

.stat-item span{
  color:var(--text-muted);

  font-size:13px;

  font-weight:500;
}


/* =========================================================
   COUNTER
========================================================= */

.counter-section{
  display:flex;

  justify-content:center;

  gap:80px;

  padding:60px 20px;

  text-align:center;
}

.counter-box{
  min-width:150px;
}

.counter{
  font-size:50px;

  font-weight:700;

  margin:0;
}

.counter-title{
  font-size:18px;

  margin-top:10px;
}


/* =========================================================
   SPLIT SECTION
========================================================= */

.split{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;
}

.image-panel{
  border:1px solid var(--line);

  border-radius:26px;

  overflow:hidden;

  position:relative;

  min-height:480px;

  background:#101629;
}

.image-panel img{
  width:100%;
  height:100%;

  min-height:480px;

  object-fit:cover;

  opacity:.8;
}

.image-panel .panel-label{
  position:absolute;

  left:20px;
  bottom:20px;
  right:20px;

  padding:16px;

  border:1px solid var(--line);

  background:rgba(7,10,19,.72);

  backdrop-filter:blur(12px);

  border-radius:15px;
}

.check-list{
  list-style:none;

  display:grid;

  gap:13px;

  margin:25px 0;
}

.check-list li{
  display:flex;

  gap:10px;

  color:#d8ddec;
}

.check-list i{
  color:#7cddff;

  margin-top:4px;
}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero{
  padding:160px 0 80px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255,91,46,.12) 0%,
      rgba(8,9,13,.95) 75%
    );

  position:relative;

  text-align:center;
}

.page-hero h1{
  font-size:clamp(34px,5vw,56px);

  font-weight:900;

  line-height:1.15;

  margin-bottom:18px;
}

.page-hero p{
  color:#cbd5e1;

  font-size:clamp(16px,2vw,20px);

  max-width:750px;

  margin:0 auto;

  line-height:1.6;
}


/* =========================================================
   COURSE DETAIL
========================================================= */

.course-detail{
  display:grid;

  grid-template-columns:1.15fr .85fr;

  gap:45px;

  align-items:start;
}

.detail-image{
  border:1px solid var(--line);

  border-radius:24px;

  overflow:hidden;
}

.detail-image img{
  width:100%;

  height:500px;

  object-fit:cover;
}

.detail-side{
  position:sticky;

  top:105px;

  border:1px solid var(--line);

  border-radius:22px;

  padding:24px;

  background:rgba(255,255,255,.035);
}

.detail-side .price{
  font:800 36px Outfit;

  margin:14px 0;
}

.detail-list{
  display:grid;

  gap:10px;

  margin:18px 0 22px;
}

.detail-list div{
  display:flex;

  justify-content:space-between;

  border-bottom:1px solid var(--line);

  padding:9px 0;

  font-size:13px;

  color:#c5ccdc;
}

.detail-copy{
  margin-top:35px;
}

.detail-copy p{
  margin-top:13px;
}


/* =========================================================
   CTA
========================================================= */

.cta{
  border:1px solid var(--line);

  border-radius:28px;

  padding:50px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(0,212,255,.13),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      rgba(124,92,255,.13),
      rgba(255,255,255,.025)
    );

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:25px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid{
  display:grid;

  grid-template-columns:.8fr 1.2fr;

  gap:25px;
}

.contact-card{
  padding:28px;

  border:1px solid var(--line);

  border-radius:22px;

  background:rgba(255,255,255,.03);
}

.contact-card h3{
  margin-bottom:10px;
}

.contact-card p{
  font-size:14px;
}

.contact-item{
  margin-top:20px;
}

.contact-item small{
  color:#79849c;

  display:block;

  margin-bottom:3px;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  background:#06070a;

  border-top:1px solid var(--line);

  padding:80px 0 24px;

  position:relative;

  z-index:2;
}

.footer-grid{
  display:grid;

  grid-template-columns:1.4fr 1fr 1.2fr 1fr;

  gap:40px;

  margin-bottom:60px;
}

.footer-logo{
  height:74px;

  width:auto;

  margin-bottom:18px;
}

footer h4{
  font-size:17px;

  margin-bottom:20px;

  position:relative;

  padding-bottom:10px;
}

footer h4::after{
  content:'';

  position:absolute;

  bottom:0;
  left:0;

  width:28px;
  height:2px;

  background:var(--accent);

  border-radius:2px;
}

footer ul{
  list-style:none;
}

footer ul li{
  margin-bottom:12px;
}

footer ul li a{
  color:var(--text-muted);

  font-size:14.5px;

  display:inline-flex;

  align-items:center;

  gap:6px;

  transition:var(--transition);
}

footer ul li a:hover{
  color:var(--accent);

  transform:translateX(4px);
}

footer p{
  color:var(--text-muted);

  font-size:14.5px;

  line-height:1.7;
}

.foot-contact-item{
  display:flex;

  align-items:flex-start;

  gap:10px;

  margin-bottom:12px;

  color:var(--text-muted);

  font-size:14px;
}

.foot-contact-item i{
  color:var(--accent);

  margin-top:4px;
}

.social-row{
  display:flex;

  gap:12px;

  margin-top:20px;
}

.social-row a{
  width:40px;
  height:40px;

  border-radius:50%;

  border:1px solid var(--line-bright);

  background:var(--card);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--text-muted);

  font-size:16px;

  transition:var(--transition);
}

.social-row a:nth-child(1){
  color:#e4405f;
  border-color:rgba(228,64,95,.45);
}

.social-row a:nth-child(2){
  color:#ff0000;
  border-color:rgba(255,0,0,.45);
}

.social-row a:nth-child(3){
  color:#1877f2;
  border-color:rgba(24,119,242,.45);
}

.social-row a:nth-child(4){
  color:#0a66c2;
  border-color:rgba(10,102,194,.45);
}

.social-row a:hover{
  background:currentColor;

  border-color:currentColor;

  transform:translateY(-4px);

  box-shadow:
    0 6px 20px currentColor;
}

.social-row a:hover i{
  color:#fff;
}

.social-row a i{
  color:inherit;

  transition:color .25s ease;
}

.foot-bottom{
  border-top:1px solid var(--line);

  padding-top:24px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  color:var(--text-muted);

  font-size:13.5px;
}


/* =========================================================
   MODAL / ENROLL FORM
========================================================= */

.modal{
  position:fixed;

  z-index:2000;

  inset:0;

  display:grid;

  place-items:center;

  padding:20px;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(10px);

  opacity:0;

  visibility:hidden;

  transition:.25s;
}

.modal.active{
  opacity:1;

  visibility:visible;
  margin-top: 100px;
}

.modal-box{
  width:min(530px,100%);

  max-height:90vh;

  overflow:auto;

  background:#0d1324;

  border:1px solid var(--line);

  border-radius:24px;

  box-shadow:var(--shadow);

  transform:
    translateY(20px)
    scale(.98);

  transition:.25s;
}

.modal.active .modal-box{
  transform:none;
}

.modal-head{
  padding:25px 25px 10px;

  display:flex;

  justify-content:space-between;

  gap:15px;
}

.modal-head h3{
  font-size:28px;
}

.modal-head p{
  font-size:13px;

  margin-top:6px;
}

.modal-close{
  width:38px;
  height:38px;

  border-radius:10px;

  border:1px solid var(--line);

  background:rgba(255,255,255,.04);

  color:#fff;

  cursor:pointer;
}

.popup-form{
  padding:20px 25px 25px;

  display:grid;

  gap:12px;
}

.popup-form input,
.popup-form select,
.popup-form textarea{
  width:100%;

  background:#080d1a;

  border:1px solid var(--line);

  color:#fff;

  border-radius:11px;

  padding:13px 14px;

  outline:none;
}

.popup-form input:focus,
.popup-form select:focus,
.popup-form textarea:focus{
  border-color:rgba(124,92,255,.75);

  box-shadow:
    0 0 0 3px rgba(124,92,255,.1);
}

.popup-form select option{
  background:#0d1324;
}

.form-message{
  font-size:13px;

  min-height:20px;

  color:#9fe6ff;
}


/* =========================================================
   REVEAL / EFFECTS
========================================================= */

.reveal{
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.show{
  opacity:1;

  transform:none;
}

.tilt{
  transform-style:preserve-3d;
}

.cursor-glow{
  position:fixed;

  z-index:-1;

  width:260px;
  height:260px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(124,92,255,.10),
      transparent 65%
    );

  transform:
    translate(-50%,-50%);
}


/* =========================================================
   LEARNING APPROACH
========================================================= */

.approach-card{
  background:
    linear-gradient(
      160deg,
      #161a26 0%,
      #0d1017 100%
    );

  border:1px solid var(--line-bright);

  border-radius:var(--radius);

  padding:50px 45px;

  margin-bottom:60px;

  position:relative;

  overflow:hidden;
}

.approach-card::before{
  content:'';

  position:absolute;

  top:0;
  left:0;

  width:4px;
  height:100%;

  background:
    linear-gradient(
      to bottom,
      var(--accent),
      var(--accent-2)
    );
}

.approach-header h2{
  font-size:clamp(24px,3vw,34px);

  margin-bottom:14px;
}

.approach-header p{
  color:var(--text-muted);

  font-size:15.5px;

  line-height:1.75;

  margin-bottom:30px;

  max-width:880px;
}

.approach-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:20px;
}

.approach-item{
  background:rgba(255,255,255,.03);

  border:1px solid var(--line);

  border-radius:12px;

  padding:20px;

  text-align:center;

  font-weight:600;

  font-size:15px;

  color:#f1f5f9;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:12px;

  transition:var(--transition);
}

.approach-item i{
  width:46px;
  height:46px;

  border-radius:50%;

  background:rgba(255,91,46,.12);

  border:1px solid rgba(255,91,46,.3);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--accent);

  font-size:18px;
}

.approach-item:hover{
  background:rgba(255,91,46,.08);

  border-color:var(--accent);

  transform:translateY(-4px);
}


/* =========================================================
   INSPIRATIONAL BANNER
========================================================= */

.inspire-banner{
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,91,46,.15) 0%,
      rgba(14,17,24,.9) 70%
    );

  border:1px solid rgba(255,91,46,.3);

  border-radius:var(--radius);

  padding:45px 30px;

  text-align:center;

  margin-bottom:40px;

  box-shadow:
    0 20px 45px rgba(0,0,0,.4);
}

.inspire-banner h2{
  font-size:clamp(24px,3.2vw,36px);

  color:#fff;

  margin-bottom:8px;

  letter-spacing:.5px;
}

.inspire-banner p{
  color:#ffb020;

  font-weight:700;

  font-size:17px;

  letter-spacing:1px;
}


/* =========================================================
   COLLABORATIONS
========================================================= */

.collab-section{
  overflow:hidden;

  background:#0b0d13;

  padding:85px 0;

  position:relative;
}

.collab-marquee{
  position:relative;

  width:100%;

  overflow:hidden;

  padding:20px 0;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );
}

.collab-track{
  display:flex;

  gap:30px;

  width:max-content;

  animation:
    marquee-scroll 32s linear infinite;
}

.collab-track:hover{
  animation-play-state:paused;
}

@keyframes marquee-scroll{
  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }
}

.collab-logo-card{
  background:#ffffff;

  border-radius:14px;

  padding:14px 28px;

  height:90px;
  width:190px;

  display:flex;

  align-items:center;
  justify-content:center;

  box-shadow:
    0 8px 24px rgba(0,0,0,.3);

  transition:
    transform .3s ease,
    box-shadow .3s ease;

  flex-shrink:0;
}

.collab-logo-card:hover{
  transform:
    translateY(-6px)
    scale(1.04);

  box-shadow:
    0 14px 30px rgba(255,91,46,.3);
}

.collab-logo-card img{
  max-height:58px;

  max-width:140px;

  width:auto;

  object-fit:contain;

  filter:
    grayscale(15%)
    contrast(1.05);

  transition:filter .3s ease;
}

.collab-logo-card:hover img{
  filter:
    grayscale(0%)
    contrast(1.1);
}


/* =========================================================
   ABOUT MAIN SECTION
========================================================= */

.about-main-grid{
  display:grid;

  grid-template-columns:1fr 1.15fr;

  gap:60px;

  align-items:center;

  margin-bottom:70px;
}

.about-image-card{
  position:relative;

  border-radius:var(--radius);

  overflow:hidden;

  border:1px solid var(--line-bright);

  box-shadow:
    0 25px 60px rgba(0,0,0,.6);

  background:var(--card);
}

.about-image-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .6s ease;
}

.about-image-card:hover img{
  transform:scale(1.04);
}

.about-content-block h2{
  font-size:clamp(26px,3.2vw,38px);

  line-height:1.25;

  margin-bottom:20px;
}

.about-content-block p{
  color:var(--text-muted);

  font-size:15.5px;

  line-height:1.75;

  margin-bottom:16px;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why{
  background:var(--bg-panel);

  padding:60px 6vw;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}

.why-inner{
  max-width:1200px;

  margin:0 auto;
}

.why-inner .eyebrow{
  text-align:center;

  display:block;
}

.why h2{
  text-align:center;

  font-size:1.8rem;

  margin:6px 0 40px;
}

.why-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:28px;
}

.why-card{
  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:34px 28px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

  position:relative;

  overflow:hidden;
}

.why-card::before{
  content:'';

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-2)
    );

  opacity:0;

  transition:opacity .3s ease;
}

.why-card:hover::before{
  opacity:1;
}

.why-card:hover{
  transform:translateY(-8px);

  border-color:rgba(255,91,46,.4);

  box-shadow:
    0 20px 40px rgba(0,0,0,.5);
}

.why-card .icon{
  font-size:1.6rem;

  margin-bottom:10px;
}

.why-icon-wrap{
  width:60px;
  height:60px;

  border-radius:50%;

  background:rgba(255,91,46,.12);

  border:1px solid rgba(255,91,46,.3);

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:26px;

  color:#ff4ecd;

  margin-bottom:22px;

  transition:
    transform .3s ease,
    background .3s ease;
}

.why-card:hover .why-icon-wrap{
  transform:
    scale(1.1)
    rotate(6deg);

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    );

  color:#fff;
}

.why-card h3{
  font-size:19px;

  margin-bottom:10px;
}

.why-card h4{
  margin:0 0 8px;

  font-size:1.02rem;
}

.why-card p{
  color:var(--text-muted);

  font-size:14.5px;

  line-height:1.65;
}


/* =========================================================
   TESTIMONIAL SLIDER
========================================================= */

.test-track-wrap{
  overflow:hidden;

  position:relative;

  padding:10px 0 20px;
}

.test-track{
  display:flex;

  gap:26px;

  transition:
    transform .6s cubic-bezier(.25,1,.5,1);

  cursor:grab;
}

.test-card{
  min-width:360px;
  max-width:360px;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:20px;

  padding:34px 28px;

  flex-shrink:0;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  position:relative;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.test-card:hover{
  border-color:#ff5b2e66;

  box-shadow:
    0 16px 36px rgba(0,0,0,.5);
}

.test-card .quote-icon{
  font-size:48px;

  line-height:1;

  color:#ff4ecd;

  font-family:Georgia,serif;

  margin-bottom:12px;
}

.test-card p.quote{
  font-style:normal;

  color:#e2e8f0;

  font-size:15px;

  line-height:1.7;

  margin-bottom:24px;

  position:relative;

  z-index:1;
}

.test-person{
  display:flex;

  align-items:center;

  gap:14px;

  border-top:1px solid var(--line);

  padding-top:18px;
}

.avatar{
  width:46px;
  height:46px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ff5b2e66,
      #ff4ecd
    );

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:800;

  font-size:16px;

  color:#111;

  box-shadow:
    0 4px 12px rgba(255,91,46,.3);

  flex-shrink:0;
}

.test-person h4{
  font-size:16px;

  margin-bottom:2px;
}

.test-person span{
  font-size:13px;

  color:var(--accent-2);

  font-weight:500;
}

.test-nav{
  display:flex;

  justify-content:center;

  align-items:center;

  gap:16px;

  margin-top:40px;
}

.test-nav button{
  width:46px;
  height:46px;

  border-radius:50%;

  border:1px solid var(--line-bright);

  background:var(--card);

  color:var(--text);

  cursor:pointer;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:16px;

  transition:var(--transition);
}

.test-nav button:hover{
  background:var(--accent);

  border-color:var(--accent);

  color:#fff;

  transform:scale(1.1);

  box-shadow:
    0 0 20px var(--accent-glow);
}


/* =========================================================
   VFX / OVERVIEW
========================================================= */

.overview-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:56px;

  align-items:start;
}

.overview-grid p{
  color:var(--text-muted);

  margin-bottom:18px;

  font-size:1.02rem;
}

.overview-grid p:last-child{
  margin-bottom:0;
}

.overview-stats{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;
}

.stat-card{
  background:var(--bg-surface);

  border:1px solid var(--line);

  border-radius:14px;

  padding:22px 20px;
}

.stat-card .num{
  font-family:'Bebas Neue',Outfit,sans-serif;

  font-size:2.4rem;

  color:var(--amber);
}

.stat-card .lbl{
  color:var(--text-muted);

  font-size:.88rem;

  margin-top:4px;
}


/* =========================================================
   GAMING COURSE SECTION
========================================================= */

#courses{
  background:var(--bg-surface);

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}

.course-icon{
  width:56px;
  height:56px;

  margin-bottom:20px;
}

.course-duration{
  display:inline-block;

  align-self:flex-start;

  font-size:.76rem;

  font-weight:700;

  letter-spacing:.02em;

  color:var(--bg-base);

  background:var(--cyan);

  padding:4px 11px;

  border-radius:999px;

  margin-bottom:14px;
}


/* Course card content for gaming/course detail cards */

.course-card h3{
  font-family:'Inter',Arial,sans-serif;

  font-weight:700;

  font-size:1.12rem;

  letter-spacing:0;

  margin-bottom:10px;

  line-height:1.3;
}

.course-card p{
  color:var(--text-muted);

  font-size:.92rem;

  margin-bottom:20px;

  flex-grow:1;
}

.course-card .view{
  font-size:.88rem;

  font-weight:600;

  color:var(--magenta);

  display:inline-flex;

  align-items:center;

  gap:6px;
}

.course-card .view svg{
  width:14px;
  height:14px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list{
  max-width:820px;
}

.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-item summary{
  list-style:none;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:22px 4px;

  font-size:1.05rem;

  font-weight:600;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary .plus{
  flex-shrink:0;

  width:28px;
  height:28px;

  border-radius:50%;

  border:1px solid var(--line);

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:1.1rem;

  color:var(--cyan);

  transition:transform .2s ease;
}

.faq-item[open] summary .plus{
  transform:rotate(45deg);

  border-color:var(--cyan);
}

.faq-item .faq-body{
  padding:0 34px 24px 4px;

  color:var(--text-muted);
}

.faq-item .faq-body ul{
  margin:10px 0 0 20px;
}

.faq-item .faq-body li{
  margin-bottom:6px;
}


/* =========================================================
   GAMING TESTIMONIALS
========================================================= */

#testimonials{
  background:var(--bg-surface);

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}

.testi-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;
}

.testi-card{
  background:var(--bg-base);

  border:1px solid var(--line);

  border-radius:16px;

  padding:26px;

  display:flex;

  flex-direction:column;
}

.testi-quote{
  color:#ff4ecd;

  font-family:'Bebas Neue',Outfit,sans-serif;

  font-size:2.2rem;

  line-height:1;

  margin-bottom:6px;
}

.testi-card p.msg{
  color:var(--text-muted);

  font-size:.96rem;

  margin-bottom:20px;

  flex-grow:1;
}

.testi-person{
  display:flex;

  align-items:center;

  gap:12px;
}

.testi-avatar{
  width:40px;
  height:40px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:700;

  font-size:.85rem;

  color:#0F0D14;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--magenta)
    );
}

.testi-person .name{
  font-weight:700;

  font-size:.94rem;
}

.testi-person .role{
  color:var(--text-dim);

  font-size:.82rem;
}


/* =========================================================
   CORRECT SECTION HEADING SELECTOR
========================================================= */

.section-head.reveal{
  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;
}


/* =========================================================
   RESPONSIVE CSS
   IMPORTANT:
   Everything below this point affects tablet/mobile only.
   Desktop above 1100px remains unchanged.
========================================================= */


/* =========================================================
   TABLET — 1100px
========================================================= */

@media (max-width:1100px){

  .container{
    width:calc(100% - 32px);
    max-width:1240px;

    padding-left:0;
    padding-right:0;
  }

  .nav{
    gap:14px;
  }

  .nav-links>li>a{
    padding-left:9px;
    padding-right:9px;
  }

  .nav-actions .btn{
    padding-left:11px;
    padding-right:11px;
  }

  .cards{
    grid-template-columns:repeat(2,1fr);
  }

  .course-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .approach-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-grid{
    grid-template-columns:1fr 1fr;
  }

  .split{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .course-detail{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

  .overview-grid{
    grid-template-columns:1fr 1fr;
    gap:35px;
  }

  .testi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-wrap,
  .about-main-grid{
    grid-template-columns:1fr 1fr;
    gap:35px;
  }

  .contact-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   TABLET — 900px
========================================================= */

@media (max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;

    gap:35px;
  }

  .hero-art{
    max-width:420px;

    width:100%;

    margin-left:auto;
    margin-right:auto;
  }

  .overview-grid{
    grid-template-columns:1fr;
  }

  .overview-stats{
    grid-template-columns:1fr 1fr;
  }

  .course-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .testi-grid{
    grid-template-columns:1fr;
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  .about-wrap,
  .about-main-grid{
    grid-template-columns:1fr;

    gap:35px;
  }

  .image-panel{
    min-height:420px;
  }

  .image-panel img{
    min-height:420px;
  }

  .course-detail{
    grid-template-columns:1fr;
  }

  .detail-side{
    position:static;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .stat-row{
    grid-template-columns:repeat(3,1fr);
  }
}


/* =========================================================
   MOBILE — 760px
========================================================= */

@media (max-width:760px){

  html{
    scroll-padding-top:70px;
  }

  body{
    overflow-x:hidden;
  }


  /* -------------------------------------------------------
     CONTAINER
  ------------------------------------------------------- */

  .container{
    width:calc(100% - 28px);

    max-width:none;

    padding-left:0;
    padding-right:0;

    margin-left:auto;
    margin-right:auto;
  }


  /* -------------------------------------------------------
     SECTIONS
  ------------------------------------------------------- */

  .section{
    padding:70px 0;
  }

  section{
    padding:70px 0;
  }

  .section-head{
    margin-bottom:30px;
  }

  .section-head h2{
    line-height:1.08;
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .site-header{
    width:100%;
  }

  .nav{
    width:100%;

    height:68px;

    min-height:68px;

    display:flex;

    align-items:center;
  }

  .logo{
    flex-shrink:0;
  }

  .logo img{
    width:62px;
    height:auto;
  }


  /* IMPORTANT FIX:
     Keep nav-actions visible because
     menu-toggle is inside nav-actions.
  */

  .nav-actions{
    display:flex !important;

    align-items:center;

    margin-left:auto;

    gap:8px;
  }


  /* Hide only desktop button */

  .nav-actions .btn{
    display:none !important;
  }


  /* Hamburger */

  .menu-toggle{
    display:flex !important;

    align-items:center;

    justify-content:center;

    width:42px;
    height:42px;

    margin-left:auto;

    border:1px solid var(--line);

    background:rgba(255,255,255,.04);

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    flex-shrink:0;
  }


  /* -------------------------------------------------------
     MOBILE MENU
  ------------------------------------------------------- */

  .nav-links{
    position:absolute;

    left:14px;
    right:14px;

    top:74px;

    width:auto;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:2px;

    padding:10px;

    margin:0;

    background:rgba(10,14,27,.98);

    border:1px solid var(--line);

    border-radius:16px;

    box-shadow:
      0 20px 60px rgba(0,0,0,.45);

    z-index:9999;
  }

  .nav-links.open{
    display:flex !important;
  }

  .nav-links>li{
    width:100%;
  }

  .nav-links>li>a{
    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:13px 12px;

    font-size:14px;
  }


  /* Dropdown */

  .dropdown{
    position:static !important;

    width:auto !important;

    display:none;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    box-shadow:none;

    background:rgba(255,255,255,.025);

    margin:0 8px 7px;
  }

  .has-dropdown.open .dropdown{
    display:block !important;
  }


  /* -------------------------------------------------------
     VIDEO HERO
  ------------------------------------------------------- */

  .main_hero{
    width:100%;

    height:100svh;

    min-height:580px;

    overflow:hidden;
  }

  .main_hero .hero-video{
    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;
  }

  .main_hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(7,10,19,.42),
        rgba(7,10,19,.28) 40%,
        rgba(7,10,19,.70)
      ),
      rgba(7,10,19,.22);
  }

  .hero-overlay-content{
    width:calc(100% - 28px);

    max-width:600px;

    padding:80px 0 25px;

    margin:auto;
  }

  .hero-overlay-content>span{
    font-size:10px;

    line-height:1.5;

    letter-spacing:2px;

    margin-bottom:14px;
  }

  .hero-overlay-content h1{
    font-size:clamp(40px,11.5vw,60px);

    line-height:.98;

    letter-spacing:-2px;

    margin-bottom:20px;
  }

  .hero-overlay-content p{
    font-size:15px;

    line-height:1.6;

    max-width:500px;

    margin-left:auto;
    margin-right:auto;

    margin-bottom:24px;
  }

  .hero-btn{
    width:auto;

    min-height:48px;

    padding:13px 22px;
  }


  /* -------------------------------------------------------
     NORMAL / GAMING HERO
  ------------------------------------------------------- */

  .hero{
    padding:125px 0 65px;

    min-height:auto;
  }

  .hero-grid{
    grid-template-columns:1fr;

    gap:30px;
  }

  .hero-art{
    min-height:410px;

    max-width:420px;

    width:100%;

    margin:0 auto;
  }

  .hero-card{
    right:6%;

    top:45px;

    width:72%;

    height:350px;
  }

  .orb.one{
    width:250px;
    height:250px;

    right:0;
  }

  .orb.two{
    width:170px;
    height:170px;
  }

  .float-one{
    right:0;
  }

  .float-two{
    left:-4px;

    top:145px;
  }

  .float-three{
    right:0;
  }

  .hero-cta-row{
    gap:12px;
  }


  /* -------------------------------------------------------
     MARQUEE
  ------------------------------------------------------- */

  .marquee-track{
    gap:35px;
  }


  /* -------------------------------------------------------
     CATEGORY CARDS
  ------------------------------------------------------- */

  .cards{
    grid-template-columns:1fr;

    gap:16px;
  }

  .category-card{
    min-height:330px;
  }


  /* -------------------------------------------------------
     COURSES
  ------------------------------------------------------- */

  .course-grid{
    grid-template-columns:1fr;

    gap:18px;
  }

  .course-card{
    width:100%;

    min-width:0;
  }

  .course-buttons{
    gap:8px;
  }


  /* -------------------------------------------------------
     ABOUT
  ------------------------------------------------------- */

  .about-wrap,
  .about-main-grid{
    grid-template-columns:1fr;

    gap:30px;
  }

  .about-content h2{
    font-size:clamp(32px,9vw,46px);
  }

  .about-content-block h2{
    font-size:clamp(32px,9vw,46px);
  }

  .about-media-box,
  .about-image-card{
    width:100%;
  }

  .stat-row{
    grid-template-columns:1fr 1fr 1fr;

    gap:12px;

    margin-top:25px;
  }

  .stat-item{
    padding:16px 10px;
  }

  .stat-item h3{
    font-size:28px;
  }


  /* -------------------------------------------------------
     SPLIT
  ------------------------------------------------------- */

  .split{
    grid-template-columns:1fr;

    gap:30px;
  }

  .image-panel{
    min-height:320px;

    border-radius:20px;
  }

  .image-panel img{
    min-height:320px;
  }


  /* -------------------------------------------------------
     WHY CHOOSE
  ------------------------------------------------------- */

  .why{
    padding:60px 0;
  }

  .why-grid{
    grid-template-columns:1fr;

    gap:18px;
  }

  .why-card{
    padding:27px 22px;
  }


  /* -------------------------------------------------------
     COUNTERS
  ------------------------------------------------------- */

  .counter-section{
    width:100%;

    padding:50px 0;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;
  }

  .counter-box{
    min-width:0;

    padding:25px 12px;

    border-right:1px solid var(--line);

    border-bottom:1px solid var(--line);
  }

  .counter-box:nth-child(2n){
    border-right:0;
  }

  .counter-box:nth-last-child(-n+2){
    border-bottom:0;
  }

  .counter{
    font-size:40px;
  }

  .counter-title{
    font-size:14px;

    line-height:1.4;
  }


  /* -------------------------------------------------------
     STATS
  ------------------------------------------------------- */

  .stats{
    grid-template-columns:1fr 1fr;
  }

  .stat{
    padding:22px 16px;
  }

  .stat:nth-child(2n){
    border-right:0;
  }


  /* -------------------------------------------------------
     OVERVIEW
  ------------------------------------------------------- */

  .overview-grid{
    grid-template-columns:1fr;

    gap:30px;
  }

  .overview-stats{
    grid-template-columns:1fr 1fr;

    gap:14px;
  }


  /* -------------------------------------------------------
     TESTIMONIALS
  ------------------------------------------------------- */

  .test-track{
    gap:14px;
  }

  .test-card{
    min-width:calc(100vw - 42px);

    max-width:calc(100vw - 42px);

    min-height:310px;

    padding:28px 22px;
  }

  .test-track-wrap{
    margin-left:-1px;

    margin-right:-1px;
  }

  .testi-grid{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     CTA
  ------------------------------------------------------- */

  .cta{
    padding:30px 22px;

    display:block;

    border-radius:22px;
  }

  .cta h2{
    font-size:clamp(30px,8vw,42px) !important;
  }

  .cta .btn{
    margin-top:20px;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-grid{
    grid-template-columns:1fr;

    gap:25px;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  footer{
    padding:60px 0 20px;
  }

  .footer-grid{
    grid-template-columns:1fr;

    gap:34px;

    margin-bottom:40px;
  }

  .footer-logo{
    height:62px;

    width:auto;
  }

  .foot-bottom{
    display:block;

    line-height:1.6;
  }

  .foot-bottom span{
    display:block;

    margin-top:7px;
  }


  /* -------------------------------------------------------
     MODAL
  ------------------------------------------------------- */

  .modal{
    padding:12px;
  }

  .modal-box{
    width:100%;

    max-width:100%;

    max-height:92svh;

    border-radius:20px;
  }

  .modal-head{
    padding:20px 18px 8px;
  }

  .modal-head h3{
    font-size:24px;
  }

  .popup-form{
    padding:16px 18px 20px;

    gap:10px;
  }

  .popup-form input,
  .popup-form select,
  .popup-form textarea{
    width:100%;

    padding:12px;
  }

  .popup-form .btn{
    width:100%;
  }


  /* -------------------------------------------------------
     LEARNING APPROACH
  ------------------------------------------------------- */

  .approach-card{
    padding:32px 22px;

    margin-bottom:40px;
  }

  .approach-grid{
    grid-template-columns:1fr;

    gap:12px;
  }

  .approach-item{
    padding:18px;
  }


  /* -------------------------------------------------------
     INSPIRATIONAL BANNER
  ------------------------------------------------------- */

  .inspire-banner{
    padding:35px 20px;
  }


  /* -------------------------------------------------------
     COLLABORATION
  ------------------------------------------------------- */

  .collab-section{
    padding:65px 0;
  }

  .collab-logo-card{
    width:165px;

    height:80px;

    padding:12px 20px;
  }

  .collab-logo-card img{
    max-width:125px;

    max-height:50px;
  }


  /* -------------------------------------------------------
     PAGE HERO
  ------------------------------------------------------- */

  .page-hero{
    padding:120px 0 55px;
  }

  .page-hero h1{
    font-size:clamp(40px,11vw,58px);
  }


  /* -------------------------------------------------------
     COURSE DETAIL
  ------------------------------------------------------- */

  .course-detail{
    grid-template-columns:1fr;

    gap:25px;
  }

  .detail-image img{
    height:330px;
  }

  .detail-side{
    position:static;

    padding:20px;
  }


  /* -------------------------------------------------------
     FAQ
  ------------------------------------------------------- */

  .faq-item summary{
    padding:18px 2px;

    font-size:.95rem;
  }

  .faq-item .faq-body{
    padding-left:2px;

    padding-right:20px;
  }
}


/* =========================================================
   SMALL PHONES — 480px
========================================================= */

@media (max-width:480px){

  body{
    font-size:14px;
  }

  .container{
    width:calc(100% - 24px);
  }

  h1{
    font-size:42px;
  }

  h2{
    font-size:34px;
  }

  h3{
    font-size:21px;
  }

  .section,
  section{
    padding:58px 0;
  }


  /* Header */

  .nav{
    height:64px;

    min-height:64px;
  }

  .logo img{
    width:58px;
  }

  .menu-toggle{
    width:40px;

    height:40px;
  }

  .nav-links{
    top:68px;

    left:10px;

    right:10px;
  }


  /* Main hero */

  .main_hero{
    min-height:560px;
  }

  .main_hero .hero-video{
    object-position:58% center;
  }

  .hero-overlay-content{
    width:calc(100% - 24px);

    padding-top:70px;
  }

  .hero-overlay-content>span{
    font-size:9px;

    letter-spacing:1.5px;
  }

  .hero-overlay-content h1{
    font-size:clamp(38px,12vw,50px);

    letter-spacing:-1.7px;
  }

  .hero-overlay-content p{
    font-size:14px;
  }

  .hero-btn{
    width:100%;

    max-width:130px;
    
    font-size: 10px;
    text-align: center;
  }


  /* Gaming hero */

  .hero-card{
    height:320px;
  }

  .hero-art{
    min-height:370px;
  }


  /* Marquee */

  .marquee-track{
    gap:32px;

    padding:14px 0;
  }

  .marquee span{
    font-size:11px;
  }


  /* Category */

  .category-card{
    min-height:300px;

    border-radius:18px;
  }

  .category-content{
    left:18px;

    right:18px;

    bottom:18px;
  }


  /* About */

  .stat-row{
    grid-template-columns:1fr;

    gap:10px;
  }


  /* Counters */

  .counter-section{
    grid-template-columns:1fr;

    padding:38px 0;
  }

  .counter-box,
  .counter-box:nth-child(2n){
    border-right:0;

    border-bottom:1px solid var(--line);
  }

  .counter-box:last-child{
    border-bottom:0;
  }

  .counter{
    font-size:42px;
  }

  .counter-title{
    font-size:13px;
  }


  /* Stats */

  .stats{
    grid-template-columns:1fr;
  }

  .stat{
    border-right:0 !important;

    border-bottom:1px solid var(--line) !important;
  }

  .stat:last-child{
    border-bottom:0 !important;
  }


  /* Overview */

  .overview-stats{
    grid-template-columns:1fr;
  }


  /* Why */

  .why-card{
    border-radius:18px;
  }

  .why-icon-wrap{
    width:52px;

    height:52px;

    font-size:22px;

    margin-bottom:17px;
  }


  /* Testimonials */

  .test-card{
    min-width:calc(100vw - 36px);

    max-width:calc(100vw - 36px);

    min-height:300px;
  }

  .test-card p.quote{
    font-size:13.5px;
  }


  /* Footer */

  .footer-grid{
    gap:30px;
  }

  .foot-contact-item{
    font-size:13px;
  }


  /* Approach */

  .approach-card{
    padding:28px 18px;

    border-radius:18px;
  }


  /* Modal */

  .modal-head{
    gap:10px;
  }

  .modal-head h3{
    font-size:22px;
  }

  .modal-close{
    width:36px;

    height:36px;

    flex-basis:36px;
  }


  /* Course */

  .course-card{
    border-radius:18px;
  }

  .course-image{
    height:190px;
  }
}


/* =========================================================
   VERY SMALL PHONES — 360px
========================================================= */

@media (max-width:360px){

  .container{
    width:calc(100% - 20px);
    gap: 250px;
  }
 

  .logo img{
    width:54px;
  }

  .menu-toggle{
    width:38px;
    height:38px;
    
  }

  .hero-overlay-content h1{
    font-size:36px;
  }

  .hero-overlay-content p{
    font-size:13px;
  }

  .category-card{
    min-height:280px;
  }

  .test-card{
    min-width:calc(100vw - 30px);

    max-width:calc(100vw - 30px);
  }

  .counter{
    font-size:36px;
  }

  .approach-card{
    padding:24px 15px;
  }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

  .btn:hover{
    transform:none;
  }

  .category-card:hover{
    transform:none;
  }

  .why-card:hover{
    transform:none;
  }

  .test-card:hover{
    transform:none;
  }

  .social-row a:hover{
    transform:none;
  }

  .category-card img{
    transform:none !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }
}



/* =========================================================
   SHARED RESPONSIVE HEADER + TWO-LEVEL COURSE MENU
   Keep all header navigation styling here for every page.
========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: rgba(7, 10, 19, .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header .container.nav {
  position: relative;
  min-height: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.5vw, 22px);
}

.site-header .logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.site-header .logo img {
  display: block;
  width: 74px;
  max-width: 100%;
  height: auto;
}

.site-header nav {
  min-width: 0;
  margin-left: auto;
}

#navList,
.site-header #navList.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navList > li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navList > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px clamp(8px, 1vw, 13px);
  border-radius: 10px;
  color: #dfe3f1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}

#navList > li > a:hover,
#navList > li.active > a,
#navList > li.open > .nav-dropdown-btn {
  color: #00d4ff;
  background: rgba(255,255,255,.045);
}

.nav-chevron,
.sub-chevron {
  flex: 0 0 auto;
  font-size: 10px;
  transition: transform .2s ease, color .2s ease;
}

#navList > li.has-dropdown:hover > .nav-dropdown-btn .nav-chevron,
#navList > li.has-dropdown:focus-within > .nav-dropdown-btn .nav-chevron,
#navList > li.has-dropdown.open > .nav-dropdown-btn .nav-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  width: 290px;
  max-width: min(290px, calc(100vw - 32px));
  padding: 8px;
  background: #111522;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  box-shadow: 0 20px 45px rgba(0,0,0,.42), 0 0 28px rgba(124,92,255,.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 10001;
}

#navList > li.has-dropdown:hover > .dropdown-menu,
#navList > li.has-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  position: relative;
  width: 100%;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 8px;
  color: #f4f6ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: background .2s ease, color .2s ease;
}

.dropdown-link:hover,
.dropdown-item.has-sub:focus-within > .dropdown-link {
  color: #fff;
  background: rgba(124,92,255,.16);
}

.dropdown-item.has-sub:hover > .dropdown-link .sub-chevron,
.dropdown-item.has-sub:focus-within > .dropdown-link .sub-chevron,
.dropdown-item.has-sub.open > .dropdown-link .sub-chevron {
  color: #00d4ff;
  transform: translateX(3px);
}

.sub-dropdown {
  position: absolute;
  top: -8px;
  left: calc(100% + 8px);
  width: 315px;
  max-width: min(315px, calc(100vw - 32px));
  padding: 8px;
  background: #111522;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  box-shadow: 0 20px 45px rgba(0,0,0,.42), 0 0 28px rgba(0,212,255,.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 10002;
}

.dropdown-item.has-sub:hover > .sub-dropdown,
.dropdown-item.has-sub:focus-within > .sub-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.sub-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #d7d9e0;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: background .2s ease, color .2s ease, padding .2s ease;
}

.sub-dropdown a:hover {
  color: #fff;
  background: rgba(0,212,255,.09);
  padding-left: 16px;
}

.site-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.site-header .menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line, rgba(255,255,255,.16));
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  z-index: 10003;
}

.site-header .menu-toggle:hover {
  background: rgba(124,92,255,.18);
}

/* Avoid desktop header crowding on tablets and small laptops. */
@media (max-width: 1020px) {
  .site-header .container.nav {
    height: 72px;
    min-height: 72px;
  }

  .site-header .logo img {
    width: 66px;
  }

  .site-header .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .site-header nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    width: auto;
    margin: 0;
    z-index: 10002;
  }

  #navList,
  .site-header #navList.nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    background: rgba(10,14,27,.99);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    box-shadow: 0 22px 60px rgba(0,0,0,.48);
  }

  #navList.open,
  .site-header #navList.nav-links.open {
    display: flex !important;
  }

  #navList > li {
    width: 100%;
  }

  #navList > li > a {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 12px;
    white-space: normal;
  }

  #navList > li > a .nav-chevron {
    margin-left: auto;
  }

  .dropdown-menu {
    position: static;
    display: none;
    width: auto;
    max-width: none;
    margin: 2px 0 7px;
    padding: 6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
  }

  #navList > li.has-dropdown.open > .dropdown-menu {
    display: block !important;
  }

  #navList > li.has-dropdown:hover > .dropdown-menu,
  #navList > li.has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown-item.has-sub > .sub-dropdown {
    position: static;
    display: none;
    width: auto;
    max-width: none;
    margin: 2px 0 5px;
    padding: 5px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 8px;
    background: rgba(0,0,0,.16);
  }

  .dropdown-item.has-sub.open > .sub-dropdown {
    display: block !important;
  }

  .dropdown-item.has-sub:hover > .sub-dropdown,
  .dropdown-item.has-sub:focus-within > .sub-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown-link {
    padding: 11px 10px;
  }

  .sub-dropdown a {
    padding: 10px 12px 10px 20px;
    font-size: 12.5px;
  }

  .site-header .nav-actions {
    display: none !important;
  }

  #navList > .mobile-nav-actions {
    display: block;
    padding: 8px 4px 3px;
    margin-top: 3px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

@media (max-width: 420px) {
  .site-header .container.nav {
    height: 66px;
    min-height: 66px;
  }

  .site-header .logo img {
    width: 60px;
  }

  .site-header nav {
    left: 8px;
    right: 8px;
    top: calc(100% + 6px);
  }

  #navList,
  .site-header #navList.nav-links {
    padding: 8px;
  }

  #navList > li > a {
    padding: 12px 10px;
    font-size: 13.5px;
  }
}

/* =========================================
   STUDENT SUCCESS & PLACEMENTS
========================================= */

.student-success-section {
  position: relative;
  overflow: hidden;
  padding: 85px 24px;
  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(124, 92, 255, 0.10),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 75%,
      rgba(0, 212, 255, 0.08),
      transparent 32%
    ),
    var(--bg, #070a13);
  color: var(--text, #f7f8ff);
}

.success-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.success-heading {
  max-width: 850px;
  margin: 0 auto 38px;
  text-align: center;
}

.success-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--primary2, #00d4ff);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.success-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.25;
  font-weight: 800;
}

.success-heading h2 span {
  color: var(--primary, #7c5cff);
}

.success-heading > p {
  max-width: 690px;
  margin: 0 auto;
  color: var(--muted, #aab2c8);
  font-size: 16px;
  line-height: 1.8;
}

/* Statistics cards */

.success-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 62px;
}

.success-stat-card {
  display: flex;
  min-height: 125px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 15px;
  text-align: center;
  background: var(--card, #11182b);
  border: 1px solid rgba(170, 178, 200, 0.16);
  border-radius: 15px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.success-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary, #7c5cff);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.success-stat-card h3 {
  margin: 0 0 9px;
  color: var(--primary2, #00d4ff);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 800;
}

.success-stat-card p {
  margin: 0;
  color: var(--muted, #aab2c8);
  font-size: 14px;
  line-height: 1.5;
}

/* Gallery heading and controls */

.success-gallery-header {
    margin-top:20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.success-gallery-header .success-eyebrow {
  margin-bottom: 7px;
}

.success-gallery-header h3 {
  margin: 0;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 800;
}

.success-gallery-controls {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.success-gallery-btn {
  display: inline-flex;
  width: 43px;
  height: 43px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(170, 178, 200, 0.25);
  border-radius: 50%;
  background: var(--card, #11182b);
  color: var(--text, #f7f8ff);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.success-gallery-btn:hover {
  background: var(--primary, #7c5cff);
  border-color: var(--primary, #7c5cff);
  transform: scale(1.05);
}

.success-gallery-btn:focus-visible {
  outline: 2px solid var(--primary2, #00d4ff);
  outline-offset: 4px;
}

/* Horizontal photo gallery */

.success-gallery {
  display: grid;
  grid-auto-columns: calc((100% - 40px) / 3);
  grid-auto-flow: column;
  gap: 20px;
  overflow-x: auto;
  padding: 5px 2px 18px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--primary, #7c5cff) transparent;
}

.success-gallery-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4 / 4.1;
  border: 1px solid rgba(170, 178, 200, 0.16);
  border-radius: 15px;
  background: var(--card, #11182b);
  scroll-snap-align: start;
}

.success-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.success-gallery-card:hover img {
  transform: scale(1.06);
}

.success-gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 45px 18px 18px;
  background: linear-gradient(
    to top,
    rgba(7, 10, 19, 0.96),
    rgba(7, 10, 19, 0.55) 65%,
    transparent
  );
}

.success-gallery-caption h4 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
}

.success-gallery-caption p {
  margin: 0;
  color: #d1d8e8;
  font-size: 13px;
  line-height: 1.6;
}

/* Gallery scroll progress */

.success-gallery-progress {
  width: 100%;
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(170, 178, 200, 0.15);
}

.success-gallery-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--primary, #7c5cff),
    var(--primary2, #00d4ff),
    var(--accent, #ff4ecd)
  );
  transition: width 0.15s linear;
}

/* Tablet */

@media (max-width: 900px) {
  .student-success-section {
    padding: 70px 22px;
  }

  .success-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 48px;
  }

  .success-gallery {
    grid-auto-columns: calc((100% - 20px) / 2);
    gap: 20px;
  }
}

/* Mobile */

@media (max-width: 560px) {
  .student-success-section {
    padding: 55px 16px;
  }

  .success-heading {
    margin-bottom: 28px;
  }

  .success-heading h2 {
    font-size: 28px;
  }

  .success-heading > p {
    font-size: 14px;
  }

  .success-stats {
    gap: 10px;
    margin-bottom: 40px;
  }

  .success-stat-card {
    min-height: 108px;
    padding: 18px 8px;
    border-radius: 12px;
  }

  .success-stat-card h3 {
    font-size: 25px;
  }

  .success-stat-card p {
    font-size: 12px;
  }

  .success-gallery-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .success-gallery-header h3 {
    font-size: 22px;
  }

  .success-gallery-btn {
    width: 37px;
    height: 37px;
  }

  .success-gallery {
    grid-auto-columns: 82%;
    gap: 14px;
  }

  .success-gallery-card {
    aspect-ratio: 4 / 4.4;
  }

  .success-gallery-caption {
    padding: 38px 14px 15px;
  }

  .success-gallery-caption h4 {
    font-size: 16px;
  }

  .success-gallery-caption p {
    font-size: 12px;
  }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  .success-gallery,
  .success-gallery-card img,
  .success-stat-card,
  .success-gallery-btn,
  .success-gallery-progress span {
    scroll-behavior: auto;
    transition: none;
  }
}