Coaching Institute Page 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>ExcelEd Institute | Premier Exam Coaching</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <div class="logo-text">
                        <div class="main">ExcelEd</div>
                        <div class="tagline">PREMIER COACHING INSTITUTE</div>
                    </div>
                </a>
                
                <div class="nav-links">
                    <a href="#home" class="active">Home</a>
                    <a href="#results">Results</a>
                    <a href="#courses">Courses</a>
                    <a href="#faculty">Faculty</a>
                    <a href="#schedule">Schedule</a>
                </div>
                
                <div class="nav-cta">
                    <a href="tel:+919876543210" class="btn btn-secondary">
                        <i class="fas fa-phone"></i> Call Now
                    </a>
                    <a href="#enquiry" class="btn btn-primary">Apply Now</a>
                </div>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
            </nav>
        </div>
        
    
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content fade-in">
                <div class="hero-badge animate__animated animate__pulse animate__infinite">
                    <i class="fas fa-star"></i>
                    <span>Admissions Open for 2024-25 Batches</span>
                </div>
                <h1>Transform Your Dreams into Reality with India's Top Coaching Institute</h1>
                <p>ExcelEd provides comprehensive, exam-focused coaching for JEE, NEET, UPSC, CAT and other competitive exams with proven methodologies and personalized mentorship.</p>
                
                <div class="hero-cta">
                    <a href="#enquiry" class="btn btn-accent">
                        <i class="fas fa-user-graduate"></i> Enroll Now
                    </a>
                    <a href="#courses" class="btn btn-secondary">
                        <i class="fas fa-book-open"></i> Explore Courses
                    </a>
                </div>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="stat-number">98.2%</div>
                        <div class="stat-label">Success Rate</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">2,500+</div>
                        <div class="stat-label">Selections</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Expert Faculty</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">15+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="countdown-section">
        <div class="container">
            <div class="countdown-card slide-up">
                <h3 class="countdown-title">Early Bird Discount Ends In</h3>
                <p class="countdown-subtitle">Secure your seat with 20% discount before the timer runs out. Limited seats available.</p>
                
                <div class="countdown">
                    <div class="countdown-item">
                        <div class="countdown-number" id="days">00</div>
                        <div class="countdown-label">Days</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-number" id="hours">00</div>
                        <div class="countdown-label">Hours</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-number" id="minutes">00</div>
                        <div class="countdown-label">Minutes</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-number" id="seconds">00</div>
                        <div class="countdown-label">Seconds</div>
                    </div>
                </div>
                
                <a href="#enquiry" class="btn btn-accent">
                    <i class="fas fa-bolt"></i> Avail Discount Now
                </a>
            </div>
        </div>
    </section>

<section class="results-showcase" id="results">
        <div class="container">
            <div class="section-header">
                <div class="section-subtitle">Proven Excellence</div>
                <h2>Consistent Outstanding Results</h2>
                <p class="section-description">Our students' achievements speak volumes about our teaching methodology and commitment to excellence.</p>
            </div>
            
            <div class="results-grid">
                <div class="result-card slide-up">
                    <div class="result-icon">
                        <i class="fas fa-medal"></i>
                    </div>
                    <div class="result-number">2,350<span class="plus">+</span></div>
                    <div class="result-text">Selections in IITs/NITs</div>
                </div>
                <div class="result-card slide-up" style="animation-delay: 0.1s;">
                    <div class="result-icon">
                        <i class="fas fa-stethoscope"></i>
                    </div>
                    <div class="result-number">1,850<span class="plus">+</span></div>
                    <div class="result-text">NEET Qualified Students</div>
                </div>
                <div class="result-card slide-up" style="animation-delay: 0.2s;">
                    <div class="result-icon">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <div class="result-number">98<span class="plus">+</span></div>
                    <div class="result-text">UPSC Selections (Last 5 Years)</div>
                </div>
                <div class="result-card slide-up" style="animation-delay: 0.3s;">
                    <div class="result-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="result-number">99.2<span class="plus">%</span></div>
                    <div class="result-text">Board Exam Success Rate</div>
                </div>
            </div>
        </div>
    </section>

