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

  :root{
    /* Virex palette (from index) */
    --brand-hero: linear-gradient(135deg, #8b5cf6, #7c3aed, #2563eb);
    --brand-green: linear-gradient(135deg, #7c3aed, #4f46e5);
    --brand-green-200: linear-gradient(135deg, #7c3aed, #38bdf8);

    --ink:#ffffff;
    --ink-strong:#f6f7fb;
    --ink-soft:#dfe1e8;

    --accent:#8b5cf6;
    --hover:#22d3ee;
    --bg:#0b0214;

    --shadow: 0 8px 24px rgba(0,0,0,0.18);
    --shadow-lg: 0 16px 36px rgba(0,0,0,0.28);
    --rad:16px;
    --timing:cubic-bezier(0.2,0.8,0.2,1);
    --maxw:1180px;
    --header-h:68px;
    --nav-font-size:14px;
    --nav-line-height:22px;

    /* services card surfaces */
    --svc-surface-1:#0d1331;
    --svc-surface-2:#0a1028;
    --svc-border:rgba(173,197,255,.16);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    font-weight:700;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    padding-top:var(--header-h);
  }

  /* ====== Reveal ====== */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--timing), transform .6s var(--timing)}
  .reveal.show{opacity:1; transform:none}

  /* ====== NAVBAR ====== */
  header{
    width:100%; height:var(--header-h);
    background:rgba(10,10,22,0.65);
    backdrop-filter:saturate(130%) blur(10px);
    display:flex; justify-content:space-between; align-items:center;
    padding:0 24px; border-bottom:1px solid rgba(255,255,255,0.06);
    position:fixed; top:0; left:0; z-index:1000;
  }
.logo img{
  width:150px;
  height:auto;
}
  nav{ display:flex; align-items:center; gap:22px; height:100% }
  nav a{
    display:inline-flex; align-items:center; justify-content:center;
    height:calc(var(--header-h) - 2px);
    color:var(--ink-strong); text-decoration:none; font-weight:800;
    font-size:var(--nav-font-size); line-height:var(--nav-line-height);
    letter-spacing:.2px; position:relative; padding:0 2px;
    transition:color .25s var(--timing), transform .25s var(--timing)
  }
  nav a:hover{ color:var(--accent); transform:translateY(-2px) }
  nav a::after{
    content:''; position:absolute; bottom:10px; left:0; width:0; height:2px;
    background:linear-gradient(90deg,var(--accent),var(--hover));
    transition:width .35s cubic-bezier(.19,1,.22,1); border-radius:2px
  }
  nav a:hover::after{ width:100% }
  .dropdown{ position:relative }
  .dropdown-content{
    position:absolute; top:calc(100% + 8px); left:0; display:flex; flex-direction:column;
    background:#0f1221; min-width:240px; padding:10px 0; border-radius:10px;
    box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px);
    transition:all .25s var(--timing); z-index:999; border:1px solid rgba(255,255,255,.08)
  }
  .dropdown:hover .dropdown-content{ opacity:1; visibility:visible; transform:translateY(0) }
  .dropdown-content a{ padding:12px 16px; font-size:14px; color:#e8eaf4; font-weight:700; line-height:22px; }
  .dropdown-content a:hover{ background:#1a1f3a; color:#b7c4ff }

  .contact-btn{
    background:linear-gradient(90deg,var(--accent),var(--hover)); color:#fff; text-decoration:none;
    padding:9px 16px; border-radius:9px; font-size:14px; font-weight:800;
    transition:transform .25s var(--timing), box-shadow .25s var(--timing)
  }
  .contact-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.22) }

  .menu-toggle{ display:none; width:38px; height:38px; border:none; background:transparent; cursor:pointer; position:relative }
  .menu-toggle .bar{ position:absolute; left:7px; right:7px; height:3px; background:var(--ink); border-radius:3px; transition:transform .35s var(--timing), opacity .25s var(--timing), top .35s var(--timing) }
  .menu-toggle .bar:nth-child(1){ top:11px } .menu-toggle .bar:nth-child(2){ top:17px } .menu-toggle .bar:nth-child(3){ top:23px }
  .menu-toggle.active .bar:nth-child(1){ top:17px; transform:rotate(45deg) }
  .menu-toggle.active .bar:nth-child(2){ opacity:0 }
  .menu-toggle.active .bar:nth-child(3){ top:17px; transform:rotate(-45deg) }

  .nav-overlay{ position:fixed; inset:0; background:rgba(6,20,17,.45); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .32s var(--timing); z-index:998 }
  .nav-overlay.active{ opacity:1; pointer-events:auto }
  .m-close{ display:none }

  @media (max-width:900px){
    :root{ --header-h:64px }
    header{ height:64px; padding:0 12px }
    nav{
      display:none; flex-direction:column; position:fixed; top:0; right:0; height:100vh; width:78%;
      background:rgba(18,22,44,.92); backdrop-filter:blur(16px); padding:84px 18px 18px; box-shadow:-10px 0 30px rgba(0,0,0,.2);
      transition:transform .45s var(--timing); z-index:999; transform:translateX(100%);
    }
    nav a{ color:#eef1ff; height:auto; padding:10px 2px; opacity:0; transform:translateX(12px) }
    nav.active{ display:flex; transform:translateX(0) }
    nav.active a{ animation:navIn .45s var(--timing) forwards }
    nav.active a:nth-of-type(1){ animation-delay:.05s } nav.active a:nth-of-type(2){ animation-delay:.09s }
    nav.active a:nth-of-type(3){ animation-delay:.13s } nav.active a:nth-of-type(4){ animation-delay:.17s } nav.active a:nth-of-type(5){ animation-delay:.21s }
    @keyframes navIn{ to{ opacity:1; transform:none } }
    .menu-toggle{ display:block }
    .contact-btn{ display:none }
    .dropdown-content{ position:static; display:none; background:rgba(26,31,58,.9); margin-top:8px; border-radius:8px; border:1px solid rgba(255,255,255,.06) }
    .dropdown:hover .dropdown-content{ display:flex }
    .m-contact{
      margin-top:auto; width:100%; background:var(--accent); color:#fff; text-align:center; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800;
      box-shadow:0 10px 22px rgba(10,128,106,.25); transition:transform .25s var(--timing)
    }
    .m-contact:active{ transform:scale(.98) }
    .m-close{ display:block; margin-top:10px; text-align:center; font-weight:800; color:#fff }
  }

  /* ====== ACADEMY PAGE CONTENT ====== */
  main{ display:block }

  /* HERO — gradient like index */
  .academy-hero{
    background:var(--brand-hero);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.25);
    padding:100px 16px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .academy-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.3), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.2), transparent 50%);
    pointer-events: none;
  }
  .hero-inner{ 
    max-width:var(--maxw); 
    margin:0 auto; 
    position: relative;
    z-index: 2;
  }
  .academy-title{ 
    font-size:52px; 
    line-height:1.1; 
    font-weight:800; 
    letter-spacing:-.3px; 
    margin-bottom: 20px; 
  }
  .academy-subtitle{ 
    font-size:18px; 
    color:var(--ink-strong); 
    max-width:600px; 
    margin:0 auto; 
    line-height:1.6; 
  }
  .academy-cta{ 
    margin-top:30px; 
    display:flex; 
    gap:16px; 
    align-items:center; 
    justify-content: center; 
    flex-wrap: wrap; 
  }
  .academy-btn{
    display:inline-block; 
    font-weight:800; 
    background: linear-gradient(90deg, var(--hover), var(--accent));
    color:#fff; 
    padding:12px 24px; 
    border-radius:42px; 
    font-size:16px; 
    border:2px solid rgba(255,255,255,0.18);
    box-shadow:var(--shadow); 
    text-decoration:none; 
    transition:transform .25s var(--timing), box-shadow .25s var(--timing)
  }
  .academy-btn:hover{ 
    transform:translateY(-2px); 
    box-shadow:var(--shadow-lg); 
  }

  /* Stats Section */
  .stats{ 
    background:#fff; 
    padding:60px 16px; 
  }
  .stats .inner{ 
    max-width:var(--maxw); 
    margin:0 auto; 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); 
    gap:24px; 
  }
  .stat-item{ 
    background:#eaf8f1; 
    border-radius:16px; 
    padding:32px 24px; 
    text-align:center; 
    box-shadow:var(--shadow);
    transition: transform .3s var(--timing);
  }
  .stat-item:hover {
    transform: translateY(-5px);
  }
  .stat-number{ 
    font-size:42px; 
    font-weight:800; 
    color:#0b1a30; 
    margin-bottom:8px; 
  }
  .stat-label{ 
    font-size:16px; 
    color:#2a392f;
    font-weight: 700;
  }

  /* Content Sections */
  .content-section {
    padding: 80px 16px;
  }
  .content-section .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .content-text h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
  }
  .content-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 16px;
  }
  .content-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
  }

  /* Alternate background for sections */
  .content-section.white {
    background: #fff;
  }
  .content-section.white .content-text h2 {
    color: #0d1320;
  }
  .content-section.white .content-text p {
    color: #2a2f3e;
  }

  /* Certification Section */
  .certification-section {
    background: radial-gradient(1200px 300px at 10% -10%, rgba(139,92,246,.18), transparent 60%),
                radial-gradient(1200px 300px at 90% 110%, rgba(34,211,238,.18), transparent 60%),
                #0a0f22;
    padding: 80px 16px;
  }
  .certification-section .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    text-align: center;
  }
  .section-title {
    text-align: center;
    margin-bottom: 60px;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
  }
  .certification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
  }
  .certification-card {
    background: linear-gradient(180deg, var(--svc-surface-1) 0%, var(--svc-surface-2) 100%);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
    transition: transform .35s var(--timing), box-shadow .35s var(--timing);
    text-align: center;
  }
  .certification-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }
  .certification-card h3 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
  }
  .certification-card p {
    color: #cfd3ff;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .certification-features {
    margin-bottom: 24px;
    text-align: left;
  }
  .certification-features li {
    color: #cfd3ff;
    font-size: 14px;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }
  .certification-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hover);
    font-weight: 800;
  }

  /* CTA Section */
  .cta-section {
    background: var(--brand-green);
    padding: 80px 16px;
    text-align: center;
    position: relative;
  }
  .cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
    pointer-events: none;
  }
  .cta-section .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .cta-section h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
  }
  .cta-section p {
    font-size: 18px;
    color: rgba(255,255,255,.9);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ====== FOOTER ====== */
  .footer {
    background: var(--brand-green);
  }
  .footer .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 48px 16px 24px;
  }
  .footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
