EduHub Academy Premium Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EduHub Academy – Where Brilliance Begins</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=DM+Sans:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">

</head>

<body>

<div id="ld">
    <div class="ld-logo">Edu<span>Hub</span></div>
    <div class="ld-bar">
      <div class="ld-prog"></div>
    </div>
  </div>

<div class="mob-menu" id="mm">
    <a href="#about" onclick="closeMM()">About</a>
    <a href="#programs" onclick="closeMM()">Programs</a>
    <a href="#gallery" onclick="closeMM()">Campus Life</a>
    <a href="#team" onclick="closeMM()">Our Team</a>
    <a href="#contact" onclick="closeMM()">Contact</a>
  </div>

<nav id="nav">
    <a href="#" class="n-logo">Edu<b>Hub</b></a>
    <ul class="n-links">
      <li><a href="#about">About</a></li>
      <li><a href="#programs">Programs</a></li>
      <li><a href="#gallery">Campus Life</a></li>
      <li><a href="#team">Our Team</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div style="display:flex;align-items:center;gap:16px;">
      <a href="#contact" class="n-btn">Enroll Now</a>
      <div class="hbg" id="hbg" onclick="toggleMM()"><span></span><span></span><span></span></div>
    </div>
  </nav>

<section class="hero" id="home">
    <div class="h-bg"></div>
    <div class="h-ov"></div>
    <div class="h-grain"></div>
    <div class="h-content">
      <div>
        <div class="h-eyebrow">
          <div class="e-dot"></div>Admissions Open · Academic Year 2026–27
        </div>
        <h1 class="h1">Where Every Child<br>Discovers Their<br><em>Brilliance</em></h1>
        <div class="h-ctas">
          <a href="#programs" class="cta-a">Explore Programs</a>
          <a href="#gallery" class="cta-b">
            <div class="play">▶</div>Watch Campus Tour
          </a>
        </div>
      </div>
      <div class="h-stats">
        <div class="h-stat"><span class="h-sn" data-target="1500" data-suf="+">0+</span><span class="h-sl">Happy
            Students</span></div>
        <div class="h-stat"><span class="h-sn" data-target="98" data-suf="%">0%</span><span class="h-sl">Satisfaction
            Rate</span></div>
        <div class="h-stat"><span class="h-sn" data-target="16" data-suf="+">0+</span><span class="h-sl">Years of
            Excellence</span></div>
      </div>
    </div>
    <div class="scroll-hint">
      <div class="s-line"></div>Scroll
    </div>
  </section>

<div class="mq">
    <div class="mq-inner">
      <span class="mq-item">Creative Arts<span class="mq-sep"></span></span>
      <span class="mq-item">STEM Excellence<span class="mq-sep"></span></span>
      <span class="mq-item">Sports & Wellness<span class="mq-sep"></span></span>
      <span class="mq-item">Language & Literacy<span class="mq-sep"></span></span>
      <span class="mq-item">Music & Performing Arts<span class="mq-sep"></span></span>
      <span class="mq-item">International Curriculum<span class="mq-sep"></span></span>
      <span class="mq-item">Safe Nurturing Campus<span class="mq-sep"></span></span>
      <span class="mq-item">Character Education<span class="mq-sep"></span></span>
      <span class="mq-item">Creative Arts<span class="mq-sep"></span></span>
      <span class="mq-item">STEM Excellence<span class="mq-sep"></span></span>
      <span class="mq-item">Sports & Wellness<span class="mq-sep"></span></span>
      <span class="mq-item">Language & Literacy<span class="mq-sep"></span></span>
      <span class="mq-item">Music & Performing Arts<span class="mq-sep"></span></span>
      <span class="mq-item">International Curriculum<span class="mq-sep"></span></span>
      <span class="mq-item">Safe Nurturing Campus<span class="mq-sep"></span></span>
      <span class="mq-item">Character Education<span class="mq-sep"></span></span>
    </div>
  </div>

<section class="about" id="about">
    <div class="ab-grid">
      <div class="ab-imgs wa fl2">
        <div class="ai ai1"><img
            src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=700&q=80&auto=format&fit=crop"
            alt="Children learning together"></div>
        <div class="ai ai2"><img
            src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=500&q=80&auto=format&fit=crop"
            alt="Teacher with students"></div>
        <div class="ai ai3"><img
            src="https://images.unsplash.com/photo-1544717305-2782549b5136?w=400&q=80&auto=format&fit=crop"
            alt="Kids artwork"></div>
        <div class="ab-badge"><span class="ab-bn">16+</span><span class="ab-bt">Years of<br>Excellence</span></div>
      </div>
      <div class="wa fr2">
        <div class="tag">About EduHub Academy</div>
        <h2 class="sh">We Don't Just Teach —<br>We <em>Inspire & Transform</em></h2>
        <div class="div"></div>
        <p class="sp">Founded in 2010, EduHub Academy has redefined early childhood education. Our philosophy blends
          Montessori principles with modern pedagogical research, creating a truly transformative learning journey for
          every single child.</p>
        <div class="ab-feats">
          <div class="af wa d1">
            <div class="af-img"><img
                src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=100&q=80&auto=format&fit=crop"
                alt=""></div>
            <div>
              <div class="af-lbl">Expert Faculty</div>
              <div class="af-sub">60+ certified educators with 10+ years each</div>
            </div>
          </div>
          <div class="af wa d2">
            <div class="af-img"><img
                src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=100&q=80&auto=format&fit=crop"
                alt=""></div>
            <div>
              <div class="af-lbl">Modern Campus</div>
              <div class="af-sub">Labs, studios, play areas & smart classrooms</div>
            </div>
          </div>
          <div class="af wa d3">
            <div class="af-img"><img
                src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?w=100&q=80&auto=format&fit=crop" alt="">
            </div>
            <div>
              <div class="af-lbl">Holistic Curriculum</div>
              <div class="af-sub">Arts, STEM, sport, language & values integrated</div>
            </div>
          </div>
          <div class="af wa d4">
            <div class="af-img"><img
                src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c2Nob29sfGVufDB8fDB8fHww"
                alt=""></div>
            <div>
              <div class="af-lbl">Safe Environment</div>
              <div class="af-sub">24/7 CCTV, medical staff & child-safe campus</div>
            </div>
          </div>
        </div>
        <a href="#programs" class="btn-f">Discover Our Programs <span class="ar">→</span></a>
      </div>
    </div>
  </section>

<section class="programs" id="programs">
    <div class="prog-hd">
      <div class="wa">
        <div class="tag">Academic Programs</div>
        <h2 class="sh">Learning Tailored to<br>Every <em>Age & Stage</em></h2>
        <div class="div"></div>
      </div>
      <p class="sp wa fr2" style="max-width:320px">Three thoughtfully designed programs, each nurturing the unique
        developmental needs of your child.</p>
    </div>
    <div class="prog-grid">
      <div class="pc wa">
        <div class="pc-img">
          <img src="https://images.unsplash.com/photo-1588075592446-265fd1e6e76f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHNjaG9vbHxlbnwwfHwwfHx8MA%3D%3D"
            alt="Little Sprouts program">
          <div class="pc-age">Ages 2–3 Years</div>
        </div>
        <div class="pc-body">
          <div class="pc-n">01</div>
          <h3 class="pc-t">Little Sprouts</h3>
          <p class="pc-d">Gentle, play-based discovery through sensory exploration, storytelling, music and movement.
            Building trust, language and a love for learning from day one.</p>
          <div class="pc-ft"><span class="pc-s">✦ 12 seats remaining</span><a href="#contact" class="pc-lk">↗</a></div>
        </div>
      </div>
      <div class="pc wa d2">
        <div class="pc-img">
          <img src="https://images.unsplash.com/photo-1594608661623-aa0bd3a69d98?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHNjaG9vbHxlbnwwfHwwfHx8MA%3D%3D"
            alt="Rising Stars program">
          <div class="pc-age">Ages 3–5 Years</div>
        </div>
        <div class="pc-body">
          <div class="pc-n">02</div>
          <h3 class="pc-t">Rising Stars</h3>
          <p class="pc-d">Structured curiosity and creative collaboration. Children build numeracy, literacy, social
            skills and emotional intelligence through project-based learning adventures.</p>
          <div class="pc-ft"><span class="pc-s">✦ 8 seats remaining</span><a href="#contact" class="pc-lk">↗</a></div>
        </div>
      </div>
      <div class="pc wa d3">
        <div class="pc-img">
          <img src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c2Nob29sfGVufDB8fDB8fHww"
            alt="Future Leaders program">
          <div class="pc-age">Ages 5–10 Years</div>
        </div>
        <div class="pc-body">
          <div class="pc-n">03</div>
          <h3 class="pc-t">Future Leaders</h3>
          <p class="pc-d">Rigorous academics meet critical thinking, STEM exploration, debate and leadership. Preparing
            children who question, create and lead with confidence and purpose.</p>
          <div class="pc-ft"><span class="pc-s">✦ 5 seats remaining</span><a href="#contact" class="pc-lk">↗</a></div>
        </div>
      </div>
    </div>
  </section>

<section class="why">
    <div class="why-hd">
      <div class="wa">
        <div class="tag" style="color:var(--gold-light)">Why EduHub</div>
        <h2 class="sh w">The Difference Every<br>Parent <em>Notices</em></h2>
        <div class="div"></div>
      </div>
      <p class="sp w wa fr2" style="max-width:340px">From our classrooms to playgrounds, every element of EduHub is
        purposefully designed for childhood excellence.</p>
    </div>
    <div class="bento">
      <div class="bc img-c sr wa">
        <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=600&q=80&auto=format&fit=crop"
          alt="Smart classroom">
      </div>
      <div class="bc s2 wa d1">
        <div class="bi">
          <div class="b-ico"><img
              src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=100&q=80&auto=format&fit=crop" alt="">
          </div>
          <div class="b-lbl">World-Class Infrastructure</div>
          <div class="b-dsc">Architect-designed learning spaces, STEM labs, music rooms, art studios, full library and
            expansive outdoor play areas built for safety and inspiration.</div>
          <div class="b-acc">
            <div class="b-num">5+</div>
            <div class="b-lbl2">Specialist Departments</div>
          </div>
        </div>
      </div>
      <div class="bc wa d2">
        <div class="bi">
          <div class="b-ico"><img
              src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?w=100&q=80&auto=format&fit=crop" alt="">
          </div>
          <div class="b-lbl">Low Teacher–Child Ratio</div>
          <div class="b-dsc">1 teacher per 8 children ensures personalised attention and genuine care for every learner
            every day.</div>
          <div class="b-acc">
            <div class="b-num">1:8</div>
            <div class="b-lbl2">Teacher to Child Ratio</div>
          </div>
        </div>
      </div>
      <div class="bc wa d1">
        <div class="bi">
          <div class="b-ico"><img
              src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c2Nob29sfGVufDB8fDB8fHww" alt="">
          </div>
          <div class="b-lbl">Certified Safe Campus</div>
          <div class="b-dsc">ISO-certified safety protocols, in-house medical facilities and a fully secured perimeter
            give parents complete peace of mind every day.</div>
        </div>
      </div>
      <div class="bc img-c wa d2">
        <img src="https://images.unsplash.com/photo-1594608661623-aa0bd3a69d98?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHNjaG9vbHxlbnwwfHwwfHx8MA%3D%3D"
          alt="Kids outdoor">
      </div>
      <div class="bc wa d3">
        <div class="bi">
          <div class="b-lbl">Award-Winning Curriculum</div>
          <div class="b-dsc">Recognised by the National Education Board. Our curriculum has earned 4 national awards for
            innovation in early childhood pedagogy.</div>
          <div class="b-acc">
            <div class="b-num">98%</div>
            <div class="b-lbl2">Parent Satisfaction</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="gallery" id="gallery">
    <div class="gal-hd">
      <div class="wa">
        <div class="tag">Life at EduHub</div>
        <h2 class="sh">Where Every Day is an<br><em>Adventure</em></h2>
        <div class="div"></div>
      </div>
      <p class="sp wa fr2" style="max-width:320px">A glimpse into the vibrant, joyful world our children inhabit every
        single day.</p>
    </div>
    <div class="gm">
      <div class="gi tall wa">
        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=500&q=80&auto=format&fit=crop"
          alt="Art class">
        <div class="gi-ov">
          <div class="gi-lbl">Art & Creativity</div>
        </div>
      </div>
      <div class="gi wide wa d1">
        <img src="https://images.unsplash.com/photo-1602052577122-f73b9710adba?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8U2NpZW5jZSUyMGxhYnxlbnwwfHwwfHx8MA%3D%3D"
          alt="Science lab">
        <div class="gi-ov">
          <div class="gi-lbl">Science Exploration</div>
        </div>
      </div>
      <div class="gi wa d2">
        <img src="https://plus.unsplash.com/premium_photo-1661868906940-5d8443acf49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c3BvcnR8ZW58MHx8MHx8fDA%3D"
          alt="Sports">
        <div class="gi-ov">
          <div class="gi-lbl">Sports Day</div>
        </div>
      </div>
      <div class="gi wa d3">
        <img src="https://plus.unsplash.com/premium_photo-1664537975122-9c598d85816e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8c3BvcnR8ZW58MHx8MHx8fDA%3D"
          alt="Outdoor play">
        <div class="gi-ov">
          <div class="gi-lbl">Outdoor Adventures</div>
        </div>
      </div>
      <div class="gi wa d1">
        <img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=500&q=80&auto=format&fit=crop"
          alt="Library">
        <div class="gi-ov">
          <div class="gi-lbl">Library & Reading</div>
        </div>
      </div>
      <div class="gi tall wa d2">
        <img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=500&q=80&auto=format&fit=crop"
          alt="Classroom">
        <div class="gi-ov">
          <div class="gi-lbl">Smart Classrooms</div>
        </div>
      </div>
      <div class="gi wide wa d3">
        <img src="https://images.unsplash.com/photo-1526378800651-c32d170fe6f8?w=800&q=80&auto=format&fit=crop"
          alt="Music">
        <div class="gi-ov">
          <div class="gi-lbl">Music & Performing Arts</div>
        </div>
      </div>
    </div>
  </section>

<section class="testi">
    <div class="testi-hd">
      <div class="tag" style="display:block;text-align:center;padding-left:0;">
        <span style="position:relative;padding-left:22px;">Parent Stories<span
            style="content:'';position:absolute;left:0;top:50%;width:14px;height:2px;background:var(--gold);transform:translateY(-50%);display:block;"></span></span>
      </div>
      <h2 class="sh wa" style="margin-top:6px">Voices That <em>Inspire Us</em></h2>
      <div class="div c"></div>
      <p class="sp wa" style="max-width:480px;margin:0 auto">Over 1,500 families have placed their trust in EduHub.
        Here's what they experience, in their own words.</p>
    </div>
    <div class="tg">
      <div class="tc wa">
        <div class="tq">"</div>
        <div class="t-stars"><span class="t-star">★</span><span class="t-star">★</span><span
            class="t-star">★</span><span class="t-star">★</span><span class="t-star">★</span></div>
        <p class="t-txt">My son used to dread school mornings. After one month at EduHub, he wakes up excited and can't
          wait to get there. The transformation has been extraordinary for our whole family.</p>
        <div class="t-auth">
          <div class="t-av"><img
              src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=100&q=80&auto=format&fit=crop"
              alt="Parent"></div>
          <div>
            <div class="t-name">Priya Sharma</div>
            <div class="t-role">Parent · Arjun, Age 5</div>
          </div>
        </div>
      </div>
      <div class="tc feat wa d2">
        <div class="tq">"</div>
        <div class="t-stars"><span class="t-star">★</span><span class="t-star">★</span><span
            class="t-star">★</span><span class="t-star">★</span><span class="t-star">★</span></div>
        <p class="t-txt">EduHub is the rarest thing — a school that truly lives its values. Our daughter is reading,
          painting, solving maths problems, and doing all of this with genuine, infectious joy. I couldn't ask for more.
        </p>
        <div class="t-auth">
          <div class="t-av"><img
              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80&auto=format&fit=crop"
              alt="Parent"></div>
          <div>
            <div class="t-name">Rajesh Kumar</div>
            <div class="t-role">Parent · Meera, Age 7</div>
          </div>
        </div>
      </div>
      <div class="tc wa d3">
        <div class="tq">"</div>
        <div class="t-stars"><span class="t-star">★</span><span class="t-star">★</span><span
            class="t-star">★</span><span class="t-star">★</span><span class="t-star">★</span></div>
        <p class="t-txt">Our shy boy found his voice here. The teachers saw him, understood him deeply, and lifted him
          up. EduHub didn't just educate our son — it changed our entire family's life.</p>
        <div class="t-auth">
          <div class="t-av"><img
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80&auto=format&fit=crop"
              alt="Parent"></div>
          <div>
            <div class="t-name">Sunita Verma</div>
            <div class="t-role">Parent · Rohan, Age 6</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="team" id="team">
    <div class="team-hd">
      <div class="wa">
        <div class="tag">Our Educators</div>
        <h2 class="sh">Passionate Minds,<br><em>Dedicated Hearts</em></h2>
        <div class="div"></div>
      </div>
      <p class="sp wa fr2" style="max-width:320px">Every EduHub teacher is hand-selected for expertise, empathy and an
        unshakeable passion for childhood education.</p>
    </div>
    <div class="tgrid">
      <div class="tmc wa">
        <div class="tm-img"><img
            src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&q=80&auto=format&fit=crop"
            alt="Dr. Ananya Bose"></div>
        <div class="tm-ov">
          <div class="tm-oc">
            <div class="tm-on">Dr. Ananya Bose</div>
            <div class="tm-or">Principal & Founder</div>
            <div class="tm-oq">"Every child carries a universe within. Our job is simply to help it shine."</div>
          </div>
        </div>
        <div class="tm-body">
          <div class="tm-name">Dr. Ananya Bose</div>
          <div class="tm-role">Principal & Founder</div>
          <div class="tm-exp">PhD Education · 22 Yrs Experience</div>
        </div>
      </div>
      <div class="tmc wa d1">
        <div class="tm-img"><img
            src="https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?w=500&q=80&auto=format&fit=crop"
            alt="Mr. Arjun Malhotra"></div>
        <div class="tm-ov">
          <div class="tm-oc">
            <div class="tm-on">Mr. Arjun Malhotra</div>
            <div class="tm-or">Head of STEM</div>
            <div class="tm-oq">"Curiosity is the engine of science. I fuel it every single day."</div>
          </div>
        </div>
        <div class="tm-body">
          <div class="tm-name">Mr. Arjun Malhotra</div>
          <div class="tm-role">Head of STEM</div>
          <div class="tm-exp">M.Sc Engineering · 14 Yrs Experience</div>
        </div>
      </div>
      <div class="tmc wa d2">
        <div class="tm-img"><img
            src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=500&q=80&auto=format&fit=crop"
            alt="Ms. Kavya Nair"></div>
        <div class="tm-ov">
          <div class="tm-oc">
            <div class="tm-on">Ms. Kavya Nair</div>
            <div class="tm-or">Creative Arts Director</div>
            <div class="tm-oq">"Art isn't taught, it's discovered. I create the space for that."</div>
          </div>
        </div>
        <div class="tm-body">
          <div class="tm-name">Ms. Kavya Nair</div>
          <div class="tm-role">Creative Arts Director</div>
          <div class="tm-exp">MFA Fine Arts · 11 Yrs Experience</div>
        </div>
      </div>
      <div class="tmc wa d3">
        <div class="tm-img"><img
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=500&q=80&auto=format&fit=crop"
            alt="Mr. Suresh Pillai"></div>
        <div class="tm-ov">
          <div class="tm-oc">
            <div class="tm-on">Mr. Suresh Pillai</div>
            <div class="tm-or">Sports & Wellness</div>
            <div class="tm-oq">"A strong body builds a strong mind. We develop both, together."</div>
          </div>
        </div>
        <div class="tm-body">
          <div class="tm-name">Mr. Suresh Pillai</div>
          <div class="tm-role">Sports & Wellness Coach</div>
          <div class="tm-exp">National Athlete · 9 Yrs Experience</div>
        </div>
      </div>
    </div>
  </section>

<section class="cta-sec" id="contact">
    <div class="cta-in wa">
      <img class="cta-img"
        src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=600&q=80&auto=format&fit=crop" alt="">
      <div class="cta-txt">
        <div class="tag" style="color:var(--gold-light)">Join the EduHub Family</div>
        <h2 class="sh w" style="margin-top:12px">Give Your Child the<br><em>Start They Deserve</em></h2>
        <div class="div"></div>
        <p class="sp w" style="max-width:460px">Limited seats for 2026–27. Schedule a campus visit, speak with our
          admissions team, and discover why 1,500+ families call EduHub home.</p>
      </div>
      <div class="cta-btns">
        <a href="tel:+919876543210" class="cb1">Book a Campus Visit</a>
        <a href="mailto:hello@eduhub.edu.in" class="cb2">Email Us</a>
      </div>
    </div>
  </section>

<footer>
    <div class="fg">
      <div>
        <a href="#" class="fl">Edu<span>Hub</span></a>
        <p class="fa">EduHub Academy is a premier early childhood institution dedicated to nurturing curious, confident
          and compassionate learners — from their very first day to their very best one.</p>
     
      </div>
      <div>
        <div class="fh">Quick Links</div>
        <ul class="fls">
          <li><a href="#about">About the School</a></li>
          <li><a href="#programs">Academic Programs</a></li>
          <li><a href="#gallery">Campus Life</a></li>
          <li><a href="#team">Our Educators</a></li>
          <li><a href="#contact">Admissions</a></li>
        </ul>
      </div>
      <div>
        <div class="fh">Partners</div>
        <ul class="fls">
          <li><a href="#">National Education Board</a></li>
          <li><a href="#">STEM India Foundation</a></li>
          <li><a href="#">Cambridge Assessment</a></li>
          <li><a href="#">Bright Futures NGO</a></li>
          <li><a href="#">Microsoft Education</a></li>
        </ul>
      </div>
      <div>
        <div class="fh">Contact Us</div>
        <div class="fc">
          <div class="fci"><span>12, Vidya Nagar, Near City Park, Patna – 800001,
              Bihar</span></div>
          <div class="fci"><span>+91 98765 43210</span></div>
          <div class="fci"><span>hello@eduhub.edu.in</span></div>
          <div class="fci"><span>Mon – Sat: 8:00 AM – 5:00 PM</span></div>
        </div>
      </div>
    </div>
    <div class="fb">
      <span>© 2026 EduHub Academy. All rights reserved.</span>
      <span>Crafted with care for every child's bright future · <a href="#">Privacy Policy</a></span>
    </div>
  </footer>

</body>

</html>

CSS

:root {
      --forest: #0B3D2E;
      --forest-light: #145C44;
      --gold: #D4943A;
      --gold-light: #EDB870;
      --cream: #FAF7F2;
      --cream-dark: #F0EBE0;
      --charcoal: #1C1C1C;
      --sage: #7BA899;
      --white: #FFFFFF;
      --muted: #6B7280;
      --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

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

html {
      scroll-behavior: smooth;
    }

body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--charcoal);
      overflow-x: hidden;
      cursor: none;
    }

::-webkit-scrollbar {
      width: 5px;
    }

::-webkit-scrollbar-track {
      background: var(--cream-dark);
    }

::-webkit-scrollbar-thumb {
      background: var(--gold);
      border-radius: 3px;
    }

/* CURSOR */
    .c-dot {
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: opacity .3s;
    }

.c-ring {
      width: 36px;
      height: 36px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: width .3s, height .3s, opacity .3s;
      opacity: .5;
    }

.c-ring.big {
      width: 58px;
      height: 58px;
      opacity: .25;
    }

/* LOADER */
    #ld {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: var(--forest);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity .8s var(--ease-expo);
    }

#ld.gone {
      opacity: 0;
      pointer-events: none;
    }

.ld-logo {
      font-family: 'Fraunces', serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.03em;
    }

.ld-logo span {
      color: var(--gold-light);
    }

.ld-bar {
      width: 180px;
      height: 2px;
      background: rgba(255, 255, 255, .12);
      border-radius: 2px;
      margin-top: 20px;
      overflow: hidden;
    }

.ld-prog {
      height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      animation: ldAnim 1.5s var(--ease-expo) .2s forwards;
      width: 0;
    }

@keyframes ldAnim {
      to {
        width: 100%;
      }
    }

/* MOBILE MENU */
    .mob-menu {
      position: fixed;
      inset: 0;
      z-index: 490;
      background: var(--forest);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      transform: translateX(100%);
      transition: transform .5s var(--ease-expo);
    }

.mob-menu.open {
      transform: translateX(0);
    }

.mob-menu a {
      font-family: 'Fraunces', serif;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      transition: color .3s;
    }

.mob-menu a:hover {
      color: var(--gold-light);
    }

/* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 5%;
      transition: all .5s var(--ease-expo);
    }

nav.on {
      background: rgba(250, 247, 242, .97);
      backdrop-filter: blur(20px);
      padding: 14px 5%;
      box-shadow: 0 1px 40px rgba(11, 61, 46, .1);
      border-bottom: 1px solid rgba(11, 61, 46, .06);
    }

.n-logo {
      font-family: 'Fraunces', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      letter-spacing: -.02em;
      transition: color .4s;
    }

nav.on .n-logo {
      color: var(--forest);
    }

.n-logo b {
      color: var(--gold-light);
    }

nav.on .n-logo b {
      color: var(--gold);
    }

.n-links {
      display: flex;
      align-items: center;
      gap: 34px;
      list-style: none;
    }

.n-links a {
      text-decoration: none;
      font-size: .88rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .82);
      transition: color .3s;
      position: relative;
    }

nav.on .n-links a {
      color: var(--muted);
    }

.n-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gold);
      border-radius: 1px;
      transition: width .3s var(--ease-expo);
    }

.n-links a:hover {
      color: #fff;
    }

nav.on .n-links a:hover {
      color: var(--forest);
    }

.n-links a:hover::after {
      width: 100%;
    }

.n-btn {
      background: var(--gold);
      color: #fff;
      padding: 11px 28px;
      border-radius: 50px;
      font-weight: 600;
      font-size: .86rem;
      text-decoration: none;
      transition: all .3s var(--ease-expo);
      box-shadow: 0 4px 20px rgba(212, 148, 58, .35);
      letter-spacing: .02em;
    }

.n-btn:hover {
      background: var(--forest);
      box-shadow: 0 8px 30px rgba(11, 61, 46, .3);
      transform: translateY(-2px);
    }

.hbg {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: none;
      padding: 4px;
    }

.hbg span {
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all .3s;
      display: block;
    }

nav.on .hbg span {
      background: var(--charcoal);
    }

/* HERO */
    .hero {
      height: 100vh;
      min-height: 700px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }

.h-bg {
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1800&q=85&auto=format&fit=crop') center 20%/cover;
      transform: scale(1.08);
      animation: hZoom 12s ease-out forwards;
    }

@keyframes hZoom {
      to {
        transform: scale(1);
      }
    }

.h-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(170deg, rgba(11, 61, 46, .15) 0%, rgba(11, 61, 46, .5) 50%, rgba(11, 61, 46, .93) 100%);
    }

.h-grain {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      mix-blend-mode: overlay;
    }

.h-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 5% 8%;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: flex-end;
      gap: 40px;
    }

.h-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(212, 148, 58, .18);
      border: 1px solid rgba(212, 148, 58, .38);
      color: var(--gold-light);
      padding: 7px 20px;
      border-radius: 50px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 26px;
      backdrop-filter: blur(10px);
      animation: fUp .9s var(--ease-expo) 1.4s both;
    }

.e-dot {
      width: 6px;
      height: 6px;
      background: var(--gold-light);
      border-radius: 50%;
      animation: blink 2s infinite;
    }

@keyframes blink {

0%,
      100% {
        opacity: 1
      }

50% {
        opacity: .3
      }
    }

.h1 {
      font-family: 'Fraunces', serif;
      font-size: clamp(2.8rem, 5.5vw, 3.2rem);
      font-weight: 700;
      line-height: 1.06;
      color: #fff;
      letter-spacing: -.03em;
      max-width: 740px;
      animation: fUp .9s var(--ease-expo) 1.6s both;
    }

.h1 em {
      font-style: italic;
      color: var(--gold-light);
    }

.h-sub {
      color: rgba(255, 255, 255, .7);
      font-size: 1rem;
      line-height: 1.85;
      max-width: 500px;
      margin: 22px 0 40px;
      animation: fUp .9s var(--ease-expo) 1.8s both;
      font-weight: 300;
    }

.h-ctas {
      display: flex;
      align-items: center;
      gap: 20px;
      animation: fUp .9s var(--ease-expo) 2s both;
      flex-wrap: wrap;
    }

.cta-a {
      background: var(--gold);
      color: #fff;
      padding: 15px 38px;
      border-radius: 50px;
      font-weight: 700;
      font-size: .92rem;
      text-decoration: none;
      transition: all .4s var(--ease-expo);
      box-shadow: 0 8px 36px rgba(212, 148, 58, .48);
      border: 2px solid transparent;
      letter-spacing: .02em;
    }

.cta-a:hover {
      background: transparent;
      border-color: var(--gold-light);
      color: var(--gold-light);
      transform: translateY(-3px);
    }

.cta-b {
      display: flex;
      align-items: center;
      gap: 14px;
      color: rgba(255, 255, 255, .82);
      text-decoration: none;
      font-weight: 500;
      font-size: .9rem;
      transition: color .3s;
    }

.cta-b:hover {
      color: var(--gold-light);
    }

.play {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .38);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      transition: all .3s var(--ease-spring);
      position: relative;
    }

.play::before {
      content: '';
      position: absolute;
      inset: -7px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .13);
      animation: ripple 2.2s ease-out infinite;
    }

@keyframes ripple {
      0% {
        transform: scale(1);
        opacity: 1
      }

100% {
        transform: scale(1.6);
        opacity: 0
      }
    }

.cta-b:hover .play {
      background: var(--gold);
      border-color: var(--gold);
      transform: scale(1.1);
    }

.h-stats {
      display: flex;
      flex-direction: column;
      gap: 14px;
      animation: fUp .9s var(--ease-expo) 2.2s both;
    }

.h-stat {
      background: rgba(255, 255, 255, .09);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 18px;
      padding: 18px 24px;
      text-align: right;
      min-width: 154px;
    }

.h-sn {
      font-family: 'Fraunces', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-light);
      line-height: 1;
      display: block;
    }

.h-sl {
      color: rgba(255, 255, 255, .6);
      font-size: .75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-top: 3px;
      display: block;
    }

.scroll-hint {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .45);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      animation: fUp .9s var(--ease-expo) 2.4s both;
    }

.s-line {
      width: 1px;
      height: 54px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5));
      animation: sDrop 2.2s ease-in-out infinite;
    }

@keyframes sDrop {

0%,
      100% {
        transform: scaleY(1);
        transform-origin: top
      }

50% {
        transform: scaleY(.35);
        transform-origin: top
      }
    }

@keyframes fUp {
      from {
        opacity: 0;
        transform: translateY(40px)
      }

to {
        opacity: 1;
        transform: translateY(0)
      }
    }

/* MARQUEE */
    .mq {
      background: var(--forest);
      padding: 13px 0;
      overflow: hidden;
      white-space: nowrap;
    }

.mq-inner {
      display: inline-flex;
      animation: mq 28s linear infinite;
    }

.mq-inner:hover {
      animation-play-state: paused;
    }

.mq-item {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0 36px;
      color: rgba(255, 255, 255, .7);
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

.mq-sep {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
    }

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

/* SECTIONS */
    section {
      padding: 110px 5%;
    }

.tag {
      display: inline-block;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
      position: relative;
      padding-left: 22px;
    }

.tag::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 14px;
      height: 2px;
      background: var(--gold);
      transform: translateY(-50%);
    }

h2.sh {
      font-family: 'Fraunces', serif;
      font-size: clamp(2rem, 3.8vw, 3.3rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.03em;
      color: var(--charcoal);
    }

h2.sh em {
      font-style: italic;
      color: var(--forest);
    }

h2.sh.w {
      color: #fff;
    }

h2.sh.w em {
      color: var(--gold-light);
    }

p.sp {
      color: var(--muted);
      font-size: .97rem;
      line-height: 1.85;
      font-weight: 300;
    }

p.sp.w {
      color: rgba(255, 255, 255, .62);
    }

.div {
      width: 56px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      border-radius: 2px;
      margin: 18px 0 30px;
    }

.div.c {
      margin-left: auto;
      margin-right: auto;
    }

/* ABOUT */
    .about {
      background: #fff;
      overflow: hidden;
    }

.ab-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 90px;
      align-items: center;
    }

.ab-imgs {
      position: relative;
      height: 570px;
    }

.ai {
      position: absolute;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 28px 72px rgba(11, 61, 46, .18);
    }

.ai img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .8s var(--ease-expo);
    }

.ai:hover img {
      transform: scale(1.05);
    }

.ai1 {
      width: 310px;
      height: 390px;
      left: 0;
      top: 0;
      z-index: 2;
    }

.ai2 {
      width: 236px;
      height: 270px;
      right: 0;
      top: 50px;
      z-index: 3;
    }

.ai3 {
      width: 200px;
      height: 170px;
      right: 24px;
      bottom: 20px;
      z-index: 1;
    }

.ab-badge {
      position: absolute;
      left: 230px;
      bottom: 90px;
      z-index: 4;
      background: var(--gold);
      border-radius: 18px;
      padding: 18px 24px;
      box-shadow: 0 14px 44px rgba(212, 148, 58, .42);
    }

.ab-bn {
      font-family: 'Fraunces', serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      display: block;
    }

.ab-bt {
      font-size: .78rem;
      font-weight: 600;
      color: rgba(255, 255, 255, .78);
      text-transform: uppercase;
      letter-spacing: .06em;
      display: block;
      margin-top: 3px;
    }

.ab-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 32px 0 40px;
    }

.af {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px;
      background: var(--cream);
      border-radius: 16px;
      border: 1px solid rgba(11, 61, 46, .07);
      transition: all .35s var(--ease-expo);
    }

.af:hover {
      background: #fff;
      border-color: var(--gold);
      box-shadow: 0 8px 28px rgba(212, 148, 58, .1);
      transform: translateY(-3px);
    }

.af-img {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 12px;
      overflow: hidden;
    }

.af-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.af-lbl {
      font-weight: 700;
      font-size: .86rem;
      color: var(--charcoal);
      margin-bottom: 3px;
    }

.af-sub {
      font-size: .77rem;
      color: var(--muted);
      line-height: 1.5;
    }

.btn-f {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--forest);
      color: #fff;
      padding: 14px 34px;
      border-radius: 50px;
      font-weight: 600;
      font-size: .88rem;
      text-decoration: none;
      transition: all .4s var(--ease-expo);
      box-shadow: 0 8px 28px rgba(11, 61, 46, .22);
      letter-spacing: .02em;
    }

.btn-f:hover {
      background: var(--gold);
      box-shadow: 0 12px 38px rgba(212, 148, 58, .38);
      transform: translateY(-3px);
    }

.btn-f .ar {
      transition: transform .3s;
    }

.btn-f:hover .ar {
      transform: translateX(4px);
    }

/* PROGRAMS */
    .programs {
      background: var(--cream);
      overflow: hidden;
    }

.prog-hd {
      max-width: 1200px;
      margin: 0 auto 58px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

.prog-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

.pc {
      background: #fff;
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 4px 22px rgba(11, 61, 46, .06);
      transition: all .5s var(--ease-expo);
      cursor: none;
    }

.pc:hover {
      transform: translateY(-12px);
      box-shadow: 0 28px 72px rgba(11, 61, 46, .14);
    }

.pc-img {
      height: 240px;
      overflow: hidden;
      position: relative;
    }

.pc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s var(--ease-expo);
    }

.pc:hover .pc-img img {
      transform: scale(1.08);
    }

.pc-age {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--gold);
      color: #fff;
      padding: 5px 15px;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

.pc-body {
      padding: 30px;
    }

.pc-n {
      font-family: 'Fraunces', serif;
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--cream-dark);
      line-height: 1;
      margin-bottom: -10px;
      letter-spacing: -.04em;
    }

.pc-t {
      font-family: 'Fraunces', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--charcoal);
      margin-bottom: 12px;
      letter-spacing: -.02em;
    }

.pc-d {
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.75;
      margin-bottom: 26px;
      font-weight: 300;
    }

.pc-ft {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 18px;
      border-top: 1px solid var(--cream-dark);
    }

.pc-s {
      font-size: .8rem;
      color: var(--sage);
      font-weight: 600;
    }

.pc-lk {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--forest);
      font-size: .95rem;
      text-decoration: none;
      transition: all .3s var(--ease-spring);
      border: 1px solid var(--cream-dark);
    }

.pc-lk:hover {
      background: var(--forest);
      color: #fff;
      transform: scale(1.1) rotate(45deg);
      border-color: var(--forest);
    }

/* WHY — BENTO */
    .why {
      background: var(--forest);
      overflow: hidden;
      position: relative;
    }

.why::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(212, 148, 58, .055) 1.5px, transparent 1.5px);
      background-size: 34px 34px;
      pointer-events: none;
    }

.why-hd {
      max-width: 1200px;
      margin: 0 auto 58px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
    }

.bento {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 18px;
    }

.bc {
      background: rgba(255, 255, 255, .055);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      overflow: hidden;
      transition: all .4s var(--ease-expo);
    }

.bc:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(212, 148, 58, .32);
      transform: translateY(-4px);
    }

.bc.img-c {
      padding: 0;
    }

.bc.img-c img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s var(--ease-expo);
      display: block;
    }

.bc.img-c:hover img {
      transform: scale(1.06);
    }

.bc.s2 {
      grid-column: span 2;
    }

.bc.sr {
      grid-row: span 2;
    }

.bi {
      padding: 28px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

.b-ico {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 18px;
    }

.b-ico img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.b-lbl {
      font-family: 'Fraunces', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: -.02em;
    }

.b-dsc {
      color: rgba(255, 255, 255, .52);
      font-size: .86rem;
      line-height: 1.7;
      font-weight: 300;
    }

.b-acc {
      margin-top: auto;
      padding-top: 16px;
    }

.b-num {
      font-family: 'Fraunces', serif;
      font-size: 3.2rem;
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: -.04em;
      line-height: 1;
    }

.b-lbl2 {
      color: rgba(255, 255, 255, .5);
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-top: 3px;
    }

/* GALLERY */
    .gallery {
      background: #fff;
    }

.gal-hd {
      max-width: 1200px;
      margin: 0 auto 54px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

.gm {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 180px;
      gap: 14px;
    }

.gi {
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      cursor: none;
    }

.gi.tall {
      grid-row: span 2;
    }

.gi.wide {
      grid-column: span 2;
    }

.gi img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s var(--ease-expo);
      display: block;
    }

.gi:hover img {
      transform: scale(1.08);
    }

.gi-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(11, 61, 46, .82) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .4s;
      display: flex;
      align-items: flex-end;
      padding: 18px;
    }

.gi:hover .gi-ov {
      opacity: 1;
    }

.gi-lbl {
      color: #fff;
      font-weight: 700;
      font-size: .88rem;
    }

/* TESTIMONIALS */
    .testi {
      background: var(--cream);
      overflow: hidden;
    }

.testi-hd {
      max-width: 1200px;
      margin: 0 auto 58px;
      text-align: center;
    }

.tg {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 22px;
      align-items: start;
    }

.tc {
      background: #fff;
      border-radius: 22px;
      padding: 34px;
      border: 1px solid rgba(11, 61, 46, .07);
      transition: all .4s var(--ease-expo);
      position: relative;
    }

.tc:hover {
      border-color: var(--gold);
      box-shadow: 0 18px 54px rgba(212, 148, 58, .11);
      transform: translateY(-6px);
    }

.tc.feat {
      background: var(--forest);
      border-color: var(--forest);
      transform: translateY(-14px);
    }

.tc.feat:hover {
      transform: translateY(-20px);
    }

.tq {
      font-family: 'Fraunces', serif;
      font-size: 4.5rem;
      line-height: .8;
      color: var(--gold);
      opacity: .15;
      position: absolute;
      top: 18px;
      right: 22px;
      font-weight: 700;
    }

.tc.feat .tq {
      opacity: .22;
    }

.t-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 18px;
    }

.t-star {
      color: var(--gold);
      font-size: .88rem;
    }

.tc.feat .t-star {
      color: var(--gold-light);
    }

.t-txt {
      font-family: 'Fraunces', serif;
      font-size: 1rem;
      line-height: 1.72;
      font-weight: 400;
      font-style: italic;
      color: var(--charcoal);
      margin-bottom: 26px;
    }

.tc.feat .t-txt {
      color: rgba(255, 255, 255, .82);
    }

.t-auth {
      display: flex;
      align-items: center;
      gap: 13px;
    }

.t-av {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 3px solid var(--cream);
    }

.tc.feat .t-av {
      border-color: rgba(255, 255, 255, .18);
    }

.t-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.t-name {
      font-weight: 700;
      font-size: .9rem;
      color: var(--charcoal);
    }

.tc.feat .t-name {
      color: #fff;
    }

.t-role {
      font-size: .78rem;
      color: var(--muted);
      margin-top: 2px;
    }

.tc.feat .t-role {
      color: rgba(255, 255, 255, .48);
    }

/* TEAM */
    .team {
      background: #fff;
    }

.team-hd {
      max-width: 1200px;
      margin: 0 auto 58px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

.tgrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
    }

.tmc {
      border-radius: 22px;
      overflow: hidden;
      position: relative;
      background: var(--cream);
      transition: all .5s var(--ease-expo);
      cursor: none;
    }

.tmc:hover {
      transform: translateY(-10px);
      box-shadow: 0 28px 72px rgba(11, 61, 46, .14);
    }

.tm-img {
      height: 290px;
      overflow: hidden;
      position: relative;
    }

.tm-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      transition: transform .6s var(--ease-expo);
    }

.tmc:hover .tm-img img {
      transform: scale(1.06);
    }

.tm-body {
      padding: 22px;
    }

.tm-name {
      font-family: 'Fraunces', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--charcoal);
      letter-spacing: -.02em;
      margin-bottom: 3px;
    }

.tm-role {
      font-size: .8rem;
      color: var(--gold);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

.tm-exp {
      font-size: .79rem;
      color: var(--muted);
      margin-top: 7px;
    }

.tm-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(11, 61, 46, .95) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .4s;
      padding: 24px;
      display: flex;
      align-items: flex-end;
    }

.tmc:hover .tm-ov {
      opacity: 1;
    }

.tm-oc {
      color: #fff;
    }

.tm-on {
      font-family: 'Fraunces', serif;
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 3px;
    }

.tm-or {
      font-size: .78rem;
      color: var(--gold-light);
      margin-bottom: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

.tm-oq {
      font-size: .83rem;
      color: rgba(255, 255, 255, .68);
      font-style: italic;
      line-height: 1.6;
    }

/* CTA BANNER */
    .cta-sec {
      background: var(--cream);
      padding: 0 5% 110px;
    }

.cta-in {
      max-width: 1200px;
      margin: 0 auto;
      background: var(--forest);
      border-radius: 30px;
      padding: 80px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 60px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

.cta-in::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      border: 1px solid rgba(212, 148, 58, .14);
    }

.cta-in::after {
      content: '';
      position: absolute;
      bottom: -60px;
      right: 240px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid rgba(212, 148, 58, .09);
    }

.cta-img {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 360px;
      object-fit: cover;
      object-position: top;
      opacity: .11;
      border-radius: 0 30px 30px 0;
    }

.cta-txt {
      position: relative;
      z-index: 2;
    }

.cta-btns {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 14px;
      flex-direction: column;
    }

.cb1 {
      background: var(--gold);
      color: #fff;
      padding: 14px 34px;
      border-radius: 50px;
      font-weight: 700;
      text-decoration: none;
      font-size: .9rem;
      transition: all .3s;
      white-space: nowrap;
      text-align: center;
      letter-spacing: .02em;
    }

.cb1:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

.cb2 {
      background: transparent;
      color: rgba(255, 255, 255, .7);
      padding: 14px 34px;
      border-radius: 50px;
      border: 1px solid rgba(255, 255, 255, .2);
      font-weight: 600;
      text-decoration: none;
      font-size: .9rem;
      transition: all .3s;
      text-align: center;
    }

.cb2:hover {
      border-color: rgba(255, 255, 255, .5);
      color: #fff;
    }

/* FOOTER */
    footer {
      background: #0A1A12;
      padding: 76px 5% 0;
      color: rgba(255, 255, 255, .52);
    }

.fg {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.4fr;
      gap: 56px;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

.fl {
      font-family: 'Fraunces', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      display: block;
      margin-bottom: 16px;
      letter-spacing: -.02em;
    }

.fl span {
      color: var(--gold-light);
    }

.fa {
      font-size: .86rem;
      line-height: 1.85;
      margin-bottom: 26px;
      font-weight: 300;
    }

.fs {
      display: flex;
      gap: 10px;
    }

.fsb {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      overflow: hidden;
      transition: all .3s;
    }

.fsb:hover {
      border-color: var(--gold);
      background: rgba(212, 148, 58, .14);
    }

.fsb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.fh {
      font-family: 'Fraunces', serif;
      font-size: .98rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 22px;
      letter-spacing: -.01em;
    }

.fls {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

.fls a {
      color: rgba(255, 255, 255, .48);
      text-decoration: none;
      font-size: .85rem;
      transition: color .3s;
      font-weight: 300;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.fls a:hover {
      color: var(--gold-light);
    }

.fls a::before {
      content: '';
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .3s;
      display: block;
    }

.fls a:hover::before {
      width: 12px;
    }

.fc {
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

.fci {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: .84rem;
      font-weight: 300;
      line-height: 1.6;
    }

.fci-ic {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      margin-top: 1px;
    }

.fb {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 0;
      font-size: .8rem;
      flex-wrap: wrap;
      gap: 10px;
    }

.fb a {
      color: var(--gold-light);
      text-decoration: none;
    }

/* ANIMATE */
    @keyframes fUp {
      from {
        opacity: 0;
        transform: translateY(40px)
      }

to {
        opacity: 1;
        transform: translateY(0)
      }
    }

.wa {
      opacity: 0;
      transform: translateY(46px);
      transition: opacity .75s var(--ease-expo), transform .75s var(--ease-expo);
    }

.wa.fl2 {
      transform: translateX(-46px);
    }

.wa.fr2 {
      transform: translateX(46px);
    }

.wa.vis {
      opacity: 1;
      transform: translate(0, 0);
    }

.d1 {
      transition-delay: .1s !important
    }

.d2 {
      transition-delay: .2s !important
    }

.d3 {
      transition-delay: .32s !important
    }

.d4 {
      transition-delay: .44s !important
    }

.d5 {
      transition-delay: .55s !important
    }

/* RESPONSIVE */
    @media(max-width:1100px) {
      .bento {
        grid-template-columns: repeat(2, 1fr);
      }

.bc.s2 {
        grid-column: span 1;
      }

.bc.sr {
        grid-row: span 1;
      }

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

.fg {
        grid-template-columns: 1fr 1fr;
        gap: 38px;
      }
    }

@media(max-width:900px) {
      section {
        padding: 80px 5%;
      }

.h-content {
        grid-template-columns: 1fr;
      }

.h-stats {
        flex-direction: row;
        flex-wrap: wrap;
      }

.ab-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }

.ab-imgs {
        height: 380px;
      }

.ai1 {
        width: 260px;
        height: 310px;
      }

.ai2 {
        width: 210px;
        height: 220px;
      }

.ai3 {
        display: none;
      }

.ab-badge {
        left: 196px;
      }

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

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

.gi.wide {
        grid-column: span 1;
      }

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

.tc.feat {
        transform: none;
      }

.tc.feat:hover {
        transform: translateY(-6px);
      }

.cta-in {
        grid-template-columns: 1fr;
        padding: 48px;
      }

.cta-btns {
        flex-direction: row;
      }

.why-hd {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

@media(max-width:768px) {
      body {
        cursor: auto;
      }

.c-dot,
      .c-ring {
        display: none;
      }

.n-links,
      .nav-right {
        display: none;
      }

.hbg {
        display: flex;
      }

.h1 {
        font-size: 2.5rem;
      }

.h-content {
        padding: 0 5% 100px;
      }

.ab-feats {
        grid-template-columns: 1fr;
      }

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

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

.prog-hd,
      .gal-hd,
      .team-hd,
      .why-hd {
        flex-direction: column;
        align-items: flex-start;
      }

.cta-in {
        padding: 38px;
      }

.cta-btns {
        flex-direction: column;
      }
    }

@media(max-width:480px) {
      .h-ctas {
        flex-direction: column;
        align-items: flex-start;
      }

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

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

.gi.tall {
        grid-row: span 1;
      }
    }

JavaScript

/* LOADER */
    window.addEventListener('load', () => setTimeout(() => document.getElementById('ld').classList.add('gone'), 1600));

/* CURSOR */
    const cd = document.getElementById('cd'), cr = document.getElementById('cr');
    let mx = 0, my = 0, rx = 0, ry = 0;
    document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; cd.style.cssText = `left:${mx}px;top:${my}px;`; });
    (function anim() { rx += (mx - rx) * .12; ry += (my - ry) * .12; cr.style.cssText = `left:${rx}px;top:${ry}px;`; requestAnimationFrame(anim); })();
    document.querySelectorAll('a,button,.pc,.tmc,.gi,.bc,.af').forEach(el => {
      el.addEventListener('mouseenter', () => cr.classList.add('big'));
      el.addEventListener('mouseleave', () => cr.classList.remove('big'));
    });

/* NAV */
    window.addEventListener('scroll', () => document.getElementById('nav').classList.toggle('on', scrollY > 60));

/* MOBILE MENU */
    function toggleMM() { document.getElementById('mm').classList.toggle('open'); }
    function closeMM() { document.getElementById('mm').classList.remove('open'); }

/* SCROLL REVEAL */
    const ro = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vis'); ro.unobserve(e.target); } });
    }, { threshold: .1, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.wa').forEach(el => ro.observe(el));

/* COUNTERS */
    const co = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const el = entry.target;
        const target = +el.dataset.target;
        const suf = el.dataset.suf || '+';
        let cur = 0; const steps = 70; const inc = target / steps;
        const t = setInterval(() => { cur += inc; if (cur >= target) { cur = target; clearInterval(t); } el.textContent = Math.floor(cur) + suf; }, 22);
        co.unobserve(el);
      });
    }, { threshold: .5 });
    document.querySelectorAll('[data-target]').forEach(el => co.observe(el));

/* PARALLAX */
    window.addEventListener('scroll', () => {
      const bg = document.querySelector('.h-bg');
      if (bg) bg.style.transform = `scale(1) translateY(${scrollY * .22}px)`;
    });

EduHub Academy Premium Template Preview

Download Options