<section class="courses" id="courses">
        <div class="container">
            <div class="section-header">
                <div class="section-subtitle">Our Programs</div>
                <h2>Comprehensive Course Structure</h2>
                <p class="section-description">Designed by experts to provide focused preparation with regular assessments and personalized feedback.</p>
            </div>
            
            <div class="course-tabs">
                <button class="course-tab active" data-filter="all">All Courses</button>
                <button class="course-tab" data-filter="engineering">Engineering</button>
                <button class="course-tab" data-filter="medical">Medical</button>
                <button class="course-tab" data-filter="upsc">UPSC</button>
                <button class="course-tab" data-filter="management">Management</button>
            </div>
            
            <div class="course-grid">
                <div class="course-card featured slide-up" data-category="engineering">
                    <div class="course-badge">Most Popular</div>
                    <div class="course-header">
                        <div class="course-icon">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <h3>JEE (Main + Advanced)</h3>
                        <div class="course-category">Engineering Entrance</div>
                    </div>
                    <div class="course-body">
                        <ul class="course-features">
                            <li><i class="fas fa-check"></i> 2 Year Integrated Program</li>
                            <li><i class="fas fa-check"></i> 300+ Hours of Live Classes</li>
                            <li><i class="fas fa-check"></i> 20+ Mock Test Series</li>
                            <li><i class="fas fa-check"></i> Personalized Doubt Solving</li>
                            <li><i class="fas fa-check"></i> Study Material & DPPs</li>
                        </ul>
                        <div class="course-price">
                            <span class="amount">₹45,000</span>
                            <span class="period">/year</span>
                            <span class="original">₹56,250</span>
                        </div>
                        <a href="#enquiry" class="btn btn-primary" style="width: 100%;">
                            <i class="fas fa-arrow-right"></i> Enroll Now
                        </a>
                    </div>
                </div>
                
                <div class="course-card slide-up" style="animation-delay: 0.1s;" data-category="medical">
                    <div class="course-header">
                        <div class="course-icon">
                            <i class="fas fa-dna"></i>
                        </div>
                        <h3>NEET UG</h3>
                        <div class="course-category">Medical Entrance</div>
                    </div>
                    <div class="course-body">
                        <ul class="course-features">
                            <li><i class="fas fa-check"></i> Comprehensive Biology Focus</li>
                            <li><i class="fas fa-check"></i> 250+ Hours of Live Classes</li>
                            <li><i class="fas fa-check"></i> 15+ Full-length Mock Tests</li>
                            <li><i class="fas fa-check"></i> Previous Year Paper Analysis</li>
                            <li><i class="fas fa-check"></i> NCERT Based Study Material</li>
                        </ul>
                        <div class="course-price">
                            <span class="amount">₹38,000</span>
                            <span class="period">/year</span>
                            <span class="original">₹47,500</span>
                        </div>
                        <a href="#enquiry" class="btn btn-primary" style="width: 100%;">
                            <i class="fas fa-arrow-right"></i> Enroll Now
                        </a>
                    </div>
                </div>
                
                <div class="course-card slide-up" style="animation-delay: 0.2s;" data-category="upsc">
                    <div class="course-header">
                        <div class="course-icon">
                            <i class="fas fa-landmark"></i>
                        </div>
                        <h3>UPSC Civil Services</h3>
                        <div class="course-category">Civil Services Exam</div>
                    </div>
                    <div class="course-body">
                        <ul class="course-features">
                            <li><i class="fas fa-check"></i> GS + Optional Subject</li>
                            <li><i class="fas fa-check"></i> Current Affairs Updates</li>
                            <li><i class="fas fa-check"></i> Answer Writing Practice</li>
                            <li><i class="fas fa-check"></i> Interview Guidance</li>
                            <li><i class="fas fa-check"></i> Monthly Magazine</li>
                        </ul>
                        <div class="course-price">
                            <span class="amount">₹55,000</span>
                            <span class="period">/year</span>
                            <span class="original">₹68,750</span>
                        </div>
                        <a href="#enquiry" class="btn btn-primary" style="width: 100%;">
                            <i class="fas fa-arrow-right"></i> Enroll Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="faculty" id="faculty">
        <div class="container">
            <div class="section-header">
                <div class="section-subtitle">Meet Our Mentors</div>
                <h2>Learn from Industry Experts</h2>
                <p class="section-description">Our faculty comprises of experienced educators with proven track records of guiding students to success.</p>
            </div>
            
            <div class="faculty-grid">
                <div class="faculty-card slide-up">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Ramesh Kumar">
                        <div class="faculty-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                    <div class="faculty-info">
                        <h4>Dr. Ramesh Kumar</h4>
                        <div class="faculty-subject">Physics (JEE/NEET)</div>
                        <div class="faculty-exp">15+ years of experience | Ex-IIT Delhi</div>
                        <p class="faculty-bio">Specialized in Mechanics and Modern Physics. Guided 500+ students to IITs with his unique problem-solving techniques.</p>
                    </div>
                </div>
                
                <div class="faculty-card slide-up" style="animation-delay: 0.1s;">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Prof. Anjali Sharma">
                        <div class="faculty-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                    <div class="faculty-info">
                        <h4>Prof. Anjali Sharma</h4>
                        <div class="faculty-subject">Organic Chemistry</div>
                        <div class="faculty-exp">12+ years of experience | PhD Chemistry</div>
                        <p class="faculty-bio">Author of 3 books on Organic Chemistry. Known for simplifying complex reactions with memory techniques.</p>
                    </div>
                </div>
                
                <div class="faculty-card slide-up" style="animation-delay: 0.2s;">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Sameer Joshi">
                        <div class="faculty-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                    <div class="faculty-info">
                        <h4>Dr. Sameer Joshi</h4>
                        <div class="faculty-subject">Mathematics</div>
                        <div class="faculty-exp">18+ years of experience | Ex-NIT Professor</div>
                        <p class="faculty-bio">CAT 100%iler. Expert in Calculus and Algebra. Developed unique shortcut methods for competitive exams.</p>
                    </div>
                </div>
                
                <div class="faculty-card slide-up" style="animation-delay: 0.3s;">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fHdvbWVufGVufDB8fDB8fHww" alt="Ms. Priya Mehta">
                        <div class="faculty-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                    <div class="faculty-info">
                        <h4>Ms. Priya Mehta</h4>
                        <div class="faculty-subject">UPSC Mentor</div>
                        <div class="faculty-exp">10+ years of experience | Former IRS Officer</div>
                        <p class="faculty-bio">Specialized in GS Paper and Essay Writing. Mentored 50+ successful candidates in UPSC examinations.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="batch-schedule" id="schedule">
        <div class="container">
            <div class="section-header">
                <div class="section-subtitle">Plan Your Preparation</div>
                <h2>Batch Schedule 2024-25</h2>
                <p class="section-description">Choose from our flexible batch timings designed to suit different schedules and learning preferences.</p>
            </div>
            
            <div class="schedule-container slide-up">
                <table class="schedule-table">
                    <thead>
                        <tr>
                            <th>Course</th>
                            <th>Batch Timing</th>
                            <th>Start Date</th>
                            <th>Duration</th>
                            <th>Seats</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>JEE Main + Advanced</strong></td>
                            <td>Mon-Fri, 4 PM - 7 PM</td>
                            <td>April 15, 2024</td>
                            <td>24 Months</td>
                            <td><span class="batch-status status-limited"><i class="fas fa-exclamation-circle"></i> 12 Left</span></td>
                            <td><a href="#enquiry" class="btn btn-primary">Apply Now</a></td>
                        </tr>
                        <tr>
                            <td><strong>NEET UG</strong></td>
                            <td>Mon-Sat, 9 AM - 12 PM</td>
                            <td>May 1, 2024</td>
                            <td>18 Months</td>
                            <td><span class="batch-status status-open"><i class="fas fa-check-circle"></i> 8 Left</span></td>
                            <td><a href="#enquiry" class="btn btn-primary">Apply Now</a></td>
                        </tr>
                        <tr>
                            <td><strong>UPSC Foundation</strong></td>
                            <td>Weekends, 10 AM - 4 PM</td>
                            <td>June 5, 2024</td>
                            <td>36 Months</td>
                            <td><span class="batch-status status-open"><i class="fas fa-check-circle"></i> 15 Left</span></td>
                            <td><a href="#enquiry" class="btn btn-primary">Apply Now</a></td>
                        </tr>
                        <tr>
                            <td><strong>CAT/MBA Crash Course</strong></td>
                            <td>Mon-Fri, 6 PM - 9 PM</td>
                            <td>July 10, 2024</td>
                            <td>6 Months</td>
                            <td><span class="batch-status status-full"><i class="fas fa-times-circle"></i> Batch Full</span></td>
                            <td><a href="#enquiry" class="btn btn-secondary">Join Waitlist</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-header">
                <div class="section-subtitle">Success Stories</div>
                <h2>What Our Students Say</h2>
                <p class="section-description">Hear from our successful alumni who have achieved their dreams with ExcelEd's guidance.</p>
            </div>
            
            <div class="testimonials-slider">
                <div class="testimonial-card slide-up">
                    <div class="testimonial-content">
                        <p class="testimonial-text">"ExcelEd's JEE program was a game-changer for me. The faculty's teaching methodology and regular test series helped me secure AIR 187 in JEE Advanced. I'm now studying Computer Science at IIT Bombay."</p>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Rahul Verma">
                            </div>
                            <div class="author-info">
                                <h4>Rahul Verma</h4>
                                <div class="author-rank">AIR 187, JEE Advanced 2023 | IIT Bombay</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="slider-controls">
                    <button class="slider-btn" id="prevTestimonial">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="slider-btn" id="nextTestimonial">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry-section" id="enquiry">
        <div class="container">
            <div class="enquiry-container">
                <div class="enquiry-content slide-up">
                    <div class="section-subtitle" style="background-color: rgba(245, 158, 11, 0.2); color: var(--secondary);">Get Started</div>
                    <h2>Begin Your Success Journey Today</h2>
                    <p>Fill out the form to get detailed course information, fee structure, and a free counseling session with our experts.</p>
                    
                    <ul class="enquiry-features">
                        <li><i class="fas fa-check-circle"></i> Free Demo Classes Available</li>
                        <li><i class="fas fa-check-circle"></i> Scholarship for Meritorious Students</li>
                        <li><i class="fas fa-check-circle"></i> Flexible Payment Options</li>
                        <li><i class="fas fa-check-circle"></i> Personalized Study Plan</li>
                    </ul>
                    
                    <div class="contact-info">
                        <p><i class="fas fa-phone"></i> Call us: +91 9876543210</p>
                        <p><i class="fas fa-envelope"></i> Email: admissions@exceled.com</p>
                        <p><i class="fas fa-map-marker-alt"></i> Visit: 123 Education Street, Knowledge City, Delhi</p>
                    </div>
                </div>
                
                <div class="enquiry-form slide-up" style="animation-delay: 0.2s;">
                    <div class="form-header">
                        <h3>Admission Enquiry Form</h3>
                        <p>Get a callback within 24 hours</p>
                    </div>
                    
                    <form id="admissionForm">
                        <div class="form-group">
                            <label for="name" class="form-label">Full Name *</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your full name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email" class="form-label">Email Address *</label>
                            <input type="email" id="email" class="form-control" placeholder="Enter your email address" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone" class="form-label">Phone Number *</label>
                            <input type="tel" id="phone" class="form-control" placeholder="Enter your 10-digit mobile number" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="course" class="form-label">Course Interested In *</label>
                            <select id="course" class="form-control" required>
                                <option value="">Select a course</option>
                                <option value="jee">JEE (Main + Advanced)</option>
                                <option value="neet">NEET UG</option>
                                <option value="upsc">UPSC Civil Services</option>
                                <option value="cat">CAT/MBA</option>
                                <option value="ssc">SSC CGL</option>
                                <option value="board">Board Exams (9-12)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="message" class="form-label">Additional Message</label>
                            <textarea id="message" class="form-control" rows="4" placeholder="Any specific queries or requirements..."></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-accent" style="width: 100%;">
                            <i class="fas fa-paper-plane"></i> Submit Enquiry
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <div class="footer-logo">Excel<span>Ed</span></div>
                    <p>ExcelEd Coaching Institute is a premier educational institution with over 15 years of experience in training students for competitive exams. Our proven methodology and dedicated faculty have helped thousands achieve their dreams.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
                <div class="footer-links">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#courses">Courses</a></li>
                        <li><a href="#results">Results</a></li>
                        <li><a href="#faculty">Faculty</a></li>
                        <li><a href="#schedule">Batch Schedule</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                    </ul>
                </div>
                
                <div class="footer-contact">
                    <h4>Contact Us</h4>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Education Street, Knowledge City, Delhi - 110001</p>
                    <p><i class="fas fa-phone"></i> +91 9876543210, +91 9876543211</p>
                    <p><i class="fas fa-envelope"></i> admissions@exceled.com</p>
                    <p><i class="fas fa-clock"></i> Mon-Sat: 9 AM - 7 PM, Sun: 10 AM - 2 PM</p>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 ExcelEd Coaching Institute. All Rights Reserved. | <a href="#" style="color: var(--gray-300);">Privacy Policy</a> | <a href="#" style="color: var(--gray-300);">Terms & Conditions</a></p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #dbeafe;
            --secondary: #f59e0b;
            --secondary-dark: #d97706;
            --accent: #8b5cf6;
            --light: #f8fafc;
            --dark: #0f172a;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-600: #475569;
            --gray-700: #334155;
            --success: #10b981;
            --error: #ef4444;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
        }

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

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

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background-color: var(--light);
            overflow-x: hidden;
        }

h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            line-height: 1.2;
        }

.container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

section {
            padding: 100px 0;
            position: relative;
        }

.section-header {
            text-align: center;
            margin-bottom: 64px;
            position: relative;
        }

.section-header .section-subtitle {
            display: inline-block;
            color: var(--primary);
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 12px;
            padding: 6px 16px;
            background-color: var(--primary-light);
            border-radius: 20px;
        }

.section-header h2 {
            font-size: 2.75rem;
            color: var(--dark);
            margin-bottom: 16px;
        }

.section-header .section-description {
            font-size: 1.125rem;
            color: var(--gray-600);
            max-width: 700px;
            margin: 0 auto;
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 32px;
            font-weight: 600;
            font-size: 1rem;
            border-radius: var(--radius-md);
            border: none;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            gap: 8px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.7s;
            z-index: -1;
        }

.btn:hover::before {
            left: 100%;
        }

.btn-primary {
            background-color: var(--primary);
            color: white;
            box-shadow: var(--shadow-md);
        }

.btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

.btn-secondary {
            background-color: white;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

.btn-secondary:hover {
            background-color: var(--primary-light);
            transform: translateY(-3px);
        }

.btn-accent {
            background-color: var(--secondary);
            color: var(--dark);
            font-weight: 700;
        }

.btn-accent:hover {
            background-color: var(--secondary-dark);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

/* Enhanced Header */
        header {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-sm);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: var(--transition);
        }

header.scrolled {
            box-shadow: var(--shadow-lg);
            padding: 8px 0;
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            transition: var(--transition);
        }

header.scrolled .navbar {
            padding: 12px 0;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

.logo-icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

.logo-text {
            display: flex;
            flex-direction: column;
        }

.logo-text .main {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            line-height: 1;
        }

.logo-text .tagline {
            font-size: 0.7rem;
            color: var(--gray-600);
            letter-spacing: 1px;
            margin-top: 2px;
        }

.nav-links {
            display: flex;
            gap: 32px;
        }

.nav-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 8px 0;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: var(--transition);
        }

.nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }

.nav-cta {
            display: flex;
            gap: 16px;
            align-items: center;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark);
            cursor: pointer;
            z-index: 1001;
        }

/* Enhanced Hero Section */
        .hero {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(139, 92, 246, 0.85) 100%), url('https://plus.unsplash.com/premium_photo-1661767467261-4a4bed92a507?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fGNvYWNoaW5nfGVufDB8fDB8fHww');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            padding: 180px 0 120px;
            position: relative;
            overflow: hidden;
        }

.hero .container {
            position: relative;
            z-index: 2;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

.hero-badge {
            display: inline-flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.875rem;
            margin-bottom: 24px;
            gap: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.hero-badge i {
            color: var(--secondary);
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 24px;
            line-height: 1.1;
        }

.hero p {
            font-size: 1.25rem;
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-cta {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-bottom: 60px;
        }

.hero-stats {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-top: 40px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 4px;
            color: white;
        }

.stat-label {
            font-size: 0.875rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Enhanced Countdown */
        .countdown-section {
            background-color: white;
            padding: 60px 0;
            box-shadow: var(--shadow-md);
        }

.countdown-card {
            background: linear-gradient(135deg, var(--dark), #1e293b);
            color: white;
            border-radius: var(--radius-lg);
            padding: 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
        }

.countdown-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            z-index: 0;
        }

.countdown-card > * {
            position: relative;
            z-index: 1;
        }

.countdown-title {
            font-size: 1.75rem;
            margin-bottom: 16px;
        }

.countdown-subtitle {
            color: var(--gray-300);
            margin-bottom: 32px;
            max-width: 600px;
        }

.countdown {
            display: flex;
            gap: 20px;
            margin: 32px 0;
        }

.countdown-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-md);
            padding: 20px 16px;
            min-width: 100px;
        }

.countdown-number {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 4px;
            color: white;
        }

.countdown-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.7;
        }

/* Enhanced Results */
        .results-showcase {
            background-color: var(--light);
        }

.results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.result-card {
            background-color: white;
            border-radius: var(--radius-lg);
            padding: 40px 30px;
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
        }

.result-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-light);
        }

.result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }

.result-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary-light), white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            color: var(--primary);
            font-size: 1.75rem;
        }

.result-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 8px;
            line-height: 1;
        }

.result-number .plus {
            color: var(--primary);
        }

.result-text {
            font-weight: 600;
            color: var(--gray-600);
        }

/* Enhanced Courses */
        .courses {
            background-color: white;
        }

.course-tabs {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 48px;
            flex-wrap: wrap;
        }

.course-tab {
            padding: 12px 24px;
            background-color: var(--gray-100);
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            color: var(--gray-600);
            cursor: pointer;
            transition: var(--transition);
        }

.course-tab:hover {
            background-color: var(--gray-200);
        }

.course-tab.active {
            background-color: var(--primary);
            color: white;
        }

.course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.course-card {
            background-color: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            border: 1px solid var(--gray-200);
            position: relative;
        }

.course-card.featured {
            border: 2px solid var(--secondary);
            transform: scale(1.02);
        }

.course-card.featured .course-badge {
            display: block;
        }

.course-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }

.course-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: var(--secondary);
            color: var(--dark);
            font-weight: 700;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.75rem;
            display: none;
        }

.course-header {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            padding: 32px;
            text-align: center;
            position: relative;
        }

.course-icon {
            font-size: 2.5rem;
            margin-bottom: 16px;
            opacity: 0.9;
        }

.course-header h3 {
            margin-bottom: 8px;
            font-size: 1.5rem;
        }

.course-category {
            font-size: 0.875rem;
            opacity: 0.9;
        }

.course-body {
            padding: 32px;
        }

.course-features {
            list-style: none;
            margin-bottom: 24px;
        }

.course-features li {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            color: var(--gray-600);
        }

.course-features li i {
            color: var(--success);
            margin-right: 12px;
            font-size: 0.875rem;
        }

.course-price {
            display: flex;
            align-items: baseline;
            margin-bottom: 32px;
        }

.course-price .amount {
            font-size: 2rem;
            font-weight: 800;
            color: var(--dark);
        }

.course-price .period {
            color: var(--gray-600);
            margin-left: 8px;
        }

.course-price .original {
            color: var(--gray-400);
            text-decoration: line-through;
            margin-left: 12px;
            font-size: 1rem;
        }

/* Faculty */
        .faculty {
            background-color: var(--light);
        }

.faculty-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

.faculty-card {
            background-color: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }

.faculty-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }

.faculty-img {
            height: 240px;
            background-color: var(--gray-100);
            position: relative;
            overflow: hidden;
        }

.faculty-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.faculty-card:hover .faculty-img img {
            transform: scale(1.05);
        }

.faculty-social {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 20px;
            display: flex;
            justify-content: center;
            gap: 12px;
            transform: translateY(100%);
            transition: var(--transition);
        }

.faculty-card:hover .faculty-social {
            transform: translateY(0);
        }

.faculty-social a {
            width: 36px;
            height: 36px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }

.faculty-social a:hover {
            background-color: var(--primary);
            color: white;
        }

.faculty-info {
            padding: 24px;
        }

.faculty-info h4 {
            margin-bottom: 8px;
            font-size: 1.25rem;
        }

.faculty-subject {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 8px;
        }

.faculty-exp {
            color: var(--gray-600);
            font-size: 0.875rem;
            margin-bottom: 16px;
        }

.faculty-bio {
            color: var(--gray-600);
            font-size: 0.875rem;
            line-height: 1.5;
        }

/* Enhanced Batch Schedule */
        .batch-schedule {
            background-color: white;
        }

.schedule-container {
            background-color: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-xl);
        }

.schedule-table {
            width: 100%;
            border-collapse: collapse;
        }

.schedule-table thead {
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }

.schedule-table th {
            padding: 20px;
            text-align: left;
            color: white;
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.schedule-table tbody tr {
            border-bottom: 1px solid var(--gray-200);
            transition: var(--transition);
        }

.schedule-table tbody tr:hover {
            background-color: var(--primary-light);
        }

.schedule-table td {
            padding: 20px;
            color: var(--gray-700);
        }

.batch-status {
            display: inline-flex;
            align-items: center;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.75rem;
            gap: 6px;
        }

.status-open {
            background-color: #d1fae5;
            color: #065f46;
        }

.status-full {
            background-color: #fee2e2;
            color: #991b1b;
        }

.status-limited {
            background-color: #fef3c7;
            color: #92400e;
        }

/* Testimonials */
        .testimonials {
            background: linear-gradient(135deg, var(--light) 0%, #f0f4ff 100%);
        }

.testimonials-slider {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

.testimonial-card {
            background-color: white;
            border-radius: var(--radius-lg);
            padding: 48px;
            box-shadow: var(--shadow-lg);
            margin: 20px;
            position: relative;
        }

.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 5rem;
            font-family: 'Playfair Display', serif;
            color: var(--primary-light);
            line-height: 1;
            z-index: 0;
        }

.testimonial-content {
            position: relative;
            z-index: 1;
        }

.testimonial-text {
            font-size: 1.125rem;
            font-style: italic;
            color: var(--gray-700);
            margin-bottom: 32px;
            line-height: 1.7;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            gap: 16px;
        }

.author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--gray-200);
            overflow: hidden;
        }

.author-info h4 {
            margin-bottom: 4px;
            font-size: 1.125rem;
        }

.author-rank {
            color: var(--secondary);
            font-weight: 600;
            font-size: 0.875rem;
        }

.slider-controls {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 40px;
        }

.slider-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid var(--gray-300);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

.slider-btn:hover {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

/* Enhanced Enquiry Form */
        .enquiry-section {
            background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }

.enquiry-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
            opacity: 0.1;
        }

.enquiry-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

.enquiry-content h2 {
            color: white;
            margin-bottom: 24px;
        }

.enquiry-content p {
            color: var(--gray-300);
            margin-bottom: 24px;
            font-size: 1.125rem;
        }

.enquiry-features {
            list-style: none;
            margin: 32px 0;
        }

.enquiry-features li {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            color: var(--gray-300);
        }

.enquiry-features li i {
            color: var(--secondary);
            margin-right: 12px;
            font-size: 1.125rem;
        }

.enquiry-form {
            background-color: white;
            padding: 48px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
        }

.form-header {
            text-align: center;
            margin-bottom: 32px;
        }

.form-header h3 {
            color: var(--dark);
            margin-bottom: 8px;
        }

.form-header p {
            color: var(--gray-600);
        }

.form-group {
            margin-bottom: 24px;
        }

.form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--gray-700);
        }

.form-control {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-md);
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

/* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 80px 0 30px;
            position: relative;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

.footer-about .footer-logo {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 16px;
            color: white;
        }

.footer-about .footer-logo span {
            color: var(--secondary);
        }

.footer-about p {
            color: var(--gray-300);
            margin-bottom: 24px;
        }

.social-links {
            display: flex;
            gap: 16px;
        }

.social-links a {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }

.social-links a:hover {
            background-color: var(--primary);
            transform: translateY(-3px);
        }

.footer-links h4, .footer-contact h4 {
            font-size: 1.125rem;
            margin-bottom: 24px;
            color: white;
            position: relative;
            padding-bottom: 12px;
        }

.footer-links h4::after, .footer-contact h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: var(--secondary);
        }

.footer-links ul {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 12px;
        }

.footer-links a {
            color: var(--gray-300);
            text-decoration: none;
            transition: var(--transition);
        }

.footer-links a:hover {
            color: var(--secondary);
            padding-left: 8px;
        }

.footer-contact p {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            color: var(--gray-300);
        }

.footer-contact i {
            margin-right: 12px;
            color: var(--secondary);
            width: 20px;
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gray-300);
            font-size: 0.875rem;
        }

/* Animations */
        .fade-in {
            animation: fadeIn 0.8s ease forwards;
        }

.slide-up {
            animation: slideUp 0.8s ease forwards;
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .enquiry-container {
                grid-template-columns: 1fr;
            }
            
            .enquiry-section::before {
                display: none;
            }
            
            .hero h1 {
                font-size: 2.75rem;
            }
        }

@media (max-width: 768px) {
            .nav-links, .nav-cta {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .mobile-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                background-color: white;
                box-shadow: var(--shadow-xl);
                padding: 100px 40px 40px;
                transition: var(--transition);
                z-index: 1000;
            }
            
            .mobile-menu.active {
                right: 0;
            }
            
            .mobile-menu .nav-links {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
            
            .mobile-menu .nav-cta {
                display: flex;
                flex-direction: column;
                margin-top: 40px;
            }
            
            .mobile-menu-close {
                position: absolute;
                top: 30px;
                right: 30px;
                background: none;
                border: none;
                font-size: 1.5rem;
                color: var(--dark);
                cursor: pointer;
            }
            
            .hero h1 {
                font-size: 2.25rem;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .section-header h2 {
                font-size: 2rem;
            }
            
            .countdown {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .course-grid {
                grid-template-columns: 1fr;
            }
            
            .schedule-table {
                display: block;
                overflow-x: auto;
            }
        }

@media (max-width: 576px) {
            section {
                padding: 70px 0;
            }
            
            .hero {
                padding: 140px 0 80px;
            }
            
            .hero h1 {
                font-size: 1.875rem;
            }
            
            .countdown-item {
                min-width: 80px;
                padding: 16px 12px;
            }
            
            .countdown-number {
                font-size: 2rem;
            }
            
            .testimonial-card {
                padding: 32px 24px;
            }
        }

JavaScript

// Countdown Timer
        function updateCountdown() {
            const targetDate = new Date('June 30, 2024 23:59:59').getTime();
            const now = new Date().getTime();
            const timeLeft = targetDate - now;
            
            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
            
            document.getElementById('days').textContent = days.toString().padStart(2, '0');
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            
            if (timeLeft < 0) {
                clearInterval(countdownInterval);
                document.querySelector('.countdown').innerHTML = "<div style='font-size: 1.5rem; font-weight: 700; color: #ef4444;'>Early Bird Offer Expired</div>";
            }
        }
        
        const countdownInterval = setInterval(updateCountdown, 1000);
        updateCountdown();
        
        // Form Submission
        document.getElementById('admissionForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show success message
            const form = this;
            const originalButton = form.querySelector('button[type="submit"]');
            const originalHTML = originalButton.innerHTML;
            
            originalButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
            originalButton.disabled = true;
            
            setTimeout(() => {
                alert('Thank you for your enquiry! Our admissions team will contact you within 24 hours.');
                form.reset();
                originalButton.innerHTML = originalHTML;
                originalButton.disabled = false;
            }, 1500);
        });
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const mobileMenuClose = document.getElementById('mobileMenuClose');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.add('active');
            document.body.style.overflow = 'hidden';
        });
        
        mobileMenuClose.addEventListener('click', () => {
            mobileMenu.classList.remove('active');
            document.body.style.overflow = 'auto';
        });
        
        // Close mobile menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                mobileMenu.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
            
            // Update active nav link
            const sections = document.querySelectorAll('section');
            const navLinks = document.querySelectorAll('.nav-links a');
            
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (scrollY >= sectionTop - 150) {
                    current = section.getAttribute('id');
                }
            });
            
            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${current}`) {
                    link.classList.add('active');
                }
            });
        });
        
        // Course tabs filtering
        const courseTabs = document.querySelectorAll('.course-tab');
        const courseCards = document.querySelectorAll('.course-card');
        
        courseTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Remove active class from all tabs
                courseTabs.forEach(t => t.classList.remove('active'));
                
                // Add active class to clicked tab
                tab.classList.add('active');
                
                const filter = tab.getAttribute('data-filter');
                
                // Show/hide course cards based on filter
                courseCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Testimonial slider
        const testimonials = [
            {
                text: "\"ExcelEd's JEE program was a game-changer for me. The faculty's teaching methodology and regular test series helped me secure AIR 187 in JEE Advanced. I'm now studying Computer Science at IIT Bombay.\"",
                name: "Rahul Verma",
                rank: "AIR 187, JEE Advanced 2023 | IIT Bombay",
                image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
            },
            {
                text: "\"The NEET biology faculty at ExcelEd are exceptional. Their in-depth coverage of NCERT and beyond helped me score 680/720. The regular doubt-clearing sessions were particularly helpful.\"",
                name: "Priya Singh",
                rank: "NEET Score: 680/720 | MBBS at AIIMS Delhi",
                image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
            },
            {
                text: "\"As a working professional preparing for UPSC, the flexible weekend batches and comprehensive study material provided by ExcelEd were exactly what I needed. I cleared my prelims in the first attempt!\"",
                name: "Arun Mehta",
                rank: "UPSC Prelims Cleared 2023 | IRS Officer",
                image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
            }
        ];
        
        let currentTestimonial = 0;
        const testimonialCard = document.querySelector('.testimonial-card');
        const prevBtn = document.getElementById('prevTestimonial');
        const nextBtn = document.getElementById('nextTestimonial');
        
        function updateTestimonial() {
            const testimonial = testimonials[currentTestimonial];
            testimonialCard.innerHTML = `
                <div class="testimonial-content">
                    <p class="testimonial-text">${testimonial.text}</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="${testimonial.image}" alt="${testimonial.name}">
                        </div>
                        <div class="author-info">
                            <h4>${testimonial.name}</h4>
                            <div class="author-rank">${testimonial.rank}</div>
                        </div>
                    </div>
                </div>
            `;
            
            // Add animation
            testimonialCard.style.animation = 'none';
            setTimeout(() => {
                testimonialCard.style.animation = 'slideUp 0.8s ease forwards';
            }, 10);
        }
        
        prevBtn.addEventListener('click', () => {
            currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
            updateTestimonial();
        });
        
        nextBtn.addEventListener('click', () => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            updateTestimonial();
        });
        
        // Auto-rotate testimonials every 5 seconds
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            updateTestimonial();
        }, 5000);
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // Close mobile menu if open
                    mobileMenu.classList.remove('active');
                    document.body.style.overflow = 'auto';
                    
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, observerOptions);
        
        // Observe elements for animation
        document.querySelectorAll('.slide-up').forEach(el => {
            observer.observe(el);
        });

Coaching Institute Page Template Preview

Download Options