<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sir Khacha Digital Academy | Transforming Minds, Empowering Digital Excellence</title>
<meta name="description" content="100% Online Mathematics, Physical Science & Digital Literacy Teaching & Tutoring for South African Grade 8-12 Learners. CAPS, IEB & Cambridge Curricula covered via Google Meet & Interactive Whiteboard.">
<meta name="keywords" content="Online Teaching & Tutoring South Africa, Grade 8-12 Math Tutor, Grade 8-12 Science Tutor, CAPS Tutor, IEB Mathematics, Sir Khacha Digital Academy">
<meta name="author" content="Sir Khacha Digital Academy">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ==========================================================================
CSS VARIABLES & THEME SETUP
========================================================================== */
:root {
--primary: #3B82F6;
--primary-hover: #2563EB;
--primary-light: #EFF6FF;
--secondary: #0F172A;
--accent: #F59E0B;
--bg-body: #FFFFFF;
--bg-card: #FFFFFF;
--bg-alt: #F8FAFC;
--text-main: #1E293B;
--text-muted: #64748B;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
--shadow-md: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
--shadow-lg: 0 20px 30px -10px rgba(15, 23, 42, 0.12);
--radius: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
}
[data-theme="dark"] {
--bg-body: #0B0F17;
--bg-card: #151C2C;
--bg-alt: #0F172A;
--text-main: #F1F5F9;
--text-muted: #94A3B8;
--border-color: #1E293B;
--primary-light: rgba(59, 130, 246, 0.15);
--shadow-md: 0 10px 25px -5px rgba(0,0,0,0.5);
}
/* Reset & Base Styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-body);
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.6;
overflow-x: hidden;
transition: background-color 0.3s, color 0.3s;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, textarea, select {
font: inherit;
}
/* Custom Cursor */
.custom-cursor {
width: 12px;
height: 12px;
background-color: var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.1s ease, width 0.2s, height 0.2s, background-color 0.2s;
}
.custom-cursor-follower {
width: 36px;
height: 36px;
border: 2px solid var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out, width 0.2s, height 0.2s, border-color 0.2s;
opacity: 0.6;
}
/* Custom Preloader */
.preloader {
position: fixed;
inset: 0;
background-color: var(--bg-body);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10000;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid var(--primary-light);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Utility Classes */
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 4.5rem 0; /* Compact spacing */
position: relative;
}
.section-bg-alt {
background-color: var(--bg-alt);
}
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.section-header {
margin-bottom: 2.5rem;
text-align: center;
}
.section-subtitle {
text-transform: uppercase;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--primary);
margin-bottom: 0.5rem;
display: block;
}
.section-title {
font-family: var(--font-heading);
font-size: 2.25rem;
color: var(--text-main);
margin-bottom: 0.75rem;
}
.section-desc {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
font-size: 1rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.75rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
box-shadow: var(--shadow-sm);
}
.btn-primary {
background-color: var(--primary);
color: #ffffff;
}
.btn-primary:hover {
background-color: var(--primary-hover);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background-color: var(--primary);
color: #ffffff;
transform: translateY(-2px);
}
/* Scroll Animations */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-up.appear {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
1. NAVIGATION BAR
========================================================================== */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
transition: var(--transition);
}
[data-theme="dark"] .navbar {
background-color: rgba(11, 15, 23, 0.92);
}
.navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 75px;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--text-main);
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary), #1D4ED8);
color: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
}
.nav-link {
font-weight: 500;
font-size: 0.92rem;
color: var(--text-main);
transition: var(--transition);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: var(--transition);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.nav-link:hover, .nav-link.active {
color: var(--primary);
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.theme-toggle {
background: none;
border: none;
color: var(--text-main);
font-size: 1.25rem;
cursor: pointer;
padding: 0.4rem;
border-radius: 50%;
transition: var(--transition);
}
.theme-toggle:hover {
background-color: var(--primary-light);
color: var(--primary);
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 0.5rem;
}
.hamburger span {
width: 25px;
height: 2.5px;
background-color: var(--text-main);
border-radius: 2px;
transition: var(--transition);
}
/* ==========================================================================
2. HERO ROTATING SLIDER
========================================================================== */
.hero {
position: relative;
margin-top: 75px;
height: calc(100vh - 75px);
min-height: 550px;
max-height: 750px;
overflow: hidden;
}
.hero-slider {
width: 100%;
height: 100%;
position: relative;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 100%);
}
.hero-content {
position: relative;
z-index: 2;
color: #ffffff;
max-width: 650px;
}
.badge {
display: inline-block;
padding: 0.35rem 1rem;
background-color: rgba(59, 130, 246, 0.25);
border: 1px solid rgba(59, 130, 246, 0.5);
border-radius: 50px;
color: #60A5FA;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.25rem;
backdrop-filter: blur(4px);
}
.hero-title {
font-family: var(--font-heading);
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.1rem;
color: #CBD5E1;
margin-bottom: 2rem;
}
.slider-nav {
position: absolute;
bottom: 30px;
right: 5%;
z-index: 10;
display: flex;
gap: 0.75rem;
}
.slider-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
backdrop-filter: blur(5px);
}
.slider-btn:hover {
background: var(--primary);
border-color: var(--primary);
}
/* ==========================================================================
3. ABOUT SECTION & STATS
========================================================================== */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-image-wrap {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.experience-badge {
position: absolute;
bottom: 20px;
left: 20px;
background-color: var(--bg-card);
padding: 1.25rem 1.5rem;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 1rem;
border-left: 4px solid var(--primary);
}
.exp-number {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.exp-text {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
}
.about-features {
margin-top: 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.about-feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
font-size: 0.95rem;
}
.about-feature-item i {
color: var(--primary);
background-color: var(--primary-light);
padding: 0.4rem;
border-radius: 50%;
font-size: 0.8rem;
}
/* Stats Section */
.stats-section {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
color: white;
padding: 3rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-number {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
}
.stat-label {
color: #94A3B8;
font-size: 0.9rem;
font-weight: 500;
}
/* ==========================================================================
4. SERVICES & CURRICULUM PRODUCTS
========================================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.75rem;
}
.service-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 2rem;
transition: var(--transition);
position: relative;
top: 0;
}
.service-card:hover {
top: -6px;
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.service-icon {
width: 55px;
height: 55px;
background-color: var(--primary-light);
color: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.service-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.service-desc {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
}
/* ==========================================================================
5. PACKAGES & PRICING TABLE
========================================================================== */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
align-items: stretch;
}
.package-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 2.25rem 1.75rem;
display: flex;
flex-direction: column;
position: relative;
transition: var(--transition);
}
.package-card.popular {
border-color: var(--primary);
box-shadow: var(--shadow-md);
transform: scale(1.03);
}
.popular-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background-color: var(--primary);
color: white;
padding: 0.25rem 1rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.package-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.package-price {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
}
.package-price span {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 400;
font-family: var(--font-body);
}
.package-desc {
font-size: 0.88rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-color);
}
.package-features {
margin-bottom: 2rem;
flex-grow: 1;
}
.package-features li {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
margin-bottom: 0.75rem;
color: var(--text-main);
}
.package-features li i {
color: var(--primary);
font-size: 0.85rem;
}
/* ==========================================================================
6. LIGHTBOX GALLERY (Whiteboard & Class Snapshots)
========================================================================== */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.25rem;
}
.gallery-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
height: 200px;
box-shadow: var(--shadow-sm);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
display: flex;
align-items: center;
justify-content: center;
color: white;
opacity: 0;
transition: var(--transition);
font-size: 1.5rem;
}
.gallery-item:hover img {
transform: scale(1.08);
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
/* Lightbox Modal */
.lightbox-modal {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.9);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: var(--transition);
padding: 2rem;
}
.lightbox-modal.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-content {
max-width: 900px;
max-height: 80vh;
position: relative;
}
.lightbox-content img {
max-width: 100%;
max-height: 80vh;
border-radius: 8px;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 2rem;
cursor: pointer;
}
/* ==========================================================================
7. TESTIMONIALS CAROUSEL
========================================================================== */
.testimonials-slider-container {
max-width: 800px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.testimonials-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.testimonial-card {
min-width: 100%;
padding: 2.5rem;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-align: center;
}
.stars {
color: var(--accent);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.quote-text {
font-size: 1.1rem;
font-style: italic;
color: var(--text-main);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.author-info img {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 0.75rem auto;
object-fit: cover;
}
.author-name {
font-weight: 700;
font-size: 1.05rem;
}
.author-role {
font-size: 0.85rem;
color: var(--text-muted);
}
.testi-controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
.testi-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--border-color);
cursor: pointer;
transition: var(--transition);
}
.testi-dot.active {
background-color: var(--primary);
width: 28px;
border-radius: 10px;
}
/* ==========================================================================
8. TEAM SECTION
========================================================================== */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.team-card {
background-color: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.team-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.team-img-box {
height: 280px;
overflow: hidden;
position: relative;
}
.team-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-info {
padding: 1.5rem;
text-align: center;
}
.team-name {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.team-role {
color: var(--primary);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.team-bio {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.5;
}
/* ==========================================================================
9. BLOG SECTION
========================================================================== */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.blog-card {
background-color: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border-color);
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
}
.blog-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.blog-img {
height: 190px;
overflow: hidden;
}
.blog-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.blog-card:hover .blog-img img {
transform: scale(1.05);
}
.blog-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-meta {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.6rem;
display: flex;
gap: 1rem;
}
.blog-title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-title a:hover {
color: var(--primary);
}
.blog-excerpt {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 1.25rem;
flex-grow: 1;
}
.blog-link {
font-weight: 600;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
}
/* ==========================================================================
10. FAQ ACCORDION
========================================================================== */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
margin-bottom: 1rem;
overflow: hidden;
}
.faq-question {
padding: 1.25rem 1.5rem;
font-weight: 700;
font-size: 1.05rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.faq-question i {
color: var(--primary);
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background-color: rgba(0,0,0,0.01);
}
.faq-item.active .faq-answer {
max-height: 250px;
padding: 0 1.5rem 1.25rem 1.5rem;
color: var(--text-muted);
font-size: 0.95rem;
}
/* ==========================================================================
11. CONTACT SECTION & MAP
========================================================================== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 2.5rem;
}
.contact-info-box {
background-color: var(--bg-card);
padding: 2rem;
border-radius: var(--radius);
border: 1px solid var(--border-color);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.contact-icon {
width: 45px;
height: 45px;
background-color: var(--primary-light);
color: var(--primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.contact-details p {
color: var(--text-muted);
font-size: 0.92rem;
}
.contact-form {
background-color: var(--bg-card);
padding: 2.25rem;
border-radius: var(--radius);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
}
.form-group {
margin-bottom: 1.25rem;
}
.form-label {
display: block;
font-size: 0.88rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.form-control {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--bg-body);
color: var(--text-main);
outline: none;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.form-status {
margin-top: 1rem;
font-size: 0.9rem;
padding: 0.75rem;
border-radius: 8px;
display: none;
}
.form-status.success {
display: block;
background-color: #DEF7EC;
color: #03543F;
}
.map-container {
margin-top: 2.5rem;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
height: 300px;
border: 1px solid var(--border-color);
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ==========================================================================
12. NEWSLETTER & SOCIAL
========================================================================== */
.newsletter-box {
background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%);
color: white;
border-radius: var(--radius);
padding: 3rem 2rem;
text-align: center;
margin-bottom: 3rem;
}
.newsletter-box h3 {
font-family: var(--font-heading);
font-size: 2rem;
margin-bottom: 0.5rem;
}
.newsletter-box p {
color: #E0E7FF;
margin-bottom: 1.5rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.newsletter-form {
display: flex;
max-width: 500px;
margin: 0 auto;
gap: 0.5rem;
}
.newsletter-form input {
flex-grow: 1;
padding: 0.8rem 1.25rem;
border-radius: 50px;
border: none;
outline: none;
}
.newsletter-form button {
background-color: var(--secondary);
color: white;
border-radius: 50px;
padding: 0.8rem 1.75rem;
border: none;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.newsletter-form button:hover {
background-color: #000;
}
/* ==========================================================================
13. FOOTER & BACK TO TOP
========================================================================== */
.footer {
background-color: var(--secondary);
color: #94A3B8;
padding: 1.75rem 0;
font-size: 0.9rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
font-size: 0.9rem;
}
.social-link:hover {
background-color: var(--primary);
transform: translateY(-2px);
}
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
width: 45px;
height: 45px;
background-color: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 900;
border: none;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 992px) {
.about-grid, .contact-grid {
grid-template-columns: 1fr;
}
.hero-title {
font-size: 2.4rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: fixed;
top: 75px;
left: 0;
width: 100%;
background-color: var(--bg-card);
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
transform: translateY(-150%);
transition: transform 0.4s ease;
}
.nav-links.active {
transform: translateY(0);
}
.hero-title {
font-size: 2rem;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-form input, .newsletter-form button {
width: 100%;
border-radius: 8px;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.custom-cursor, .custom-cursor-follower {
display: none; /* Hide on touch devices */
}
}
</style>
</head>
<body>
<!-- Custom Cursor Elements -->
<div class="custom-cursor" id="cursor"></div>
<div class="custom-cursor-follower" id="cursor-follower"></div>
<!-- Preloader -->
<div class="preloader" id="preloader">
<div class="spinner"></div>
<p style="font-weight: 600; font-size: 0.95rem; color: var(--text-muted);">Loading Sir Khacha Digital Academy...</p>
</div>
<!-- ==========================================================================
1. FIXED TOP NAVIGATION
========================================================================== -->
<nav class="navbar">
<div class="container navbar-container">
<a href="#home" class="logo">
<div class="logo-icon"><i class="fa-solid fa-graduation-cap"></i></div>
<span>Sir Khacha <span class="text-primary">Academy</span></span>
</a>
<ul class="nav-links" id="nav-links">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#services" class="nav-link">Curriculum</a></li>
<li><a href="#packages" class="nav-link">Packages</a></li>
<li><a href="#gallery" class="nav-link">Whiteboard</a></li>
<li><a href="#testimonials" class="nav-link">Reviews</a></li>
<li><a href="#team" class="nav-link">Tutors</a></li>
<li><a href="#blog" class="nav-link">Blog</a></li>
<li><a href="#faq" class="nav-link">FAQ</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle Dark/Light Mode">
<i class="fa-solid fa-moon"></i>
</button>
<a href="#packages" class="btn btn-primary" style="padding: 0.5rem 1.25rem; font-size: 0.85rem;">Enroll Now</a>
<button class="hamburger" id="hamburger" aria-label="Toggle Navigation Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<!-- ==========================================================================
2. HERO ROTATING SLIDER
========================================================================== -->
<section id="home" class="hero">
<div class="hero-slider">
<!-- Slide 1 -->
<div class="slide active" style="background-image: url('https://picsum.photos/id/180/1920/1080');">
<div class="slide-overlay"></div>
<div class="container">
<div class="hero-content fade-in-up appear">
<span class="badge"><i class="fa-solid fa-star"></i> #1 Online Math & Science Academy SA</span>
<h1 class="hero-title">Mathematics & Science Made Easier.</h1>
<p class="hero-subtitle">100% Online Tutoring tailored for Grade 8 - 12 South African learners using Google Meet & Interactive Whiteboards.</p>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#packages" class="btn btn-primary">View Pricing Packages <i class="fa-solid fa-arrow-right"></i></a>
<a href="#contact" class="btn btn-outline" style="color: white; border-color: white;">Book Free Consultation</a>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide" style="background-image: url('https://picsum.photos/id/20/1920/1080');">
<div class="slide-overlay"></div>
<div class="container">
<div class="hero-content">
<span class="badge"><i class="fa-solid fa-award"></i> CAPS, IEB & Cambridge Aligned</span>
<h1 class="hero-title">Master Concepts, Boost Mathematics Marks.</h1>
<p class="hero-subtitle">Comprehensive past paper practice, step-by-step problem solving, and individualized learner focus.</p>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#services" class="btn btn-primary">Explore Subjects</a>
<a href="#testimonials" class="btn btn-outline" style="color: white; border-color: white;">Learner Success Stories</a>
</div>
</div>
</div>
</div>
</div>
<!-- Slider Navigation Arrows -->
<div class="slider-nav">
<button class="slider-btn" id="prev-slide" aria-label="Previous Slide"><i class="fa-solid fa-chevron-left"></i></button>
<button class="slider-btn" id="next-slide" aria-label="Next Slide"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</section>
<!-- ==========================================================================
3. ABOUT SECTION
========================================================================== -->
<section id="about" class="section">
<div class="container">
<div class="about-grid">
<div class="about-image-wrap fade-in-up">
<img src="https://picsum.photos/id/370/800/600" alt="Sir Khacha Digital Academy Online Tutoring Class">
<div class="experience-badge">
<div class="exp-number">10+</div>
<div class="exp-text">Years Teaching & Tutoring<br>Excellence</div>
</div>
</div>
<div class="fade-in-up">
<span class="section-subtitle">About Sir Khacha Digital Academy</span>
<h2 class="section-title">Empowering SA High Schoolers To Achieve Academic Greatness</h2>
<p style="color: var(--text-muted); margin-bottom: 1.25rem;">
Sir Khacha Digital Academy was established with a singular mission: to eliminate the fear of Pure Mathematics and Physical Sciences for South African learners in Grades 8 to 12.
</p>
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
We operate 100% online, delivering HD video sessions via Google Meet paired with ultra-responsive digital whiteboards. Whether you are prepping for NSC CAPS exams, IEB finals, or Cambridge Checkpoints, our tailored methodology guarantees conceptual clarity.
</p>
<div class="about-features">
<div class="about-feature-item"><i class="fa-solid fa-check"></i> 100% Interactive Live Whiteboard</div>
<div class="about-feature-item"><i class="fa-solid fa-check"></i> Recorded Session Replays</div>
<div class="about-feature-item"><i class="fa-solid fa-check"></i> Weekly Past Paper Drills</div>
<div class="about-feature-item"><i class="fa-solid fa-check"></i> Instant WhatsApp Homework Help</div>
</div>
</div>
</div>
</div>
</section>
<!-- Animated Counter Stats Section -->
<section class="stats-section">
<div class="container">
<div class="stats-grid">
<div>
<div class="stat-number" data-target="1500">0</div>
<div class="stat-label">Students Tutored</div>
</div>
<div>
<div class="stat-number" data-target="98">0</div>
<div class="stat-label">Matric Pass Rate (%)</div>
</div>
<div>
<div class="stat-number" data-target="350">0</div>
<div class="stat-label">Distinctions Achieved</div>
</div>
<div>
<div class="stat-number" data-target="100">0</div>
<div class="stat-label">Online Accessibility (%)</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
4. CURRICULUM & SERVICES
========================================================================== -->
<section id="services" class="section section-bg-alt">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Our Specializations</span>
<h2 class="section-title">Curriculum & Subject Coverage</h2>
<p class="section-desc">Designed strictly around Grade 8 - 12 South African educational standards for peak exam results.</p>
</div>
<div class="services-grid">
<div class="service-card fade-in-up">
<div class="service-icon"><i class="fa-solid fa-square-root-variable"></i></div>
<h3 class="service-title">Pure Mathematics (Grades 8–12)</h3>
<p class="service-desc">Algebra, Trigonometry, Analytical Geometry, Calculus, and Euclidean Geometry taught with intuitive, step-by-step logic.</p>
</div>
<div class="service-card fade-in-up">
<div class="service-icon"><i class="fa-solid fa-flask"></i></div>
<h3 class="service-title">Physical Sciences (Grades 10–12)</h3>
<p class="service-desc">Physics (Mechanics, Electricity, Momentum) and Chemistry (Organic, Reaction Rates, Stoichiometry) simplified visually.</p>
</div>
<div class="service-card fade-in-up">
<div class="service-icon"><i class="fa-solid fa-calculator"></i></div>
<h3 class="service-title">Mathematical Literacy</h3>
<p class="service-desc">Finances, Measurement, Maps, Plans, and Data Handling mastery aimed at maximum marks for Grades 10–12.</p>
</div>
<div class="service-card fade-in-up">
<div class="service-icon"><i class="fa-solid fa-laptop-code"></i></div>
<h3 class="service-title">CAPS, IEB & Cambridge Support</h3>
<p class="service-desc">Full alignment with National Senior Certificate (NSC), Independent Examinations Board (IEB), and Cambridge IGCSE syllabi.</p>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
5. PRICE PACKAGES
========================================================================== -->
<section id="packages" class="section">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Flexible Investment</span>
<h2 class="section-title">Tutoring Price Packages</h2>
<p class="section-desc">Choose a monthly package that fits your learning needs. No hidden registration fees.</p>
</div>
<div class="packages-grid">
<!-- Package 1 -->
<div class="package-card fade-in-up">
<h3 class="package-name">Starter Group</h3>
<div class="package-price">R650 <span>/ month</span></div>
<p class="package-desc">Ideal for learners needing supplementary weekly group reinforcement.</p>
<ul class="package-features">
<li><i class="fa-solid fa-check"></i> 4x 1.5hr Group Sessions / month</li>
<li><i class="fa-solid fa-check"></i> Live Google Meet + Whiteboard</li>
<li><i class="fa-solid fa-check"></i> Access to Lesson PDF Notes</li>
<li><i class="fa-solid fa-check"></i> Group Q&A Forum</li>
</ul>
<a href="#contact" class="btn btn-outline" style="width: 100%;">Select Plan</a>
</div>
<!-- Package 2 (Popular) -->
<div class="package-card popular fade-in-up">
<div class="popular-tag">Most Popular</div>
<h3 class="package-name">Standard Individual</h3>
<div class="package-price">R1,200 <span>/ month</span></div>
<p class="package-desc">1-on-1 personalized tutoring for focused grade improvement.</p>
<ul class="package-features">
<li><i class="fa-solid fa-check"></i> 4x 1-Hour 1-on-1 Live Sessions</li>
<li><i class="fa-solid fa-check"></i> Custom Pace & Syllabus Focus</li>
<li><i class="fa-solid fa-check"></i> Session HD Video Recordings</li>
<li><i class="fa-solid fa-check"></i> WhatsApp Homework Support</li>
</ul>
<a href="#contact" class="btn btn-primary" style="width: 100%;">Select Plan</a>
</div>
<!-- Package 3 -->
<div class="package-card fade-in-up">
<h3 class="package-name">Intensive Dual</h3>
<div class="package-price">R1,950 <span>/ month</span></div>
<p class="package-desc">Covers BOTH Pure Maths & Physical Sciences for maximum results.</p>
<ul class="package-features">
<li><i class="fa-solid fa-check"></i> 8x 1-Hour 1-on-1 Live Sessions</li>
<li><i class="fa-solid fa-check"></i> 4 Maths + 4 Science Sessions</li>
<li><i class="fa-solid fa-check"></i> Past Paper Exam Drill Kits</li>
<li><i class="fa-solid fa-check"></i> Priority WhatsApp Q&A</li>
</ul>
<a href="#contact" class="btn btn-outline" style="width: 100%;">Select Plan</a>
</div>
<!-- Package 4 -->
<div class="package-card fade-in-up">
<h3 class="package-name">Matric Exam Prep</h3>
<div class="package-price">R2,800 <span>/ term</span></div>
<p class="package-desc">Comprehensive Bootcamp package prior to June/November Exams.</p>
<ul class="package-features">
<li><i class="fa-solid fa-check"></i> 12 Hours Intensive Revision</li>
<li><i class="fa-solid fa-check"></i> Full NSC/IEB Past Paper Mastery</li>
<li><i class="fa-solid fa-check"></i> Mock Exam Marking & Breakdown</li>
<li><i class="fa-solid fa-check"></i> 24/7 Tutor Direct Access</li>
</ul>
<a href="#contact" class="btn btn-outline" style="width: 100%;">Select Plan</a>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
6. WHITEBOARD LIGHTBOX GALLERY
========================================================================== -->
<section id="gallery" class="section section-bg-alt">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Visual Learning</span>
<h2 class="section-title">Whiteboard & Class Highlights</h2>
<p class="section-desc">Click to inspect real digital whiteboard problem-solving snapshots from actual classes.</p>
</div>
<div class="gallery-grid">
<div class="gallery-item fade-in-up" data-src="https://picsum.photos/id/1/1000/700">
<img src="https://picsum.photos/id/1/400/300" alt="Calculus Derivations">
<div class="gallery-overlay"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
</div>
<div class="gallery-item fade-in-up" data-src="https://picsum.photos/id/160/1000/700">
<img src="https://picsum.photos/id/160/400/300" alt="Physics Mechanics Vector Diagrams">
<div class="gallery-overlay"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
</div>
<div class="gallery-item fade-in-up" data-src="https://picsum.photos/id/201/1000/700">
<img src="https://picsum.photos/id/201/400/300" alt="Trigonometric Functions Sketching">
<div class="gallery-overlay"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
</div>
<div class="gallery-item fade-in-up" data-src="https://picsum.photos/id/366/1000/700">
<img src="https://picsum.photos/id/366/400/300" alt="Organic Chemistry Reactions">
<div class="gallery-overlay"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
</div>
</div>
</div>
</section>
<!-- Lightbox Popup Modal -->
<div class="lightbox-modal" id="lightbox-modal">
<div class="lightbox-content">
<span class="lightbox-close" id="lightbox-close">×</span>
<img id="lightbox-img" src="" alt="Whiteboard Zoom">
</div>
</div>
<!-- ==========================================================================
7. TESTIMONIALS CAROUSEL
========================================================================== -->
<section id="testimonials" class="section">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Success Stories</span>
<h2 class="section-title">What Parents & Learners Say</h2>
<p class="section-desc">Real feedback from learners across Gauteng, KZN, Western Cape, and beyond.</p>
</div>
<div class="testimonials-slider-container fade-in-up">
<div class="testimonials-wrapper" id="testimonial-wrapper">
<!-- Slide 1 -->
<div class="testimonial-card">
<div class="stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="quote-text">"Sir Khacha turned my Physical Science mark from 48% to 79% in Grade 12! The Google Meet whiteboard notes saved my life before prelims."</p>
<div class="author-info">
<img src="https://picsum.photos/id/1005/100/100" alt="Thabo M.">
<div class="author-name">Thabo M.</div>
<div class="author-role">Grade 12 Learner (Johannesburg)</div>
</div>
</div>
<!-- Slide 2 -->
<div class="testimonial-card">
<div class="stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="quote-text">"As a parent, I was hesitant about online tutoring. But Sir Khacha is extremely punctual, patient, and sends recorded sessions. My daughter achieved a distinction in Maths!"</p>
<div class="author-info">
<img src="https://picsum.photos/id/1027/100/100" alt="Mrs. Sarah Jenkins">
<div class="author-name">Mrs. Sarah Jenkins</div>
<div class="author-role">Parent (Cape Town)</div>
</div>
</div>
<!-- Slide 3 -->
<div class="testimonial-card">
<div class="stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="quote-text">"Euclidean Geometry was a nightmare until Sir Khacha explained it visually step by step. The dual package is worth every cent."</p>
<div class="author-info">
<img src="https://picsum.photos/id/1012/100/100" alt="Ayrton Naidoo">
<div class="author-name">Ayrton Naidoo</div>
<div class="author-role">Grade 11 Learner (Durban)</div>
</div>
</div>
</div>
<div class="testi-controls" id="testi-controls">
<span class="testi-dot active" data-index="0"></span>
<span class="testi-dot" data-index="1"></span>
<span class="testi-dot" data-index="2"></span>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
8. TEAM SECTION
========================================================================== -->
<section id="team" class="section section-bg-alt">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Expert Educators</span>
<h2 class="section-title">Meet Our Academic Lead Tutors</h2>
<p class="section-desc">Qualified educators passionate about STEM excellence in South Africa.</p>
</div>
<div class="team-grid">
<div class="team-card fade-in-up">
<div class="team-img-box">
<img src="https://picsum.photos/id/1025/400/400" alt="Sir Khacha">
</div>
<div class="team-info">
<h3 class="team-name">Sir Khacha</h3>
<div class="team-role">Head Tutor & Founder</div>
<p class="team-bio">B.Sc. Mathematics & Applied Math. 8+ years specializing in NSC and IEB Grade 11-12 curriculum mastery.</p>
</div>
</div>
<div class="team-card fade-in-up">
<div class="team-img-box">
<img src="https://picsum.photos/id/1062/400/400" alt="Dr. N. Dlamini">
</div>
<div class="team-info">
<h3 class="team-name">Ms. N. Dlamini</h3>
<div class="team-role">Physical Science Lead</div>
<p class="team-bio">M.Sc. Chemistry. Passionate about bringing abstract chemical and physical principles to life through online simulations.</p>
</div>
</div>
<div class="team-card fade-in-up">
<div class="team-img-box">
<img src="https://picsum.photos/id/1074/400/400" alt="Mr. K. Botha">
</div>
<div class="team-info">
<h3 class="team-name">Mr. K. Botha</h3>
<div class="team-role">Junior High Specialist</div>
<p class="team-bio">B.Ed. Senior Phase. Dedicated to building strong foundational mathematical confidence for Grade 8 and 9 learners.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
9. BLOG SECTION
========================================================================== -->
<section id="blog" class="section">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Insights & Advice</span>
<h2 class="section-title">Latest Academic Articles</h2>
<p class="section-desc">Study guides, exam tips, and subject strategies for South African learners.</p>
</div>
<div class="blog-grid">
<article class="blog-card fade-in-up">
<div class="blog-img">
<img src="https://picsum.photos/id/367/500/300" alt="Math Exam Preparation Tips">
</div>
<div class="blog-content">
<div class="blog-meta"><span><i class="fa-regular fa-calendar"></i> May 12, 2026</span> <span><i class="fa-regular fa-folder"></i> Maths Strategy</span></div>
<h3 class="blog-title"><a href="#contact">How to Score 80%+ in Paper 1 Pure Mathematics</a></h3>
<p class="blog-excerpt">Mastering the quadratic formula, logs, calculus patterns, and functions through time-bound past paper execution.</p>
<a href="#contact" class="blog-link">Read Full Article <i class="fa-solid fa-arrow-right"></i></a>
</div>
</article>
<article class="blog-card fade-in-up">
<div class="blog-img">
<img src="https://picsum.photos/id/445/500/300" alt="Physical Science Laws">
</div>
<div class="blog-content">
<div class="blog-meta"><span><i class="fa-regular fa-calendar"></i> April 28, 2026</span> <span><i class="fa-regular fa-folder"></i> Physical Science</span></div>
<h3 class="blog-title"><a href="#contact">Demystifying Newton's Laws & Free-Body Diagrams</a></h3>
<p class="blog-excerpt">Step-by-step guide to resolving vectors on inclined planes without losing easy marks in exams.</p>
<a href="#contact" class="blog-link">Read Full Article <i class="fa-solid fa-arrow-right"></i></a>
</div>
</article>
<article class="blog-card fade-in-up">
<div class="blog-img">
<img src="https://picsum.photos/id/180/500/300" alt="Online Study Habits">
</div>
<div class="blog-content">
<div class="blog-meta"><span><i class="fa-regular fa-calendar"></i> April 10, 2026</span> <span><i class="fa-regular fa-folder"></i> Study Tips</span></div>
<h3 class="blog-title"><a href="#contact">5 Reasons Online Tutoring Outperforms Home Visits</a></h3>
<p class="blog-excerpt">Discover why instant digital notes, screen recording replays, and zero travel fatigue yield higher results.</p>
<a href="#contact" class="blog-link">Read Full Article <i class="fa-solid fa-arrow-right"></i></a>
</div>
</article>
</div>
</div>
</section>
<!-- ==========================================================================
10. FAQ ACCORDION SECTION
========================================================================== -->
<section id="faq" class="section section-bg-alt">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Got Questions?</span>
<h2 class="section-title">Frequently Asked Questions</h2>
<p class="section-desc">Everything you need to know about our online tutoring platform.</p>
</div>
<div class="faq-container fade-in-up">
<div class="faq-item">
<div class="faq-question">
<span>How do online sessions work via Google Meet & Whiteboard?</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="faq-answer">
Learners receive a secure Google Meet link before class. During the session, the tutor shares an interactive digital whiteboard where math equations and science diagrams are written in real-time. Learners can write on the board or ask questions verbally/via chat.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>What hardware or software does the learner need?</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="faq-answer">
All you need is a laptop, tablet, or desktop with a stable internet connection (Fibre or LTE recommended) and a web browser. A headset or earphones with a mic is recommended for clear audio.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>Which South African curricula do you cover?</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="faq-answer">
We cover CAPS (National Senior Certificate for public & private schools), IEB (Independent Examinations Board), and Cambridge (IGCSE/AS/A Level) frameworks for Grades 8 through 12.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>What happens if a learner misses a live session?</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="faq-answer">
All 1-on-1 sessions are recorded with the learner's consent and emailed alongside the PDF high-resolution whiteboard notes so they never fall behind.
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
11. CONTACT SECTION & MAP
========================================================================== -->
<section id="contact" class="section">
<div class="container">
<div class="section-header fade-in-up">
<span class="section-subtitle">Get In Touch</span>
<h2 class="section-title">Start Improving Your Grades Today</h2>
<p class="section-desc">Fill in the form below for a free consultation and personalized tutoring plan.</p>
</div>
<div class="contact-grid">
<div class="contact-info-box fade-in-up">
<h3 style="margin-bottom: 1.5rem; font-family: var(--font-heading);">Contact Information</h3>
<div class="contact-item">
<div class="contact-icon"><i class="fa-brands fa-whatsapp"></i></div>
<div class="contact-details">
<h4>WhatsApp / Direct Call</h4>
<p>+27 82 123 4567 / +27 71 987 6543</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fa-regular fa-envelope"></i></div>
<div class="contact-details">
<h4>Email Enquiries</h4>
<p>info@sirkhachaacademy.co.za</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fa-solid fa-laptop"></i></div>
<div class="contact-details">
<h4>Class Location</h4>
<p>100% Online (Google Meet & Whiteboard) - Serving all of South Africa.</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fa-regular fa-clock"></i></div>
<div class="contact-details">
<h4>Tutoring Hours</h4>
<p>Mon - Fri: 14:00 - 19:30 | Sat: 08:30 - 16:00</p>
</div>
</div>
</div>
<!-- Contact Form with Validation -->
<div class="contact-form fade-in-up">
<form id="enrollment-form">
<div class="form-group">
<label class="form-label" for="parent_name">Parent / Guardian Name *</label>
<input type="text" id="parent_name" class="form-control" placeholder="e.g. Mary Molefe" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Email Address *</label>
<input type="email" id="email" class="form-control" placeholder="e.g. mary@gmail.com" required>
</div>
<div class="form-group">
<label class="form-label" for="phone">Phone / WhatsApp Number *</label>
<input type="tel" id="phone" class="form-control" placeholder="e.g. 0821234567" required>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="form-label" for="grade">Learner Grade *</label>
<select id="grade" class="form-control" required>
<option value="">Select Grade</option>
<option value="8">Grade 8</option>
<option value="9">Grade 9</option>
<option value="10">Grade 10</option>
<option value="11">Grade 11</option>
<option value="12">Grade 12 (Matric)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="package">Preferred Package *</label>
<select id="package" class="form-control" required>
<option value="">Select Package</option>
<option value="Starter">Starter Group (R650/m)</option>
<option value="Standard">Standard 1-on-1 (R1,200/m)</option>
<option value="Dual">Intensive Dual (R1,950/m)</option>
<option value="Matric">Matric Bootcamp (R2,800/term)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="message">Specific Subjects or Topics Needed</label>
<textarea id="message" class="form-control" placeholder="Tell us which topics the learner struggles with..."></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Submit Consultation Request</button>
<div id="form-status" class="form-status"></div>
</form>
</div>
</div>
<!-- Google Maps Embed (HQ/Head Office) -->
<div class="map-container fade-in-up">
<iframe title="Sir Khacha Academy South Africa" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3580.359281781223!2d28.04730511502967!3d-26.20410278343949!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e950c18c02a7cb3%3A0xc087d156d9539366!2sJohannesburg%20CBD%2C%20Johannesburg%2C%202000!5e0!3m2!1sen!2sza!4v1680000000000!5m2!1sen!2sza" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</section>
<!-- ==========================================================================
12. NEWSLETTER SUBSCRIPTION & SOCIAL LINKS
========================================================================== -->
<section class="section section-bg-alt" style="padding-bottom: 2rem;">
<div class="container">
<div class="newsletter-box fade-in-up">
<h3>Free Monthly Grade 11 & 12 Study Guides</h3>
<p>Subscribe to receive past paper cheat sheets, formula summaries, and exam tips direct to your inbox.</p>
<form class="newsletter-form" id="newsletter-form">
<input type="email" placeholder="Enter your email address..." required>
<button type="submit">Subscribe Free</button>
</form>
</div>
</div>
</section>
<!-- ==========================================================================
13. MINIMAL ONE-LINE FOOTER
========================================================================== -->
<footer class="footer">
<div class="container footer-content">
<div>
© <span id="current-year"></span> <strong>Sir Khacha Digital Academy</strong>. Mathematics and Science made easier. All Rights Reserved.
</div>
<div class="social-links">
<a href="https://facebook.com" class="social-link" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://instagram.com" class="social-link" target="_blank" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="https://tiktok.com" class="social-link" target="_blank" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
<a href="https://youtube.com" class="social-link" target="_blank" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
<a href="https://whatsapp.com" class="social-link" target="_blank" aria-label="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
</div>
</div>
</footer>
<!-- Back to top button -->
<button class="back-to-top" id="back-to-top" aria-label="Back to Top"><i class="fa-solid fa-arrow-up"></i></button>
<!-- ==========================================================================
VANILLA JAVASCRIPT LOGIC
========================================================================== -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// 1. Hide Preloader when DOM loaded
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('fade-out');
}, 500);
// 2. Set Current Dynamic Year in Footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// 3. Custom Mouse Cursor Effect
const cursor = document.getElementById('cursor');
const follower = document.getElementById('cursor-follower');
if (window.innerWidth > 768) {
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
setTimeout(() => {
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
}, 50);
});
}
// 4. Dark / Light Theme Toggle Mode
const themeToggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
themeToggleBtn.addEventListener('click', () => {
const currentTheme = htmlElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
htmlElement.setAttribute('data-theme', newTheme);
themeToggleBtn.innerHTML = newTheme === 'dark'
? '<i class="fa-solid fa-sun"></i>'
: '<i class="fa-solid fa-moon"></i>';
});
// 5. Mobile Navigation Hamburger Menu
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close menu on clicking any link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
// 6. Smooth Scroll Navbar Active Highlight & Back To Top Button
const sections = document.querySelectorAll('section');
const navItems = document.querySelectorAll('.nav-link');
const backToTopBtn = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
let current = '';
const scrollY = window.pageYOffset;
sections.forEach(section => {
const sectionTop = section.offsetTop - 100;
const sectionHeight = section.offsetHeight;
if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
current = section.getAttribute('id');
}
});
navItems.forEach(item => {
item.classList.remove('active');
if (item.getAttribute('href') === `#${current}`) {
item.classList.add('active');
}
});
// Back to top visibility
if (scrollY > 400) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 7. Hero Image Slider Carousel
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prev-slide');
const nextBtn = document.getElementById('next-slide');
let currentSlide = 0;
let slideInterval;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i === index) slide.classList.add('active');
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
nextBtn.addEventListener('click', () => {
nextSlide();
resetSlideTimer();
});
prevBtn.addEventListener('click', () => {
prevSlide();
resetSlideTimer();
});
function startSlideTimer() {
slideInterval = setInterval(nextSlide, 5000);
}
function resetSlideTimer() {
clearInterval(slideInterval);
startSlideTimer();
}
startSlideTimer();
// 8. Testimonials Carousel Slider
const testWrapper = document.getElementById('testimonial-wrapper');
const testDots = document.querySelectorAll('.testi-dot');
let currentTesti = 0;
testDots.forEach(dot => {
dot.addEventListener('click', (e) => {
const index = parseInt(e.target.getAttribute('data-index'));
currentTesti = index;
updateTestimonials();
});
});
function updateTestimonials() {
testWrapper.style.transform = `translateX(-${currentTesti * 100}%)`;
testDots.forEach((dot, i) => {
dot.classList.toggle('active', i === currentTesti);
});
}
setInterval(() => {
currentTesti = (currentTesti + 1) % testDots.length;
updateTestimonials();
}, 6000);
// 9. FAQ Accordion Logic
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
const isActive = item.classList.contains('active');
faqItems.forEach(el => el.classList.remove('active'));
if (!isActive) {
item.classList.add('active');
}
});
});
// 10. Lightbox Image Gallery
const galleryItems = document.querySelectorAll('.gallery-item');
const lightboxModal = document.getElementById('lightbox-modal');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxClose = document.getElementById('lightbox-close');
galleryItems.forEach(item => {
item.addEventListener('click', () => {
const src = item.getAttribute('data-src');
lightboxImg.setAttribute('src', src);
lightboxModal.classList.add('active');
});
});
lightboxClose.addEventListener('click', () => {
lightboxModal.classList.remove('active');
});
lightboxModal.addEventListener('click', (e) => {
if (e.target === lightboxModal) {
lightboxModal.classList.remove('active');
}
});
// 11. Intersection Observer for Fade-In Animations & Stats Counter
const observerOptions = {
threshold: 0.15
};
const fadeObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('appear');
fadeObserver.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.fade-in-up').forEach(el => {
fadeObserver.observe(el);
});
// Counter animation
const statsNumbers = document.querySelectorAll('.stat-number');
let animatedStats = false;
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !animatedStats) {
statsNumbers.forEach(counter => {
const target = +counter.getAttribute('data-target');
let count = 0;
const speed = target / 50;
const updateCount = () => {
count += speed;
if (count < target) {
counter.innerText = Math.ceil(count);
setTimeout(updateCount, 30);
} else {
counter.innerText = target + (target === 98 || target === 100 ? '%' : '+');
}
};
updateCount();
});
animatedStats = true;
}
});
}, { threshold: 0.5 });
const statsSection = document.querySelector('.stats-section');
if (statsSection) statsObserver.observe(statsSection);
// 12. Contact Form Client-side Validation & Submission Feedback
const contactForm = document.getElementById('enrollment-form');
const formStatus = document.getElementById('form-status');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Basic Validation
const name = document.getElementById('parent_name').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
if (name && email && phone) {
formStatus.className = 'form-status success';
formStatus.innerHTML = '<i class="fa-solid fa-circle-check"></i> Thank you! Your application has been sent. Sir Khacha will contact you via WhatsApp shortly.';
contactForm.reset();
}
});
// Newsletter Form Simulation
const newsletterForm = document.getElementById('newsletter-form');
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for subscribing to Sir Khacha Digital Academy Study Notes!');
newsletterForm.reset();
});
});
</script>
</body>
</html>