.logo-footer img{
  width:200px;
  height:auto;
}

  .footer-brand p {
    color: rgba(255,255,255,.8);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .contact-info-footer {
    margin-top: 20px;
  }
  .contact-info-footer div {
    margin-bottom: 12px;
    color: rgba(255,255,255,.9);
    font-size: 14px;
  }
  .contact-info-footer strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
  }
  .footer-links h4,
  .footer-services h4 {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
  }
  .footer-links a,
  .footer-services a {
    display: block;
    font-size: 15px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    margin: 10px 0;
    transition: transform .2s var(--timing), color .2s var(--timing);
  }
  .footer-links a:hover,
  .footer-services a:hover {
    transform: translateX(4px);
    color: #cfd7ff;
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 24px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .copyright {
    font-size: 14px;
    color: rgba(255,255,255,.8);
  }
  .footer-legal {
    display: flex;
    gap: 24px;
  }
  .footer-legal a {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: color .2s var(--timing);
  }
  .footer-legal a:hover {
    color: #fff;
  }
  .social {
    display: flex;
    gap: 12px;
  }
  .social a {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
    transition: transform .2s var(--timing), background .2s var(--timing);
  }
  .social a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.2);
  }
  .social svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* ===== SCROLL TO TOP BUTTON ===== */
  .scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .scroll-to-top.show {
    opacity: 1;
    visibility: visible;
  }
  .scroll-to-top:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  .scroll-to-top svg {
    width: 24px;
    height: 24px;
  }

  @media (max-width: 768px) {
    .footer-content {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .footer-bottom {
      flex-direction: column;
      text-align: center;
    }
    .footer-legal {
      justify-content: center;
    }
    .content-section .inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .academy-title {
      font-size: 36px;
    }
    .certification-grid {
      grid-template-columns: 1fr;
    }
    .stats .inner {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }